New Response

« Return to the main article

You are replying to:

    • avatar
    • Monica
    • Posted on Sat 11 Mar 2006

    I've implemented this solution for one of our apps. We had another requirement though, to be able to move the actions from top to bottom. Also, I had no need for the "static" div, but left it in on the off chance we may need it later. Anyway, I used the following solution, and thought it may help others out....

    set the styles as follows:

    <style type="text/css" media="print"> #static { display:none; } </style> <style type="text/css" media="screen"> #static{ position:absolute; height:45px; top:0px; background-color:#dfd; } #links{ top:0px; height:20px; background-color:#ddd; }

    #buttons { top:25px; height:25px; background-color:#fdf; }

    #scrolls { top:45px; position:absolute; overflow:auto; height:expression(document.documentElement.clientHeight-45); width:expression(document.documentElement.clientWidth); } body{ overflow:hidden; margin:0px; } html{ overflow:hidden; } </style>

    created 3 js functions as follows:

    var nav function bottom(){ nav="bottom"; document.getElementById('static').style.top=document.documentElement.clientHeigh t-45; document.getElementById('links').style.top=document.documentElement.clientHeight -45; document.getElementById('buttons').style.top=document.documentElement.clientHeig ht-25; document.getElementById('scrolls').style.top=0; document.getElementById('static').style.position="absolute"; }

    function top(){ nav="top"; document.getElementById('static').style.top=0; document.getElementById('links').style.top=0; document.getElementById('buttons').style.top=25; document.getElementById('scrolls').style.top=46; document.getElementById('static').style.position="absolute"; }

    function resize() { if(nav=="bottom") { bottom(); } else { top(); } }

    on the body tag I added:

    onResize="resize()" onLoad="top()"

    This solution also works without the print issues previously listed.

Your Comments