Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Getting jQuery UI Dialog z-index properties

Posted on 2011-10-30
5
Medium Priority
?
694 Views
Last Modified: 2012-05-12
I am creating a web application that opens a number of jQuery UI dialog windows containing all kinds of content. I am looking for a way to be able to obtain the current z-index of each dialog window so that I can store it in an array - and return the user to the exact same z-index layout of the windows at another time. This works for me with x and y properties, and also width and height, but I can't seem to get z-index to work.

Values are returned by javascript - however they are not the CURRENT z-index properties of the windows after they have been shuffled/moved around and put into a different order. They are the values set at the beginning of the page being loaded - and seem to remain fixed to this.

I am using the following code inside a function/loop to try and obtain the z-index of the windows when a 'save' button is clicked - as I said, this DOES return a value, but it doesn't seem to return the current z-index order -

var sz = document.getElementById('resizable' + x).style.zIndex;

Any help from anyone gladly appreciated.

Best regards,

Andy
0
Comment
Question by:dreamingmethods
  • 3
  • 2
5 Comments
 
LVL 8

Expert Comment

by:mrh14852
ID: 37053439
This plugin may have what you are looking for.

http://plugins.jquery.com/plugin-tags/z-index
0
 

Author Comment

by:dreamingmethods
ID: 37053462
The LAYER MANAGER: Z-INDEX MANAGEMENT COMPONENT sounds along the right lines (is this the plugin you meant?) however there are no releases here, no links to download, and I cannot find any other mention of this plugin on the web anywhere.
0
 
LVL 8

Accepted Solution

by:
mrh14852 earned 2000 total points
ID: 37053800
Okay sorry about that...I didn't even look if it was there.

You can use something like this to do it.

This code when the save button is clicked will loop through the dialogs that have the class "dialogs" which I defined.  It will save them in an array by each dialog's index and allow you to arrange them by setting the z-index value in the array.

<script type="text/javascript">
    $(document).ready(function(){
        var arr = new Array();
        $( "#dialog1" ).dialog();
        $( "#dialog2" ).dialog();
        $( "#dialog3" ).dialog();
        $( "#save" ).button().click(function(){
            $(".dialogs").each(function(index){
                var z  = $(this).parents(".ui-dialog").css('z-index');
                    arr[index] = z;
            });
            $("#arrange").html('Arrange');
            $("#arrange").button().click(function(){
                $(".dialogs").each(function(index){
                    $(this).parents(".ui-dialog").css("z-index",""+arr[index]+"");
                });
            });
        });
    });
</script>

Open in new window


Here is the HTML

<body>
<div id="dialog1" class="dialogs" title="Dialog 1">Dialog 1</div>
<div id="dialog2" class="dialogs" title="Dialog 2">Dialog 2</div>
<div id="dialog3" class="dialogs" title="Dialog 3">Dialog 3</div>
<div id="save">Save</div>
<div id="arrange"></div>

</body>

Open in new window


Although this is just z-index...you can use this way to get all the position attributes to save for re-arranging.
0
 

Author Comment

by:dreamingmethods
ID: 37073433
Absolute genius thank you - cool.
0
 

Author Closing Comment

by:dreamingmethods
ID: 37073444
This provided me with the code I needed to show a visual example of the problem in action - and the few lines of code I needed to adapt into my own to get my project working.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

564 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