Managed multi dialog for a dashboard page

Managed multi dialog for a dashboard page

Hi all,

When displaying the home page of our web application business I displays several block with dedicated information ( list of my files to my contact list , ...). To make dynamic interface , I encapsulated the block ( div ) in jquery UI dialog (page dashboard ) . I love first results but i have one major point to used this solution.

?) I would like save the position and size(in SESSION variables) after eatch user action on each dialog.
In this case, the user finds his "dialogs" as he left them when he returns to the dashboard page.


 Thank you in advance for your help

CODE IF NEED

<style>
#area_dashbord{
 //width:900px;
        width:100%;
 height: 800px;
 border: 1px solid grey;
 overflow:hidden;
}
</style>

<div id="area_dashbord">
   
    <div id="dialog_window_1" title="Divers">
        <p>Bla bla bla</p>
    </div>

    <div id="dialog_window_2" title="Mes dossiers">
        <?php
            // Affichage de la liste
            echo $records;
        ?>   
    </div>

</div>

<script>
    $('#dialog_window_1').dialog({
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        //width: 'auto',
        width: 300,
        height: 300,
        position: { of: $( "#area_dashbord" ), my: 'left top', at: 'left top', offset: '5px' },
        collision : 'flip'
       
    });
   
    $('#dialog_window_2').dialog({
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        //width: 'auto',
        width: 300,
        height: 300,
        position: {of: $( "#dialog_window_1" ), my: 'left bottom', at: 'right bottom', offset: '5px'},
        collision : 'flip'
    });
   
    $("#dialog_window_1").dialog({modal:true});
    $('.ui-dialog').draggable( "option", "containment", '#area_dashbord' );
    $(this).dialog( "option", "position", 'left' ); 
   
    $("#dialog_window_2").dialog({modal:true});
    $('.ui-dialog').draggable( "option", "containment", '#area_dashbord' );
 </script>