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:

/

Here is a video demonstrating the problem:

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

        }
    });

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/tovly/8k6hyyzL/

Here is a video demonstrating the problem:

https://drive.google./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

        }
    });

• javascript
• jquery
• html
• wordpress
• jquery-isotope

Share Improve this question Follow edited Jan 29, 2015 at 3:15 Tovly Deutsch asked Jan 2, 2015 at 21:07 Tovly DeutschTovly Deutsch 6631010 silver badges3131 bronze badges 2

• A jsfiddle would of been greater use than a video. – Kiee Commented Jan 2, 2015 at 21:08
• Thanks for the advice. I've added a jsfiddle to further illustrate the problem. – Tovly Deutsch Commented Jan 2, 2015 at 22:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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/tovly/w0avjdx9/

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

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 bination 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.