Getting jQuery UI Dialog z-index properties

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
dreamingmethodsAsked:
Who is Participating?
 
mrh14852Commented:
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
 
mrh14852Commented:
This plugin may have what you are looking for.

http://plugins.jquery.com/plugin-tags/z-index
0
 
dreamingmethodsAuthor Commented:
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
 
dreamingmethodsAuthor Commented:
Absolute genius thank you - cool.
0
 
dreamingmethodsAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.