...

View Full Version : full page overlay div dynamic height



mike182uk
09-12-2008, 11:51 PM
hi there

i am trying to make a script that operates in the same way as lightbox

http://www.lokeshdhakar.com/projects/lightbox2/

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.

any help on this would be awesome

vwphillips
09-13-2008, 10:29 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
body {
height:2000px;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcBdyWH(){
if (document.body.scrollHeight>document.body.offsetHeight) return [document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac
return [document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac;
}


/*]]>*/
</script></head>

<body onload="document.getElementById('tst').style.height=zxcBdyWH()[1]+'px';" >
<div style="position:absolute;top:0px;left:0px;width:100%;background-Color:red;" id="tst" >6</div>
</body>

</html>

mike182uk
09-14-2008, 10:02 PM
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:

if (document.body.scrollHeight>document.body.offsetHeight)
if the bodys scroll height is greater than the offset height then

the 2nd line:

return [document.body.scrollWidth,document.body.scrollHeight];
get the documents scroll width and height (for all browsers but explorer mac)

the 3rd line:

return [document.body.offsetWidth,document.body.offsetHeight];
get the documents scroll width and height (for explorer mac)

then when you call the function


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

is this correct?

vwphillips
09-15-2008, 10:42 AM
The conditional in the function is for browser detection returning either scrollHeight or bodyHeight

scrollHeight and bodyHeight are integers but the style.height must be in 'px', hense + 'px'.

I have been using that function for years but on testing today


<body onload="document.getElementById('tst').style.height=document.body.offsetHeight+'px';" >


is effective for IE and Moz browsers, I dont know about Mac

hopefully someone else can advise on this

Mikebert4
09-15-2008, 11:16 AM
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'):




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();};
}



then in the HTML:




<body onload="blankoutsize()">
<div id="blankout"></div>



and in css:




#blankout { position: fixed; width: 100&#37;; height: 100%; left: 0px; top: 0px; z-index: 4; background-color: #000000; opacity: 0.5; filter: alpha(50); }

vwphillips
09-15-2008, 11:41 AM
Mikebert4 has a different approach

for interest? my used for years function for window width height(accounts for doc type)


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.scrollTo p];
}


also foe IE opacity



#blankout { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 4; background-color: #000000; opacity: 0.5; filter: alpha(opacity=50); }

Mikebert4
09-15-2008, 12:16 PM
Mikebert4 has a different approach

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:




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.scrollTo p];
}

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.

vwphillips
09-15-2008, 01:58 PM
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

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
}

Mikebert4
09-15-2008, 03:06 PM
*slaps forehead*

cheers vw - missed that :s

mike182uk
09-15-2008, 04:21 PM
wow thanks for all the feedback thats great. cheers for all your help on this!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum