Welcome to WebmasterWorld Guest from 23.20.230.24

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)

5+ Year Member





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)

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



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)

5+ Year Member



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)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month