Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts

    full page overlay div dynamic height

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    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


    the 2nd line:
    Code:
    return [document.body.scrollWidth,document.body.scrollHeight];

    get the documents scroll width and height (for all browsers but explorer mac)


    the 3rd line:
    Code:
    return [document.body.offsetWidth,document.body.offsetHeight];

    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

    is this correct?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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

    Code:
    <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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    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();};
    }
    then in the HTML:

    Code:
    <body onload="blankoutsize()">
    <div id="blankout"></div>
    and in css:

    Code:
    #blankout { position: fixed; width: 100&#37;; height: 100%; left: 0px; top: 0px; z-index: 4; background-color: #000000; opacity: 0.5; filter: alpha(50); }
    Last edited by Mikebert4; 09-15-2008 at 10:19 AM. Reason: - I managed to miss off the CSS :(

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Mikebert4 has a different approach

    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];
    }
    also foe IE opacity

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by vwphillips View Post
    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:

    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.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    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
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    *slaps forehead*

    cheers vw - missed that :s

  • #10
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    wow thanks for all the feedback thats great. cheers for all your help on this!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •