Solved

How can achieve this split screen with javascript

Posted on 2013-11-26
6
562 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript export function not working in IE 15 34
Error in page 3 45
WordPress Themes 10 34
insert text field data into html script 13 21
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 …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

911 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now