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....
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";
}
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.