CODEWITHSUNDEEP
jqueryinfinite-scroll
chloe784
chloe784

Reputation: 609

infinite scroll on contained tumblr theme not working?

I am using masonry with paul irish's infinite scroll but the infinite scroll wont kick in. I am developing a 'contained' tumblr theme.

I think it is something to do with it not reaching the bottom because if I open inspect element and the page squishes a bit vertically, and then scroll, infinite scrolling kicks it.

So is there a way to make the infinite scrolling trigger before the bottom of that page?

Here is the relevant code:

(function () {
    var $tumblelog = $('#tumblrcontent');
    $tumblelog.infinitescroll({
        navSelector: ".pagination",
        nextSelector: ".pagination a:last-child",
        itemSelector: "article",
        loading: {
            finishedMsg: "<p> </p>",
            img : "http://i58.tinypic.com/34huesh.gif",
            msg: null,
            msgText: "<p> </p>"
        },
    },

    function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $tumblelog.masonry('appended', $newElems);
        });
    });
    $tumblelog.imagesLoaded(function () {
        $tumblelog.masonry({
            columnWidth: function (containerWidth) {
                return containerWidth / 100;
            }
        });
    });
})();

Upvotes: 0

Views: 1902

Answers (2)

chloe784
chloe784

Reputation: 609

Solved it. I found in the github page an option for using infinite scroll with elements that have overflow:auto;. Just a matter of reading the documentation properly.

Upvotes: 1

Macsupport
Macsupport

Reputation: 5444

You are loading 3 different versions of jQuery, all outdated. You need to load only one version.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">    </script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">   </script>
<!--//////////End Tooltips/////-->
<!--//////////Masonry////////////-->
<!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>

ADDENDUM

Your jquery.style-my-tooltips.js is too old (over 3 years) to be compatible with jQuery 1.11.3 so you will need to use an older version of jQuery. Incidently, your page has a tremendous number of errors related to dontbrag.tumblr.com as well.

You should also call masonry before infinitescroll, like this:

(function () {
 var $tumblelog = $('#tumblrcontent');
 $tumblelog.imagesLoaded(function () {
    $tumblelog.masonry({
        columnWidth: function (containerWidth) {
            return containerWidth / 100;
        }
    });
});

$tumblelog.infinitescroll({
    navSelector: ".pagination",
    nextSelector: ".pagination a:last-child",
    itemSelector: "article",
    loading: {
        finishedMsg: "<p> </p>",
        img : "http://i58.tinypic.com/34huesh.gif",
        msg: null,
        msgText: "<p> </p>"
    },
},

function (newElements) {
    var $newElems = $(newElements).css({
        opacity: 0
    });
    $newElems.imagesLoaded(function () {
        $newElems.animate({
            opacity: 1
        });
        $tumblelog.masonry('appended', $newElems);
    });
});

})();

Upvotes: 1

Related Questions