CODEWITHSUNDEEP
javascriptjquery-isotope
Chris Lydon
Chris Lydon

Reputation: 89

Isotope javascript js basic example not working

I am trying to get Isotope javascript ) to work on a test page.

I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)

I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php

(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)

I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).

I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))

I can't see what I'm doing wrong that means this verbatim copy of their example won't work....

(Tried it on different browsers - their examples work in them, but my copied example doesn't)

I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!

Thanks for any help you can offer!

Upvotes: 1

Views: 742

Answers (1)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

There were two main problems:

1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js‌​"</script>

Change to:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js‌​"></script>

2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.

Instead, put the script just before the </body> tag.

Working jsFiddle:

https://jsfiddle.net/dptve3s6/1

Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.

Upvotes: 1

Related Questions