detect scroll to bottom on dynamic page

Question

I intend to load extra content on scroll to bottom in a div, but have been so far unable to make the jquery detect scroll to bottom. I know there are many questions here asking the same.. but none of the solutions have worked for me. I clearly have been doing something wrong, but being new at this can't figure out what. here is the code:

<html>
<head>

<script src="jquery-1.10.1.min.js">
</script>

<script>
$(document).ready(function(){
    var n1=0;
    var n2=5;
    var $win = $(window);   
    $("#page").change(function(){
        var str=$(this).val()

        console.log(str);
        if(str.length===0){$("#rssoutput").html("");}
        else
        {$("#rssOutput").load("http://dodomain.uni.me/getrss.php?q="+str+"&n1="+n1+"&n2="+n2);}

    });
    $(window).scroll(function() {
        if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight )
        { 

            alert("bottom of the page.");
        }


    });

});

</script>


</head>
<body>

<form>
<select id="page">
<option value="">Select an RSS-feed:</option>
<option value="Google">Google News</option>
<option value="cyanide">cyanide and happiness</option>
<option value="oglaf">Oglaf</option>
<option value="xkcd">xkcd</option>
<option value="wired">wired.com</option>
</select>
</form>
<br>
<div id="rssOutput" >RSS-feed will be listed here...</div>
</body>
</html>

I probably provided more code than needed.. but I'm unsure if the problem is elsewhere. The php just sends generates some html off rss feeds . Its online here http://dodomain.uni.me/rss.html

Edit: the code works when the contents of the div is static (ie not loaded via ajax) as demonstrated here http://jsfiddle.net/jkh5P/

score 0 · Answer 1 · answered Jun 19 '13 at 16:29

0

This code does work for me - I just pulled out the $(window).scroll(~~~~), and plugged it into the Chrome console and it all worked alright for me. I also took all you posted, and opened it as an HTML file. Seems to work as intended with one caveat:

If the document is not scrollable (fits within the window), scroll is/will never be called For that, I would say strip your $(window).scroll(THIS STUFF) into a new function, and also call it during your $(document).ready event.

answered Jun 19 '13 at 16:29

Ledivin

637
5
18

thats strange.. since it doesn't work here. and it isn't working on http://dodomain.uni.me/rss.html as well. I see your point about the non scrollable document. I'll do something about that. – thekindlyone Jun 19 '13 at 16:44
I tried it in FF and Safari and it works, as well - only fails in IE. Not sure what the problem is, then - sorry! – Ledivin Jun 19 '13 at 19:15
I found the problem.. but still nowhere close to the solution. You see document height and window height are coming the same everytime.. ie what they were before ajax load. I can't figure out how to get new values. – thekindlyone Jun 20 '13 at 18:02
@thekindlyone if in case, you are loading more content when scroll to the bottom of the page then the caveat mentioned by Ledivin would not matter. I am guessing that is how you want it to work. – Kaushik Thirthappa Jun 21 '13 at 14:21
@ktkaushik what Ledivin means is that if I load some number of items of a feed and it doesn't exceed the height and therefore no scrollbar is formed, then i wont be able to scroll down to load older items from that feed. His point stands. – thekindlyone Jun 21 '13 at 15:47

score 0 · Accepted Answer · answered Jun 21 '13 at 15:44

0

The problem was that browsers return same values for window height and document height unless a doctype is mentioned in the html . Adding <!DOCTYPE html> to the html solved the problem. This is why it was working in jsfiddle etc and not on my site.

answered Jun 21 '13 at 15:44

thekindlyone

509
1
6
21

detect scroll to bottom on dynamic page

2 Answers2

Linked