asked on

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?

Thanks!

Kyle Hamilton

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 .

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlcnet

ASKER

@GaryC123

Thank you! But how I will be able to dynamically move the created divs? More or less like in a widget style?

Gary

Don't know what you mean - move them. Move them where?

dlcnet

ASKER

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.

Kyle Hamilton

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