Get visible height of an element instead of its actual height with jquery

jquery html height visible
Tom S. picture Tom S. · Jan 2, 2013 · Viewed 14.5k times · Source

This post is related to this one. Please consider reading it as well. :-)

In the post I linked to, I figured the solution to my problem would be to change the target of a link if the visible height of a div is greater than that of another div. In my layout, all the divs I'm referring to have a height of 1100px. But that's not what I want to get. I'd like the script to get height of the div that is currently visible to the visitor, not its real height. Is there a way to do it using jQuery?

Thanks in advance!

Answer

Blake Plumb picture Blake Plumb · Jan 2, 2013

What you can do is take the elements position to the top of its parent container and then minus it from the parents container height. That will give you the visible height of the element.

$('#container').height() - $('#overflow').position().top

Here is a fiddle showing this.

Related questions

Setting equal heights for div's with jQuery

I want to set equal height for divs with jQuery. All the divs may have different amount of content and different default height. Here is a sample of my html layout: <div class="container"> <div class="column"&…

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
Get the value in an input text box

What are the ways to get and render an input value using jQuery? Here is one:

Read More