Isotope Items are jumping

3 Views

I’m creating a portfolio website using wordpress and isotope. For some reason each time the isotope items are sorted they do a jarring jump afterwards. Here is a jsfiddle demonstrating the problem:

http://jsfiddle.net/tovly/8k6hyyzL/

Read More

Here is a video demonstrating the problem:

https://drive.google.com/file/d/0B5OxMCWiLhrMcmZUYm56YkFzdGs/view?usp=sharing

The issue only occurs the first time each tile is sorted.
How can I stop this from happening?
These are my isotope settings: 

$container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });
Post Views: 3

Related posts

Leave a Reply

3 comments

  1. I’ve solved my problem by simply removing the transform transition that I added to the isotope items. I also removed the “!important” from that transition. The transitions I added (hover transitions) seem to now be working nicely with the isotope added transitions.

    Old non working code:

    .isotope-item {
    transition: transform 0.5s, opacity 0.5s, background-color 0.25s linear, 
    border-color 0.25s linear !important;
}

    New working code:

    .isotope-item {
    /*I removed "transform 0.5s" and "!important"*/
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}

    I created a stripped down jsfiddle to help me solve the problem more easily. The fixed line is line 10.

    https://jsfiddle.net/tovly/w0avjdx9/

  2. First, this problem not interest with WordPress. This is jQuery issue. You add twice isotope code. Delete first additional. So edit your file:

    jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts

    // (!) deleting start from here
    $container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });
    // (!) deleting end of here

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    if("onhashchange" in window) {
    // ... continue

  3. I know this doesn’t answer your question, but-
    If you remove all the css on the original js fiddle you posted and change the isotope instantiation to remove the masonry, using fitRows instead, then there is no jumping.

    $container.isotope({ 
    itemSelector : '.item', 
    layoutMode : 'fitRows'
});

    This might mean the css you are using and the combination of masonry settings aren’t working well together.

    It is hard to read what is going on because there is a lot of extra html and css and the indentation of the javascript is not consistent. If you clean it up and post only the parts essential to filtering, I can take a better look.