positioning a layer's contents at bottom of browser
Kevin Lowe
I want to place an image at the bottom left hand cornerof a page and have it
stay there as the user scrolles up and down the page, ie the image is alwasl
in the same place on the screen regardless of where you are on the page.
To do this I have borrowed from a page that has an image static at the top
which uses layers, see here:
<SCRIPT LANGUAGE="JavaScript">
function toTop() {
if (NS4 == 1) {// netscape
document["ads"].top = window.pageYOffset;
}
else {// IE
document.all["ads"].style.pixelTop = document.body.scrollTop;
}
}
</SCRIPT>
<div id="ads" style="position:relative; top:0">
<img src=partners.gif>
</div>
The function "toTop" is called every few milliseconds elswhere.
How could I modify this to place the layer at the bottom, detecting the
screen size and working for NN and IE?
Any help or pointers would be great.
Thanks,
Kevin
Martin Honnen
<HEAD>
<TITLE>
</TITLE>
<STYLE>
#fixedDiv {
position: absolute;
visibility: hidden;
}
</STYLE>
<SCRIPT>
var w, h, div, tid;
var started = false;
function keepFixed () {
if (!started) {
if (document.layers) {
div = document.fixedDiv;
w = div.document.width;
h = div.document.height;
}
else if (document.all) {
div = document.all.fixedDiv;
w = div.offsetWidth;
h = div.offsetHeight;
}
else if (document.getElementById) {
div = document.getElementById('fixedDiv');
w = div.offsetWidth;
h = div.offsetHeight;
}
}
if (document.layers) {
div.left = window.pageXOffset;
div.top = window.pageYOffset + window.innerHeight - h;
}
else if (document.all) {
div.style.posLeft = document.body.scrollLeft;
div.style.posTop = document.body.scrollTop +
document.body.clientHeight - h;
}
else if (document.getElementById) {
div.style.left = (window.pageXOffset) + 'px';
div.style.top = (window.pageYOffset + window.innerHeight - h) +
'px';
}
if (!started) {
started = true;
if (document.layers)
div.visibility = 'show';
else
div.style.visibility = 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="fixedDiv">
<IMG SRC="kiboInside.gif">
</DIV>
<SCRIPT>
tid = setInterval('keepFixed()', 50);
</SCRIPT>
<SCRIPT>
for (var i = 0; i < 40; i++)
document.write(i + ' Kibology.<BR>');
</SCRIPT>
</BODY>
</HTML>
Note that for NN4 and NN6 you would need to adapt the code if you expect
your page to have a horizontal scrollbar
--
Martin Honnen
http://javascript.faqts.com/
http://home.t-online.de/home/martin.honnen/jsgoddies.html