Solved

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

Posted on 2014-01-02
10
354 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
Comment Utility
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 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 82

Expert Comment

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

Author Comment

by:Ashraf Hassanein
Comment Utility
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 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
Hi Leakim971, thanks  for your help, it now it is working my deployment, for the confusion.
0
 

Author Closing Comment

by:Ashraf Hassanein
Comment Utility
Very helpful solution
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

763 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

8 Experts available now in Live!

Get 1:1 Help Now