Grow your CSS skills. Land your dream job.

[Tumblr] Masonry + Infinite scrolling ‘overlap’ bug

  • # September 29, 2011 at 8:07 pm

    I have successfully integrated masonry with infinite scroll but sometimes the posts overlap and don’t “re-shuffle” and find their place, they just stay overlapped so a lot of posts get hidden.

    You can see what I am talking about on my blog http://www.neuewave.tumblr.com

    Sometimes refreshing or simply scrolling more slowly can stop the problem happening so often but I would like to permanently fix it, can anybody help me out here?

    Note: I did not write any of the script for masonry or infinite scroll, I found resources online and had friends help me so try and keep that in mind when explaining things. Think “Layman’s terms” haha.

    # October 12, 2011 at 5:12 am

    Hey mate I figured this one out just today. The overlapping happens when the images haven’t been loaded and masonry is triggered, you need to load the images before triggering masonry.

    I am using the imagesLoaded script from here: https://github.com/desandro/imagesloaded

    Just load it on your header the same way you would any other js script then use the script as follow to load both masonry and Infinite scroll.

    make sure you modify the script with your theme’s #content, itemSelector, navSelector, nextSelector and itemSelector.

    # May 2, 2012 at 7:58 pm

    @ivancruz, that was a huge help and exactly what I needed. Worked perfectly, thanks a lot! – Peter

    # July 13, 2012 at 2:57 am

    I tried this , but it doesn’t work in IE8

    # July 13, 2012 at 3:17 am

    Ah.. Because “,” in the end

    # October 20, 2012 at 9:18 am

    > make sure you modify the script with your theme’s #content, itemSelector, navSelector, nextSelector and itemSelector.

    Sorry, but how do I find what they are in the code?

    # October 20, 2012 at 1:02 pm

    When you customize your theme and click on Edit HTML you’ll be able see all of your theme’s code.

    If you post a link to your site I’m sure somebody will be able to point you in a right direction.

    # October 21, 2012 at 1:35 am

    Oh thanks, the link is: http://phony-false-frail.tumblr.com/
    I’ve looked through the code, but I’m not sure where to look for what the selectors are called. I only have a very basic knowledge of coding :/

    # October 23, 2012 at 7:58 pm

    following @ivancruz‘s post,

    i’ve had problems with slider and other scripts which uses images, and because it takes time to load the image, the script fails, as it is triggered before the image has loaded.

    a simple solution to that is to use

    jQuery(window).load(function(){

    your script here…….

    })

    instead of

    jQuery(document).ready(function(){

    your script here………

    })

    this makes sure, that your scripts for that bit run only after everything (images) has successfully loaded

    # November 8, 2012 at 5:22 am

    Hi guys, I don’t know if any of you are active any more but I need help. I have no idea what I am doing, I have the same issue as Neue Wave, here’s my blog; http://oluaidh.tumblr.com/

    The posts are fine until a bit further down where they just overlay and no more posts are loaded. I’ve gone onto that link http://desandro.github.com/ but there are just loads of files that you can select and some are really long, i’m not sure what to use. I don’t know where to put both of them (the desandro html and the one that ivancruz put up) in my HTML either.

    Please help, thank you

    # December 16, 2012 at 5:48 pm

    I’ve posted the long script in both my description and HTML (I’m unsure of where to put it) and it still hasn’t worked. I’ve changed my theme 100 times and they still over lap. I’m still unsure of what to do. Can someone help me please ?

    http://onthejellicoeroad.tumblr.com/

    # January 1, 2013 at 12:45 pm

    I have this same problem. I’m just not sure how to modify the script. Could someone help me? My blog is http://trois-petits-mots.tumblr.com/

    # January 1, 2013 at 12:55 pm

    @courtneylane – They resolved the initial issue using the information on the plugin site: [Unloaded Media Overlapping – JQuery Masonry](http://masonry.desandro.com/docs/help.html#unloaded_media_and_overlapping)

    # January 1, 2013 at 8:27 pm

    @andy_unleash Thank you but, I’m new to all this coding stuff so I’m not exactly sure what to do. If I give you my html, would you be able to add the right stuff?

    # January 1, 2013 at 8:59 pm

    @Courtneylane – Sure, I charge £50/hour for front end development.

    **Alternatively**, give it a whirl, see how you get on – web development is all about making mistakes and problem solving.

    Have a play around with the recommendations and details on the link I gave you – experimentation is the key to victory, just make sure to backup.

    If you try, and fail, come back on here and let us know a specific problem you’re running into with the solution.

    You can also make a [codepen](http://Codepen.io) with a stripped down version of what code you’re using.

    I made a handy guide on how to CodePen earlier if you’re unsure – [you can view it here](http://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-)

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".