I recently worked on a project where the wonderful jQuery Isotope plugin was needed to sporadically reposition items for depending on the height of the browser and the size of each item being positioned (in my case, unordered list items). Everything was going well, looking great in Firefox and surprisingly IE until I had a look in Google Chrome.
Basically what was happening is that some of the items are being stacked on top of each other and looked completely broken, sometimes several of these items would stack. The fix? Well after much trial and error the following code in the main JS script on the site within a DOM ready call was all that was needed. The issue is due to the fact that Isotope applies before everything has loaded, so waiting for the page to load before applying fixes the issue in Chrome and any other browser.
<script type="text/javascript">
$(document).ready(function(){
// Isotope messes up in Chrome because it initiates before everything has loaded
// This ensures everything has loaded before applying
$(window).load(function() {
$("theselector isotope is on").isotope('reLayout');
});
});
</script>
The reason this was happening is because I was resizing the WordPress post items list is because I wanted it to take into account different browser resolutions, the reasons it’s not working for you might be different but the above fix might work for you too. Let me know if it does.
It works, the layout is corrupted, because if the image is not fully loaded by Chrome. I think it should have a better way. Now hard to estimate how long that Chrome loaded all images.
Thanks you, it work perfect!
Thanks a bunch… this is just what I needed!
in isotope v2 use
$(“theselector isotope is on”).isotope(‘layout’);
Works like a charm. Thanks.
Helped me a ton – thank you so much!
Thanks,
Adding
$(document).ready(function(){
});
solved it for me