views:

69

answers:

1

I have a <div> element with position: absolute and z-index something big. I would like to cover the entire screen with this div with javascript. This is what I do and it works:

document.getElementById('mydiv').style.top = 0;
document.getElementById('mydiv').style.left = 0;
document.getElementById('mydiv').style.width = '100%';
document.getElementById('mydiv').style.height = '100%';

However, when I scroll down with long webpages, this code displays my div at the top of the page, so the div renders above the region I currently view. How can I change the top and left values so that my div always covers the active field I am viewing?

I work on firefox 3.6.*.

Thank you

A: 

Change it to position: fixed.

Note that this won't work in IE6.

SLaks
Thanks. This solves the problem. However, I would also like to learn a way to get the top and left values for the region relative to the entire page.
artsince
What do you mean?
SLaks
`document.documentElement.scrollTop`
SLaks
suppose the height of the website I am viewing is 6000px and my browser height is 800px. When I scroll down to the very bottom of the page, the left-top coordinate of my viewing area will roughly be (0, 5200). I would like to know how I can get that height value at any part of the page.
artsince
You're looking for `document.documentElement.scrollTop`.
SLaks
thanks. scrollTop is what I needed.
artsince