Joomla 3.2 breaking masonry function

Question

I setup a website running on Joomla 3.1 and I am using a masonry script that works perfectly:

    // Masonry for boxes
    function adjustments() {
        $('#position-2').masonry({
            singleMode: false,
            columnWidth: 272,
            resizeable: true,
            itemSelector: '.newsflash-item',
             isAnimated: true
        });
    }

I am first loading the JS file jquery.masonry.min.js found on masonry.desandro.com as well as the latest jquery.min.js file from the JQuery repository.

This has been working perfectly until I installed the latest update to Joomla, upgrading it from 3.1 to 3.2. Now, the masonry function will not work regardless of how I try to call it or position the JS files. I only get this error:

Uncaught TypeError: Cannot call method 'masonry' of null

At this point, like the tree said to the lumberjack, I'm stumped. Anyone else having this issue and/or have any ideas how to fix it?

Answer 1

The Joomla 3.2 release updated some jQuery elements, removed more MooTools dependencies and saw the introduction of com_ajax so you probably experiencing a conflict.

More specifically, you are probably experiencing a JQuery conflict and need to use noconflict() you can read how to adapt your script to use jQuery in noconflict() mode here

Something as simple as this may work:

// Masonry for boxes
function adjustments() {
    var $j = jQuery.noConflict();
    $j('#position-2').masonry({
        singleMode: false,
        columnWidth: 272,
        resizeable: true,
        itemSelector: '.newsflash-item',
         isAnimated: true
    });
}

Answer 2

Similar to cppl's answer with specifing you want to basically ensure you're using JQuery for your script, you can do this:

function adjustments() {
        JQuery('#position-2').masonry({
            singleMode: false,
            columnWidth: 272,
            resizeable: true,
            itemSelector: '.newsflash-item',
             isAnimated: true
        });
    }

This ensures the JS selection is done with jQuery and not with Mootools or any other JS.