Uncaught ReferenceError: Masonry is not defined

I’m woking on my portfolio and I’m using a wordpress theme called Gridly that uses masonry. I’m trying to make it so the posts align to the right rather than the left. I came across an option here that would allow me to do that by using “isOriginLeft”: false but now I just keep getting this error “Uncaught ReferenceError: Masonry is not defined” and I’m no closer to getting the posts to align right.

My portfolio is here: brittonhack.com/new/

Read More

jQuery is not my strong suit so ANY help would be greatly appreciated. Thanks!

Here’s the code that keeps producing the error.

// masonry code 
$(document).ready(function() {
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
  animationOptions: {
    duration: 400,
    easing: 'linear',
    queue: false
  }

  });
});


// hover code for index  templates
$(document).ready(function() {

        $('#post-area .image').hover(
            function() {
                $(this).stop().fadeTo(300, 0.8);
            },
            function() {
                $(this).fadeTo(300, 1.0);
            }
        );  


});


// comment form values
$(document).ready(function(){
    $("#comment-form input").focus(function () {
        var origval = $(this).val();    
        $(this).val("");    
        //console.log(origval);
        $("#comment-form input").blur(function () {
            if($(this).val().length === 0 ) {
                $(this).val(origval);   
                origval = null;
            }else{
                origval = null;
            };  
        });
    });
});


// clear text area
$('textarea.comment-input').focus(function() {
   $(this).val('');
});

var container = document.querySelector('#post-area');
var msnry = new Masonry( container, {
  itemSelector: '.post'
});

Related posts

Leave a Reply

1 comment

  1. You are initializing masonry already at the top of your document:

    $(document).ready(function() {
        $('#post-area').masonry({
            // options
            itemSelector : '.post',
            // options...
        isAnimated: true,
        animationOptions: {
            duration: 400,
            easing: 'linear',
            queue: false
        }
    
        });
    });
    

    And at the end you initialize again (without jQuery):

    var msnry = new Masonry( container, {
        itemSelector: '.post'
    });
    

    The second block is redundant and throws the error. Just delete it.