Why doesn't my packery code execute?

Question

I've added packery to my dev site to play around with a new layout - it works great and so I've rolled the same code out to production. For some reason, it doesn't execute via my prod instance. My initial thought is its a code ordering problem when I run my pre-compile.

Here is my dev instance showing the working code. Here is my prod instance where the code doesn't seem to initialize.

Here is my CSS:

/* Packery */

.item-content {
  border-color: hsla(0, 0%, 100%, 0.4);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

.item.is-expanded {
  z-index: 2;
}

My jquery:

//Packery

var $container = $('.packery').packery();

  $container.on( 'click', '.item', function( event ) {
    var $item = $( event.currentTarget );
    var isExpanded = $item.hasClass('is-expanded');
    $item.toggleClass('is-expanded');
    if ( isExpanded ) {
  // if shrinking, just layout
  $container.packery();
    } else {
      // if expanding, fit it
      $container.packery( 'fit', event.currentTarget );
    }
  });

I'm currently not using the click feature yet but plan to in the future so it remains in the code.

And my html:

<div id="container" class="packery">
    <%= render partial: 'shared/show_projects', collection: @projects %>
</div>

partial:

<div class="item capsule span6">
  <p>
    <div class="row">
      <div class="span4">
            SNIP!
      </div>
    </div>
  </p>
</div>

Could it be that when my pre-compile runs that my jquery is inserted above the packery.js and so it doesn't initialize as intended?

Answer 1

I ran some more tests and determined that the packery code was working as intended - if I clicked on a I would see the new class appended meaning packery was working as intended.

I took a closer look at my HTML and my problem was I had defined the within a "container-narrow", hence packery wouldn't extend to fill the white space.

Removed the "container-narrow" limitation - Problem solved!