How can achieve this split screen with javascript

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!
dlcnetAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
dlcnetAuthor Commented:
@GaryC123

Thank you! But how I will be able to dynamically move the created divs? More or less like in a widget style?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
GaryCommented:
Don't know what you mean - move them. Move them where?
0
 
dlcnetAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.