- This topic is empty.
September 29, 2011 at 8:07 pm #34578neuewaveMember
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 #88939ivancruzMember
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 #102186peterkMember
@ivancruz, that was a huge help and exactly what I needed. Worked perfectly, thanks a lot! – PeterJuly 13, 2012 at 2:57 am #106021JarainMember
I tried this , but it doesn’t work in IE8July 13, 2012 at 3:17 am #106023JarainMember
Ah.. Because “,” in the endOctober 20, 2012 at 9:18 am #112299hannah2012Member
> 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 #112312TheDocMember
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 #112331hannah2012Member
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 #112489amyth91Participant
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
your script here…….
your script here………
this makes sure, that your scripts for that bit run only after everything (images) has successfully loadedNovember 8, 2012 at 5:22 am #113629Historical Forums UserParticipant
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 youDecember 16, 2012 at 5:48 pm #117725alicehumphriesParticipant
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 ?January 1, 2013 at 12:45 pm #119558CourtneyLaneMember
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 #119560Andy HowellsParticipant
@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 #119593CourtneyLaneMember
@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 #119596Andy HowellsParticipant
@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](https://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-)