Infinite Scroll and Masonry Javascript conflict in Tumblr

JavaScript
1

Hi there,

I am having a bit of a problem with a tumblr theme I am using at the minute that uses both Infinite Scrolling and Masonry.
I am using the Tumblr theme “Disassemble 3.0”.

As you can see here www.ellekorhalillerweb.tumblr.com when you begin to scroll to the bottom of the page and the infinate scroll takes place, my images are becoming completely muddled and overlapped which leads me to thinking that the two scripts are conflicting.

To be honest, I really am a novice when it comes to Javascript and Jquery and am more confident in CSS and HTML so I can’t say I understand a great deal.

The way I have it called up is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>

<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
	});
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

Any help would be much appreciated!

2

Hi there,
You’re pulling in jQuery twice (the first two lines of the above code).
Try deleting the older version (1.4.2) and see if that makes a difference.

3

Hello again…

Thanks for your advice.
I just tried that and it still doesn’t work.

So frustrating.

4

I’ve just been doing a bit of Googling and it seems that what you are experiencing could be a common problem.
It seems that the overlapping happens when the images haven’t been fully loaded and Masonry is already triggered.
According to this post you need to load the images before triggering masonry.
http://css-tricks.com/forums/discussion/13913/tumblr-masonry-infinite-scrolling-overlap-bug/

Also, you seem to be using the the Tumblr specific infinite scroll code (http://codysherman.com/tools/infinite-scrolling/code).
Try using the infinite scroll code from www.infinite-scroll.com and see if that makes a difference.

Other that that, Googling something like “infinite scroll masonry tumblr” gives you a load of hits that might help you more:
http://www.google.com/search?q=infinite+scroll+masonry+tumblr

5