Webmaster
DHTML : A permanent navigation bar on the screen.
[ Contents ]
Dr Benton
Dynamic Repositioning
The underlying principle of our repositioning process is based on the detection of any scrolling of the page or resizing of the browser window. For this, we will handle the onResize and onScroll events by placing them in the <BODY> section (these events will then always be detected):
<BODY BGCOLOR="#0088CA" onLoad="positionne()" onScroll="positionne()" onResize="positionne()">
The role of thepositionne() function is to reposition the banner within the page. This one starts with a browser detection block which acts appropriately:
- With Internet Explorer, the following instructions will suffice to provide us with the necessary information for repositioning
the banner:
- document.body.scrollTop: distance between the top of the displayed page and the top window border. - With Navigator, it is a bit more difficult! Indeed, the browser from Netscape does not handle the onScroll event. So we will have to use some clever trick...
The onLoad event that occurs when the page is loaded will help to circumvent this small problem! It will allow us to call up the positionne() function as soon as the page is displayed.
- document.body.clientHeight: height of the browser's display area.
- document.body.clientWidth: width of the browser's display area.
- document.all.bandeau.offsetHeight: height of the "bandeau" object.
- document.all.bandeau.offsetWidth: width of the "bandeau" object.
Now we have reached the core stage of our process... If the browser is identified as Netscape Navigator, the positionne() function calls on another function, stat(), whose code is shown below. The role of the latter is to initiate a regular update of the banner position through the setTimeout('stat()',200) instruction. This instruction will call up stat() every 200 milliseconds.... the principle of an infinite loop, which will each time recalculate the banner position within the page.
<script>
<!--
function stat()
{
document.bandeau.top = pageYOffset+window.innerHeight-document.bandeau.document.height-30;
document.bandeau.left = (window.innerWidth-document.bandeau.document.width) / 2;
setTimeout('stat()',200)
}
function positionne()
{
Navig=navigator.appName
if(Navig=='Netscape')
{
stat()
}
else
{
bandeau.style.top = document.body.scrollTop+document.body.clientHeight-document.all.bandeau.offsetHeight+10;
bandeau.style.left = (document.body.clientWidth - document.all.bandeau.offsetWidth) / 2;
}
}
//-->
</script>
There we are! Isn't that nice? Now try it out with an animated GIF or an image map instead of our ugly table!