I'm getting an error for infinite scroll in my tumblr blog.
Uncaught SyntaxError: Unexpected token < jquery.infinitescroll.min.js:6
Uncaught TypeError: Object [object Object] has no method 'infinitescroll'
The thing is, I haven't changed the code at all. It worked fine before I accidentaly deleted all of the .js from my server. Now after I reuploaded the files, it doesn't want to work.
console.log(jQuery.infinitescroll);
returns "undefined".
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.gamepad.lt/tumblr/js/masonry.pkgd.min.js"></script>
<script src="http://www.gamepad.lt/tumblr/js/imagesloaded.pkgd.min.js"></script>
<script src="http://www.gamepad.lt/tumblr/js/jquery.infinitescroll.min.js"></script>
<script>
$(document).ready(function() {
console.log(jQuery.infinitescroll);
var clHolder = $('#loader-holder'),
clBubble = $('#bubble'),
clX = 0, clY = 0, clD = 0,
clEngaged = true, clInterval;
function clFunc(){
clX = Math.round(37 + Math.cos(clD * Math.PI / 180) * 53);
clY = Math.round(37 + Math.sin(clD * Math.PI / 180) * 53);
clBubble.css({'top' : clY, 'left' : clX});
clD = clD + 10;
if(clD >= 360){clD = 0;}
}
if(clEngaged){clInterval = setInterval(function(){clFunc();}, 30);}
setTimeout(function () {
clearInterval(clInterval);
clEngaged = false;
$('#posts').animate({opacity : 1}, 1000);
}, 5000);
var $container = $('#posts');
var $logo = $('<li class="post logo"><h1><a href="/"><img id="header" src="http://static.tumblr.com/pgmq7uc/5Y1mt16m1/kawaiiandecchi.png"/></a></h1></li>');
$container.prepend($logo);
$container.imagesLoaded(function(){
$container.masonry({
columnWidth: '.post',
"gutter": 10,
transitionDuration: 0,
itemSelector: '.post'
});
clEngaged = false;
clHolder.animate({opacity : 0}, 1000, function(){
clearInterval(clInterval);
});
$('#posts').animate({opacity : 1}, 1000);
});
$("#backToTop").click(function(){
$("body").animate({scrollTop: '0'},500);
});
$container.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
animate : false,
itemSelector : '.post',
donetext : $container.prepend($logo),
bufferPx : 50,
loading: {
finishedMsg: ''
}
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.css({opacity : 0});
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, false );
$newElems.css({opacity : 1});
});
}
);
$('#infscr-loading').remove();
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
var lis = ul.getElementsByTagName("LI");
var vals = [];
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if(sortDescending)
vals.reverse();
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
$('#menu').animate({opacity : 1}, 1000);
}
sortUnorderedList("menu", false);
});
</script>
You are missing infinite scroll plugin.
You do include it in your header:
<script src="http://www.gamepad.lt/tumblr/js/jquery.infinitescroll.min.js"></script>
However this link does not contain the jQuery code for the plugin (!):
http://www.gamepad.lt/tumblr/js/jquery.infinitescroll.min.js
Update the file with the code for infinite scroll plugin.