1

I'm trying to add some css to an element if the height of the document is taller than the viewport.

var docH = $(document).height(),
    viewPortH = $(window).height();

    console.log(docH);
    console.log(viewPortH);

if (docH > viewPortH) {
    $('.slick-slide img').css('max-width', '90%');
}

However, console.log() outputs both docH and viewPortH as 733 which is not the case.

I have the html set to height: 100% and the body set to min-height: 100%. Is there anything I missed?

I looked over some of the other similar questions here and I seemed to have done everything correctly.

J82
  • 8,267
  • 23
  • 58
  • 87
  • Strange... I can see no reason why your code wouldn't work. I get the expected values. Can you replicate the problem on jsfiddle? – Jivings Feb 05 '15 at 08:22
  • this code works for me, does your content cause a scroll bar? look at this example: http://jsfiddle.net/wz4jsLcx/embedded/result/ – BrendanMullins Feb 05 '15 at 08:26
  • Maybe check if $(window).height() is bigger than window.screen.availHeight ? – David Snabel Feb 05 '15 at 08:27
  • possible duplicate of [Execute function if document is taller than viewport](http://stackoverflow.com/questions/14231568/execute-function-if-document-is-taller-than-viewport) – Alex Feb 05 '15 at 08:37

2 Answers2

0

I'm not sure if this is a solution for your problem but may be you could check if the windows has a scrollbar with: $('#divId').hasScrollBar(); if true than and/modify the css

or 

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

to get the highest part of the document

Community
  • 1
  • 1
Thomas Baumann
  • 111
  • 1
  • 7
  • I tried this but strangely the numbers are still coming out the same. Here's the [live site](http://keebs.com/dax/). You can see that in the console, the numbers come up the same. – J82 Feb 05 '15 at 08:49
0

Your code actually seems fine, it should work as expected. Can you make a jsfiddle?

However, have a try with this:

var docH = parseInt( $('body').prop('scrollHeight') ),

Alex
  • 9,911
  • 5
  • 33
  • 52
  • I can't make a fiddle because in the fiddle it works lol. I can give you the [live site](http://keebs.com/dax/), though, if that helps. You can see that in the console, the numbers come up the same. – J82 Feb 05 '15 at 08:50
  • I see, but `var docH = parseInt( $('body').prop('scrollHeight') ),` should work – Alex Feb 05 '15 at 08:52
  • I forgot to mention but I tried that and it didn't work either. The numbers still came up the same. This is really hurting my brain. Thanks for your help and trying anyway. – J82 Feb 05 '15 at 08:59
  • 1
    maybe youre doing this during the wrong event. put this code in a `$(window).load()` event – Alex Feb 05 '15 at 09:16