Search code examples
javascriptjqueryhtmlpackery

Using jQuery library Packery to make a card lay-out I can re-order with navigation links

I'm trying to use Packery's fit method to move a card to the front of the row when I click on its corresponding link a navigation menu. Going by the example on codepen this should be possible, but I can't figure it out.

This is what I have so far. Items are moved to the front when I click on them. And clicks on the card are passed on to the parent, so that works as well now. But I can't figure out how to use a click on a link to make a card move. There is some code in there, but it does not work. It registers the click, I've verified that with a console.log, but then it gives this error: 

cannot call methods on packery prior to initialization; attempted to call 'fit'

(The navigation card can be opened by clicking on the title, then clicking on "Vision" should move the vision card to the 0,0 position.)

What am I doing wrong?

Thanks in advance!

Solution

  • This did the trick:

    $("#navigation-list li").click(function() {
    var moveThis = this.id.replace('-button','');
    $container.packery( 'fit', document.getElementById(moveThis), 200, 0 );    
  });

    The method needs to be called on a DOM element, doesn't work with a jQuery selector. You could make it work by appending [0] to the selector, like this: $("#someId")[0].