Sizing my viewable content (vertical)

[southbeach]

I working on a page where upon clicking an icon I do
(a) Display hidden layer blockScreen
(b) Display hidden layer inputForm

Layer blockScreen has CSS properties:

div#blockScreen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
	background-color: #CCC;
	opacity:.55;
}

This works well except that if the screen content goes beyond the standard screen size, user could scroll down and potentially trigger other actions off the page; this is the very thing I am trying to prevent by "blocking" the screen.

I figure I could change the blockScreen layer height property if I knew what to set it to.

So, is there a way I can obtain the height, including beyond standard screen size?

Thank you all in advance for your help!



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[ScottPrelewicz]

You can get the height of the window with this:

function wHeight() {
    var windowHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        windowHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    windowHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    windowHeight = document.body.clientHeight;
    } return windowHeight;
}

Note: I didnt write that function, but I dont rememeber who did so unfortunately cant give credit.

The way I've always obtained a div height is using prototype:

http://www.prototypejs.org/api/element/getheight

Scott Prelewicz
Web Developer
COMAND Solutions

 

[southbeach]

Scott,

Nice function - Thank you for posting it ... but it does not give me the height I am looking for.

My problem is that at some point, the content will go beyond the first viewable area (this is when the scroll bar appears) and using a height of 100% will only cover this viewable area not beyond so, if the user scrolls down (using scroll bar), my blocking screen will not be full proof.

I do not want to use height 150% or 200%, this makes the screen jumpy if the content still fits within the first screen full. Besides, I figure that using dynamic value beats using a fixed value which can later render itself worthless.

Thanks!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.