I need to assign a height to an element based on the height of the screen. I have content going past the screen fold, so I can not use
$(window).height(); Is there a way to calculate the height of the visible part of the open window?
- What do you mean "height of the visible part"? Which is the invisible part?Jon– Jon2012-05-01 19:12:29 +00:00Commented May 1, 2012 at 19:12
- 1$(window).height(); will show the window size but $(document).height(); will show the whole document height including scrolling part. It should do the job.Jay– Jay2012-05-01 19:15:19 +00:00Commented May 1, 2012 at 19:15
- @Jon Anything below screen fold is invisible ;)santa– santa2012-05-01 19:16:08 +00:00Commented May 1, 2012 at 19:16
- @Jey, you're right. Not sure what I was thinking.santa– santa2012-05-01 19:17:34 +00:00Commented May 1, 2012 at 19:17
- The invisible part is where we usually keep our cup of coffeeRoko C. Buljan– Roko C. Buljan2012-05-01 19:30:17 +00:00Commented May 1, 2012 at 19:30
Add a comment |
3 Answers
Another way to do it is like so:
var height = window.innerHeight || document.documentElement.clientHeight || getElementsByTagName('body')[0].clientHeight; This will fallback based on browser support
Comments
This will show you the difference of document or window height.
Comments
To get the visible height of the element you would subtract the offetTop of the element from the height of the window.
var elTop = $("#element").offset().top; var winHeight = $(window).height(); var elVisibleHeight = winHeight - elTop; If elVisibleHeight < 0 then the element is below the screen fold and not visible. If you needed to keep track of the element's position, you'd need to update this on window scroll.
UPDATE
I've created a fiddle with a working example of the theory. Obviously you can shorten this, I've left it pretty verbose so it's more clear as to what is happening.
