Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

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

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0Henk 'm!

  • TijmenK
  • Registratie: mei 2011
  • Laatst online: 28-03 15:47

TijmenK

hun ≠ hen ≠ zij

Topicstarter
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:
1
2
3
$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:
1
2
3
$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. :>

http://www.youtube.com/watch?v=CYHGh6lmSbo


  • TijmenK
  • Registratie: mei 2011
  • Laatst online: 28-03 15:47

TijmenK

hun ≠ hen ≠ zij

Topicstarter
Opgelost, kennelijk moet de functie een DOM-element targetten, dus:
JavaScript:
1
2
3
$("#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:
1
2
3
4
$("#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/

http://www.youtube.com/watch?v=CYHGh6lmSbo



Apple iPhone X Google Pixel 2 XL LG W7 Samsung Galaxy S9 Google Pixel 2 Far Cry 5 Microsoft Xbox One X Apple iPhone 8

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V. © 1998 - 2018 Hosting door True

*