SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Infinite Scroll and Masonry Javascript conflict in Tumblr

    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:
    HTML Code:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again..

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

    So frustrating.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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/discuss...g-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=infin...masonry+tumblr


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •