CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressjquery-isotope
Tovly Deutsch
Tovly Deutsch

Reputation: 663

Isotope Items are jumping

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/

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

        }
    });

Upvotes: 2

Views: 3376

Answers (3)

Tovly Deutsch
Tovly Deutsch

Reputation: 663

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/

Upvotes: 6

user773328
user773328

Reputation: 333

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.

Upvotes: 0

Fatih SARI
Fatih SARI

Reputation: 433

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

Upvotes: 0

Related Questions