Question

Any advice how to access an internal method var of jQuery Masony?
I’m looking to console.log the containerSize property inside the layout method:

line 177 > query.masonry.js

I need to retrieve the containerSize after masonry init:

$('#container').masonry({
  itemSelector: '.box'
});

console.log("here i need to retrieve the containerSize");

Answer 1

Unfortunately it’s impossible without rewriting the code or using a debugger to access values in variables from outside their scope at run time.

If you read the jQuery masonry source code, the containerSize gets pushed into an object data member called “styleQueue”. Unfortunately this is subsequently processed and emptied, which makes it pointless to try and access data from this member.

If you have a look in http://jsfiddle.net/5hgsm/1/ you will see that there is a lot of useful information in masonry’s data. Using a decent web-inspector such as Google Chrome’s, you can explore the data object to view all the child elements. You will more than likely find something in there that you can derive containerSize from.

However instead of trying to calculate containerSize from more abstract data, you could try just getting the width of the container directly and setting it after the resize animation completes.

This can be achieved by adding the “complete” callback to the animationOptions, as follows:

$('#container').masonry({      
    isAnimated: true,      
    itemSelector: '.box',      
    columnWidth: 102,      
    gutterWidth: 0,      
    isFitWidth: true,      
    isResizable: true,      
    animationOptions: {        
        duration: 400,        
        easing: 'swing',        
        queue: false, 
        // Add complete callback here:
        complete: function() {
            // Resize site header, do other stuff if you want
            $('#site-header').width($('#container').outerWidth());
        }  
    }    
});

This avoids the need to alter third party plugins, or calculate widths yourself from other data.