homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

a div which cover all page even if its scroll bar is visible

 9:49 am on May 5, 2010 (gmt 0)

document.getElementById("backdiv").style.width = "100%";
document.getElementById("backdiv").style.height = document.getElementById("footerdiv").offsetParent.offsetTop+"px";

footerdiv : is placed inside a table column.....so the offset parent will be the approx total height of the page............

backdiv : which will cover all the page contents to put something over it ...e.g

a feedback form.....update request occuring.......



 2:20 pm on May 5, 2010 (gmt 0)

Welcome to the forums, aftab82. I'm not sure I understand you correctly - does this create something like a lightbox that covers the entire screen?


 7:30 am on May 6, 2010 (gmt 0)

thanks tedster.......
yea something like this........

for e.g visit
[foursquare.com...] and click on feedback tab on right .........

you will see a layer and the background get locked .......

this can be achieve by setting div height and width to 100% and setting its position absolute and z-index heigher than all controls except the layer which will be displaying over it.......

but there is one problem which occur when the page shows a scoll bar because of contents ........in that case 100% height will not make whole page area including scrolling area to be locked.....so the solution is to get the offset top of an control(e.g div) which is at the footer..........



 6:31 pm on May 6, 2010 (gmt 0)

We don't usually allow links to example sites - but I'll make an exception since foursquare is such a monster website and very well known. Yes, that is what I was calling a lightbox effect.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved