Solved

How can achieve this split screen with javascript

Posted on 2013-11-26
6
556 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 to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

757 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

18 Experts available now in Live!

Get 1:1 Help Now