javascript execute function when scroll at bottom

Question

I have a piece of JS code where i just have to connect the pieces together to make it work. My js code will load more content,fetched from database.Until now it is working just fine,when a user clicks a link,will load more.

Now i want to make it automatically load when the page is near the end. My code:

Load more function

function myFunction() {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            $("load_more"); < ---- ** HOW DO I CALL THE LOAD FUNCTION ?**
    }
    });

    $(function () {
        $(document).on("click", ".load_more", function () {
            var last_msg_id = $(this).attr("id");
            var device =<? php echo $idevice; ?>;
            if (last_msg_id != 'end') {
                $.ajax({//Make the Ajax Request
                    type: "POST",
                    url: "index_more.php",
                    data: "lastmsg=" + last_msg_id + "&aa=" + device,
                    beforeSend: function () {
                        $('a.load_more').html('<img src="img/loading.gif" />');
                    },
                    success: function (html) {
                        $("#more").remove();
                        $("ol#updates").append(html);
                    }
                });

            }
            return false;
        });
    });

So,my question is how do i call the "load_more" function from $(window).scroll?

Thanks!

you do not need to wrap $(window).scroll(function () inside function... — Dipesh Parmar
– Dipesh Parmar, Commented Sep 27, 2013 at 7:56

Ashis Kumar · Accepted Answer · 2013-09-27 08:03:16Z

3

Just trigger the click upon the button,

$(window).scroll(function () {
   if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 10)) {
      $(".load_more").trigger('click'); 
   }
});

So some modification also needed,

$(function() {

    $(window).scroll(function () {
       if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 10)) {
          $(".load_more").trigger('click'); 
       }
    });

    $(document).on("click",".load_more",function() {
        var last_msg_id = $(this).attr("id");
        var device=<?php echo $idevice; ?>;
        if(last_msg_id!='end'){
            $.ajax({//Make the Ajax Request
                type: "POST",
                url: "index_more.php",
                data: "lastmsg="+ last_msg_id+"&aa="+device,
                beforeSend:  function() {
                    $('a.load_more').html('<img src="img/loading.gif" />');
                },
                success: function(html){
                    $("#more").remove();
                    $("ol#updates").append(html);
                }
            });

        }
        return false;
    });
});

Hope this meets the requirement.

edited Sep 27, 2013 at 8:03

answered Sep 27, 2013 at 7:57

Ashis Kumar

6,5542 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Theodoros80 Over a year ago

perfect,it did the job! Thank you.

Collectives™ on Stack Overflow

javascript execute function when scroll at bottom

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related