Hoe werkt deze method en hoe kan ik hem callen met .click?

[TijmenK]

Ik wil een card interface maken op basis van Packery JS. Dit is mijn eerste project na het afronden van de Codecadamy courses, dus heel soepel is het allemaal niet gegaan. Ik heb het overgrote deel nu uitgevogeld maar loop vast op het laatste stuk: het verschuiven van de kaarten adhv een navigatie menu'tje.

Dit probeer ik te doen met de fit method van Packery, hiermee kan je de items verplaatsen als je er op klikt. Ik probeer dat nu om te schrijven naar dat de items verplaatsen als ik op een ding met een bepaalde id klik.

Hiermee verschuiven de items als je er op klikt:

JavaScript:

$container.on( 'click', '.item', function( event ) {
  $container.packery( 'fit', event.target, 200, 0 );
});

Codepen Example

Ik stel mij zo voor dat de code om dit aan te roepen als je ergens anders op klikt er zo uit ziet:

JavaScript:

$container.on( 'click', '#vision-button', function( event ) {
    $container.packery( 'fit', '#vision', 200, 0 );
  });

Maar dan net anders. Dus nu mijn vraag, hoe anders?

Om het allemaal een beetje in een context te kunnen plaatsen heb ik mijn hele zooitje op Codepen gezet.

Bij voorbaat dank.

[TijmenK]

Opgelost, kennelijk moet de functie een DOM-element targetten, dus:

JavaScript:

$("#vision-button").click(function() {
    $container.packery( 'fit', $('#vision')[0], 200, 0 );    
 });

werkt wel.

Ik gebruik nu javascripts getElementById, dat werkt makkelijker met een var.

JavaScript:

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

En dat werkt dan zo:

http://codepen.io/Tijmen/full/ragOKa/