Welcome to WebmasterWorld Guest from 54.242.9.97

Forum Moderators: incrediBILL

Message Too Old, No Replies

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

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

New User

5+ Year Member

joined:May 5, 2010
posts: 2
votes: 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)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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)

New User

5+ Year Member

joined:May 5, 2010
posts: 2
votes: 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)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members