Get the visible height of an element instead of its actual height using jquery

Question

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

In the message I'm connected with, I decided that the solution to my problem would be to change the purpose of the link if the visible height of the div is greater than that of another div. In my layout, all the divs that I mean by have a height of 1100 pixels. But this is not what I want to get. I would like the script to get the height of the div, which is currently visible to the visitor, and not its actual height. Is there a way to do this using jQuery?

Thanks in advance!

Answer 1

What you can do is take the position of the elements at the top of your parent container, and then minus it from the height of the parents container. This will give you the visible height of the element.

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

Here is a fiddle showing this.

Answer 2

Wrap the contents of the DIV viewport with another DIV. Set the DIV to read the height of all the content as such:

JQuery: $ ('div # contents'). height ();

Markup:

 <div id="viewport"> <div id="contents">...all your div contents...</div> </div> 

Hope this helps. Good luck.

Answer 3

Do you need to use a fixed height of 1100 pixels? You can also specify max-height: 1100px; and height: 100%; Depending on what you want to put in the div, you can of course get the current height by

 $('.divclass').height();