CODEWITHSUNDEEP
javascriptjqueryfirefoxdomscroll
jcjcjcjc
jcjcjcjc

Reputation: 273

Why doesn't $(window).height() and $(document).height() equivalency work well in Firefox?

I'm using Tumblr's API to make a feed of of the photographs I post to Tumblr. My idea is to have an infinite scroll functionality that loads sets of 20 images.

The initial 20 images are loaded fine. Here's my code for loading subsequent sets of images:

var o = 0;

$(window).scroll(function () {
    if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        o += 20;
        $.ajax({
            url: 'http://api.tumblr.com/v2/blog/howwesabah.tumblr.com/posts?api_key=PtoHvq51kOdQlzU6YclOfGOlTuwfm5Chf1cScFnFNhbHxWMDWH&offset=' + o,
            dataType: 'jsonp',
            success: function (results) {
                console.log(results);

                for (j = 0; j <= 19; j++) {
                    var photourl = results.response.posts[j].photos[0].alt_sizes[3].url;
                    var photolink = results.response.posts[j].short_url;
                    $('#tumblr #container').append('<div class="item"><img src="' + photourl + '"/></div>');
                }

            }
        });
    }
});

This all works no problem in Chrome/Safari/Opera and even IE. However, Firefox just doesn't seem to want to load the images when I scroll to the bottom of the document. I've already read on here that sometimes there's a 1px difference between Firefox and other browsers, however that didn't seem to solve the problem.

I know this is a specific questions and so against Stackoverflow norms, so I guess my general question (while keeping in mind my own issue) is what's going in with Firefox and the equivalency of $(window).height() and $(document).height()?

Upvotes: 0

Views: 2897

Answers (1)

apaul
apaul

Reputation: 16170

$(window).height(); will return the height of the visible window.

$(document).height(); will return the height of the entire document, not just the visible part.

Working Example

That said, I don't think your specific issue is with the if statement...
I tested it and it seems to work equally well in Firefox, Chrome, and IE9.

Working Example 2

$(window).scroll(function () {
    if ($(window).scrollTop() +1 >= $(document).height() - $(window).height()) {
        $('body').css('background','red');
    }else{
        $('body').css('background','none');
    }
});

Upvotes: 1

Related Questions