CODEWITHSUNDEEP
jquerywindowheightelementdetect
Joonas
Joonas

Reputation: 7303

jQuery - Detect if element height is bigger than window height and do something about it

The tittle really says it all.

Basically i want to detect if this div's height is bigger than window height and do something about it..

I have done this but i cant get it to work http://jsfiddle.net/dhkCa/3 Why wont it work?

Edit: Fixed a little error in the css code. Jsfiddle link updated.

Upvotes: 5

Views: 25537

Answers (3)

Matthias Andriessen
Matthias Andriessen

Reputation: 13

I would suggest to use .outerHeight(), since .height() doesn't look at the padding of an element.

var div = $("div").outerHeight();
var win = $(window).height();

if (div > win ) {
    $("div").addClass('red');
}

Upvotes: 1

Eran Goldin
Eran Goldin

Reputation: 979

For an element that has a scroll height that's different than the document's scroll height, you can use element.getBoundingClientRect().height (Docs).

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

The document's contains all the elements within itself, and its height is a sum of the heights of all those elements (all the display:block elements anyway, plus margin and padding); therefore no contained element can be taller than the document itself. What you need to do is compare the window's height, not the document's:

var div = $("div").height();
var win = $(window).height();

if (div > win ) {
    $("div").addClass('red');
}

JS Fiddle demo.

Upvotes: 22

Related Questions