Solved

How can achieve this split screen with javascript

Posted on 2013-11-26
6
572 Views
Last Modified: 2013-11-27
Hi experts,

I was looking for a long time how can I achieve this with JavaScript. Mainly I want to be able to dynamically add charts on the page and be able to display them say in-line, side by side or 4 x 4 matrix when I click on the icons show in the image bellow.

Is there any JavaScript UI library able to do this out of the box?

switch
Thanks!
0
Comment
Question by:dlcnet
  • 2
  • 2
  • 2
6 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39678942
you could do it with class switch, from float:left to float:none

that's kinda the core of the thing. but specifics will depend on the specifics of your content.

can't really help you without knowing anything about your page .
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39678951
This is usually done by adding/removing a class on the elements to set the widths - nothing really special

CSS
.myelements {
     display:inline /* default layout */
}
.myelements-block {
     display:block;
     width:50%;
}


JS
$("view-switcher").click(function(){
     $(".myelements").toggleClass(".myelements-block")
})
0
 

Author Comment

by:dlcnet
ID: 39679066
@GaryC123

Thank you! But how I will be able to dynamically move the created divs? More or less like in a widget style?
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 58

Expert Comment

by:Gary
ID: 39679074
Don't know what you mean - move them. Move them where?
0
 

Author Comment

by:dlcnet
ID: 39680151
in some web applications one is able to re-position the elements on the page. If you look at trello.com you are able to switch tasks on the "canvas" more or less like a widget behavior.

I want to be able to generate d3 graphs on demand, and be able to re-arrange them afterwards.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39680476
jquery UI is probably the most ubiquitous tool for drag and drop.

http://jqueryui.com/draggable/
http://jqueryui.com/droppable/

You'll want to house your graphs in draggable elements
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Access RV042 GUI / Browser Issues 25 48
Google Analytics setup 5 50
How to add a stringified JSON string to an IP address? 11 58
How to create a table with buttons 3 21
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question