CODEWITHSUNDEEP
javascriptjquerywordpressjquery-isotope
Ishio
Ishio

Reputation: 765

Weird Isotope.js Animation when filtering

When I am setting up this filter and using it, the functionality works except for one thing. There is a weird animation during the filter process.

In my codepen the code works great. Copied and pasted with the same JS version and the same build version.

In my website it does not work. Now I've gone through and disabled all plugins and every script that is being called besides my code, which was placed in an isolated .js file, and the CSS files.

I am not sure what exactly the issue is anymore and can't figure out how to isolate the issue further to identify the problem.

I am running the website on WordPress, version 4.7.5

Below is my javascript. It's the only thing I am calling.

(function($){
  'use strict';

    var grid = jQuery('.masonry').isotope(),
        $win = jQuery(window);

    jQuery('.filter span a').click(function(){
    jQuery( this ).parents( 'div.filter' ).find( 'span a' ).removeClass( 'active' );
    jQuery( this ).addClass( 'active' );

    grid.isotope({
      filter: jQuery(this).attr('data-filter'),
      layoutMode: 'fitRows',
    })
  });
});

Upvotes: 0

Views: 781

Answers (2)

Christina
Christina

Reputation: 34652

Remove the <link rel='stylesheet' id='isotope-style-css' ...> CSS.

Unless you specify that you are only using CSS (see animationEngine in the Metafizzy docs) then it's going to load both the jQuery animation and the CSS -- causing the weirdness. You can test out this fact by checking out your CodePen duplicated here with the weirdness because I added the CSS: http://codepen.io/carasmo/pen/KmrPRb

Upvotes: 2

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You have an error in console: «Uncaught TypeError: Cannot read property 'firstChild' of null».

This is because you try to initiate a Google Map on an inexistant element #map-canvas.

To fix that... What I would do is to remove lines #881 to #1183, which is your Google Map API initialisation script, from the script.js.

I would place this in a map.js which I would call only on the page(s) where there actually is an element with id map-canvas.

For now, this error just halts the loading of script.js.
So the document.ready() function isn't closed properly.

You used (function($){ which is the same as document.ready() on line #209.

Upvotes: 0

Related Questions