Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to to get one DIV to the front in case of cascaded DIVs

Posted on 2014-01-02
10
Medium Priority
?
383 Views
Last Modified: 2014-01-03
I have 4 DIVs if type  draggable and resizable as per the code below, I want when I select a div to move it or resize it to get it to the front and send the rest to the back, how can I do so?

 <style>
        #window1 { background-position: top left; width: 150px; height: 150px; padding: 0.5em; }
        #window2 { background-position: top left; width: 150px; height: 150px; padding: 0.5em; }
        #window3 { background-position: top left; width: 150px; height: 150px; padding: 0.5em; }
        #window4 { background-position: top left; width: 150px; height: 150px; padding: 0.5em; }
        .ui-resizable-helper { border: 2px dotted #00F; }
        </style>
        <script>
        $(function() {
                $( "#window1" ).draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 } });
                $( "#window1" ).resizable({animate: true},{helper: "ui-resizable-helper"});
                $( "#window2" ).draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 } });
                $( "#window2" ).resizable({animate: true},{helper: "ui-resizable-helper"});
                $( "#window3" ).draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 } });
                $( "#window3" ).resizable({animate: true},{helper: "ui-resizable-helper"});
                $( "#window4" ).draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 } });
                $( "#window4" ).resizable({animate: true},{helper: "ui-resizable-helper"});
        });
        </script>
<div id="window1" class="ui-widget-content">
        <p id="window1content">Window's content is not set</p>
</div>
<div id="window2" class="ui-widget-content">
        <p id="window2content">Window's content is not set</p>
</div>
<div id="window3" class="ui-widget-content">
        <p id="window3content">Window's content is not set</p>
</div>
<div id="window4" class="ui-widget-content">
        <p id="window4content">Window's content is not set</p>
</div>

Open in new window

0
Comment
Question by:Ashraf Hassanein
  • 5
  • 4
10 Comments
 
LVL 5

Expert Comment

by:scgstuff
ID: 39751826
Could you set the z-index of the div that has been dragged?  The z-index would allow it to sit on top of the other divs.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39751837
Test page : http://jsfiddle.net/x2uK4/

$(function() {
    var start = function() {
        $(this).insertAfter(".ui-widget-content:last");
    }
    $( ".ui-widget-content" )
        .draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 }, start:start })
        .resizable({animate: true},{helper: "ui-resizable-helper"});
});

Open in new window

0
 

Author Comment

by:Ashraf Hassanein
ID: 39752198
How can define the z axis?

Hi Leakim971, the code did not work, when I mouse click on a certain div it moves instead another one far of it.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 83

Expert Comment

by:leakim971
ID: 39752288
Which browser? Work fine for me on the latest Chrome, FF and IE10 & comp. mode

http://fiddle.jshell.net/x2uK4/show/
0
 

Author Comment

by:Ashraf Hassanein
ID: 39752323
Hi leakim971, that is reallly strange, I tested in chrome and the IE11 and I have the sane issue I copied the same same as your last file but it is as is, you can check in my url:

     https://www.hassans.nl/new
0
 
LVL 83

Expert Comment

by:leakim971
ID: 39752508
you did not notice my css update, I replaced your css ;-)
position must be absolute
0
 

Author Comment

by:Ashraf Hassanein
ID: 39753734
Now it is working :-) , I have a small problem, in your example you can freely move the div's up and down right and left without increasing its area, in mine I can only move it right and left if I want to move up and down I need to change its size, can you tell me what am I doing wrong?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 39753835
add this css :

#main {
 height:100%;
}

Hi Leakim971, the code did not work, when I mouse click on a certain div it moves instead another one far of it.
for the next time, please, when you say it don't work, specify if come from the original answer OR from your deployment.
0
 

Author Comment

by:Ashraf Hassanein
ID: 39753844
Hi Leakim971, thanks  for your help, it now it is working my deployment, for the confusion.
0
 

Author Closing Comment

by:Ashraf Hassanein
ID: 39753846
Very helpful solution
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

916 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