[JS] Isotope in pure JS, geen jQuery

[Carharttguy]

Hallo

ik probeer deze js library te gebruiken: https://isotope.metafizzy.co/
Ik ben al een hele tijd aan het proberen, maar krijg het op een of andere manier toch niet werkende. Ziehier mijn fiddle: https://jsfiddle.net/v1ryc2xj/

Ik verwacht dat ik dus een radiobutton aanklik, deze dan de functie updateGrid aanroept met een filterwaarde. En dat Isotope dan de thumbnails eruit filtert die niet nodig zijn. Er gebeurd echter gewoon niets.

Ik krijg ook geen error in mijn dev console of iets.

Ik ben al uren ermee aan het prutsen, en om zeker te zijn heb ik de functieaanroep onmiddellijk in de html geplaatst en geen listener gebruikt, om gewoon zoveel mogelijk fouten uit te sluiten.

Kan iemand mij in de goede richting duwen?

Thanks!

[Spinal]

Carharttguy schreef op dinsdag 20 juni 2017 @ 13:01:
Ik krijg ook geen error in mijn dev console of iets.

Vreemd, ik wel:

Uncaught ReferenceError: updateGrid is not defined at HTMLInputElement.onchange ((index):82)

[jponsen]

Geen idee of dit het probleem is, niet getest. Maar het valt me op dat je bij "itemSelector" een onjuiste selector meegeeft. Daar moet een . voor lijkt me.

code:

var iso = new Isotope('.grid', {
  itemSelector: '.thumbnail',
  layoutMode: 'fitRows'
});

[Klaasvaak]

De radiobuttons zijn ook onklikbaar. Lijkt te komen doordat Isotope een position = 'relative' op de div met de .grid class zet. Hierdoor lijkt bootstrap van slag te raken.

[b2vjfvj75gjx7]

Isotope zelf werkt zonder jQuery (probeer je html-output maar eens te resizen in die fiddle).

Om een filter te 'binden' aan een radio-button is jQuery wel geprefereerd;

https://isotope.metafizzy.co/filtering.html

Het kan zonder, maar dan moet je de code dus aanpassen...