i am not bothered about the fancy effects all i am trying to do is make a transparent div that overlays the page with the image on top.
i have worked out how to do this, but i can not get this to work when the page is scrollable. the transparent div only covers the initial visible part of the viewport, then when you scroll the div does not carry on covering the page.
i have done lots of research on this and i just cant find a way to do this. i understand that i need to get the height and width properties of the viewport and then apply them to the div via the javascript but whatever i try does not return the value i need.
i have tired stripping apart the lightbox script to see how he gets the viewport properties and i still cant get it too work.
ok cheers for for the reply thats brilliant. im jus wondering if you could help me understand whats going on because i aint too sure (im still learning javascript).
so the 1st line:
Code:
if (document.body.scrollHeight>document.body.offsetHeight)
if the bodys scroll height is greater than the offset height then
get the documents scroll width and height (for explorer mac)
then when you call the function
Code:
body onload="document.getElementById('tst').style.height=zxcBdyWH()[1]+'px';"
get the the element tst and change its height
zxcBdyWH() being the function that gets the document size
[1] being the document.body.scrollHeight or document.body.offsetHeight from the 2nd or 3rd line (because [0] would return document.body.scrollWidth or document.body.offsetWidth)
and the +'px' adds the px on the end of the value returned by the function
I've had to do this last week - in the end I settled for the following method (my full-page div had the id 'blankout'):
Code:
function blankoutsize(element){
if(window.innerWidth){ //for innerWidth browsers
var width = window.innerWidth; //getWidth
var height = window.innerHeight; //getHeight
}else{ //for clientWidth browsers
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
}
document.getElementById('blankout').style.width = width; //apply the width to blankout
document.getElementById('blankout').style.height = height; //apply the height to blankout
}
/* this makes the resize script fire on page-scrolling */
if(document.attachEvent){
window.attachEvent('onscroll',function(e){blankoutsize();});
}else if(document.addEventListener){
window.addEventListener('scroll',function(e){blankoutsize();},false);
}else{
window.onscroll = function(e){bankoutsize();};
}
/* this makes the resize script fire on resizing the page */
if(document.attachEvent){
window.attachEvent('onresize',function(e){blankoutsize();});
}else if(document.addEventListener){
window.addEventListener('resize',function(e){blankoutsize();},false);
}else{
window.onresize = function(e){bankoutsize();};
}
for interest? my used for years function for window width height(accounts for doc type)
Code:
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
for interest? my used for years function for window width height(accounts for doc type)
on second throughts - use vwphilip's function it's much more robust
In fact, I think I'll convert my blankoutsize() function to use that
Thus:
Code:
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
function blankoutsize(){
var winDimen = zxcWWHS();
document.getElementById('blankout').style.width = winDimen[0]; //apply the width to blankout
document.getElementById('blankout').style.height = winDimen[1]; //apply the height to blankout
}
/* this makes the resize script fire on page-scrolling */
if(document.attachEvent){
window.attachEvent('onscroll',function(e){blankoutsize();});
}else if(document.addEventListener){
window.addEventListener('scroll',function(e){blankoutsize();},false);
}else{
window.onscroll = function(e){bankoutsize();};
}
/* this makes the resize script fire on resizing the page */
if(document.attachEvent){
window.attachEvent('onresize',function(e){blankoutsize();});
}else if(document.addEventListener){
window.addEventListener('resize',function(e){blankoutsize();},false);
}else{
window.onresize = function(e){bankoutsize();};
}
- afaik that function will work on all FF, safari, IE5+ on Windows and Mac.
Last edited by Mikebert4; 09-15-2008 at 11:19 AM..
function blankoutsize(){
var winDimen = zxcWWHS();
document.getElementById('blankout').style.width = winDimen[0]; //apply the width to blankout
document.getElementById('blankout').style.height = winDimen[1]; //apply the height to blankout
}
while above is OK for IE
suggest
Code:
function blankoutsize(){
var winDimen = zxcWWHS();
document.getElementById('blankout').style.width = winDimen[0]+'px'; //apply the width to blankout
document.getElementById('blankout').style.height = winDimen[1]+'px'; //apply the height to blankout
}
Before you post, read our: 
