• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

A jQuery Isotope And Google Chrome Bug Fix

General · December 11, 2011

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.

Dwayne

Leave a Reply Cancel reply

7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
dmhorse
dmhorse
10 years ago

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.

0
LaurentPerroteau
LaurentPerroteau
9 years ago

Thanks you, it work perfect!

0
Alec
Alec
7 years ago

Thanks a bunch… this is just what I needed!

0
Art2web Studio
Art2web Studio
6 years ago

in isotope v2 use

$(“theselector isotope is on”).isotope(‘layout’);

0
Ethel
Ethel
6 years ago

Works like a charm. Thanks.

0
james
james
4 years ago

Helped me a ton – thank you so much!

0
Adam Sessler
Adam Sessler
3 years ago

Thanks,

Adding
$(document).ready(function(){

});

solved it for me

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz