Wordpress Contact Form 7 Conflicting with my jQuery code

Question

I've installed this plugin on my Wordpress site, however it immediately conflicts with my custom javascript.

I'm aware of the work around in which you disable AJAX within the plugin and I'm also aware of the work around in which you make the Contact form 7 JS load on a specific page. However, both of these are not viable. I need the plugin and my own JS to work together.

The error I'm getting in console (once the plugin is activated and my own JS has stopped working) is:

Uncaught TypeError: Object [object Object] has no method 'isotope' main.js:17

Line 17:

    var $container = $('.gallery');
$container.isotope({
    resizable: false, // disable normal resizing

    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

Thanks

Answer 1

Fixed. It was definitely a jQuery conflict.

I opened my custom JS file and changed the document ready from $ to jQuery. I then changed every single instance of $ to jQuery within the file and everything is now working smoothly.

Answer 2

This may be a DOM timing issue, have you tried wrapping this code in a doc-ready block like so?

$(function() {
    var $container = $('.gallery');
    $container.isotope({
        resizable: false, // disable normal resizing

        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
});