Solved

How can achieve this split screen with javascript

Posted on 2013-11-26
6
568 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

773 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