Question

We have a frameset (not iFrames !) application where we need to save state of frames that users choose.. and then restore this state next time they hit the page..

Using jQuery as weapon of choice . this is how far we’ve got..

 <frameset rows="40,600,40" id="myframeset" name="myframeset">

     <frame name="mytop" id="mytop" src="http://xyz.com/top.html">

     <frameset cols="50%,50%">
        <frame name="leftframe" id="leftframe" src="http://xyz.com">
        <frame name="rightframe" id="rightframe" src="http://xyz.com">
     </frameset>

     <frame name="mybottom" id="mybottom" src="http://xyz.com/bottom.html">

</frameset>

Running some jQuery in any of the child frames.. ( say mybottom) its easy to pull the row values from the top frameset scope…

var myrows = $('#myframeset', top.document).attr('rows'); 
   alert(myrows);  // returns 40,600,40

and its easy to change the frame heights with jQuery .attr too…

$('#myframeset', top.document).attr({'rows':'0,*,300'});

var myrows = $('#myframeset', top.document).attr('rows'); 
   alert(myrows); // returns 0,*,300

But it seems that when the user moves the frames to change the heights themselves, manually..
it does not affect what attr returns

( move the frames manually then click the button… )

$("button").click(function() {

  var myrows = $('#myframeset', top.document).attr('rows'); 
    alert(myrows);  //  always returns 0,*,300

I feel like there is a simple concept I’m missing here.. please advise
if there is a way we can grab the frameset values (onUnload) put them
in a cookie.. and then restore onload next time user comes to page

Many thanks..

PS.. if this can’t be done with rows/cols .. perhaps with window heights/widths ?

Answer 1

To finish your collection (you’ve already created a function to adjust the rows):

function getTopRows(){
    var rows = [];
    var main = $("#myframeset", top.document);

    //Get the whole height of the main <frameset>
    var wholeheight = $(main).height();

    //Calculate the relative height of each frame (child) of the main <frameset>
    main.children().each(function(){
         rows.push(Math.round(100*$(this).height()/wholeheight));
    });

    rows = rows.join("%,")+"%"; //Example: 6%,87%,6%
    return rows;
}

Calling getTopRows() returns a string of relative units, which can be used to set the top rows. This value can be saved by using the JQuery cookie plugin:

//You can add this function as an event listener to a button
function saveTopRows(){
    var topRows = getTopRows();
    $.cookie("rows", topRows); //Save data
}

//Execute on load of the page:
(function(){//Anonymous wrapper to prevent leaking variables
    var rows = $.cookie("rows");
    if(rows) $("#myframeset", top.document).attr("rows", rows);
})();

Don’t forget to add the JQuery cookie plugin, either by defining it in the source, or by adding an external JS file. See the JQuery website for the source of the Cookie plugin. After downloading the source, save it as “jquery.cookie.js”, and add this code:

...
<script src="jquery.cookie.js"></script>
<script>
  function getTopRows(){
  //Rest of code