Implementing Isotope filters (basic)

Question

I'm trying to implement Isotope's filtering on a news section of a WordPress installation. I'm new to JavaScript / jQuery and am trying to learn on the go. I started by using the code provided in the Filters section of the Isotope website.

Having had no luck, I started Googling. On Stack Overflow I found Implementing isotop filtering portfolio with wordpress which looked promising but had no responses. Then I found Implementing jQuery isotope. I thought, wow, alright same exact question. Answered. Great.

...but my excitement soon turned to even more frustration. I am still sitting here after hours of tinkering without having anything to show for it.

My simple question is, what am I doing wrong / missing / not understanding?

Thanks in advance for your help, forgetfuljames

HTML OUTPUT

<div id="grid_page">
<ul id="isotope_filters">
    <li><a data-filter="*" href="#">show all</a></li>
    <li><a data-filter="event-planning" href="#">event planning</a></li>
    <li><a data-filter="marketing" href="#">marketing</a></li>
    <li><a data-filter="site-survey" href="#">site survey</a></li>
</ul>

<ul id="isotope_container">
    <li class="isotope_selector event-planning marketing">
        <a href="./link-1/"></a>
        <div class="caption">
            ...
        </div>
    </li>
    <li class="isotope_selector site-survey">
        <a href="./link-2/"></a>
        <div class="caption">
            ...
        </div>
    </li>
    <li class="isotope_selector event-planning marketing">
        <a href="./link-3/"></a>
        <div class="caption">
            ...
        </div>
    </li>
    <li class="isotope_selector marketing">
        <a href="./link-4/"></a>
        <div class="caption">
            ...
        </div>
    </li>
</ul>
</div>

JavaScript

<script type="text/javascript">

$(window).load(function()

    // cache container
    var $container = $('#isotope_container');

    // initialize isotope
    $container.isotope({
    // options...
    animationEngine: 'best-available',
    itemSelector: '.isotope_selector'
    });

    // filter items when filter link is clicked
    $('#isotope_filters li a').on('click', function() {
    var selector = $(this).data('filter');
    $container.isotope({
    filter: selector
    });

});
</script>

Apoloniaapolune

Need your CSS as well to style this one up in a JSFiddle. – Audly

Do you realise you are missing an opening brace in your load(function(). should be load(function(){. Always run your code in Chrome with the F12 debug window open. it will show Javascript errors as a red number. – Audly

@HiTechMagic — Awesome! The brace was doing it! Also, I didn't know Chrome showed Javascript errors. A new tool. Great stuff. Thanks for the quick help! – Apoloniaapolune

P.S. my data-filter attributes were missing the periods as well. What is best practice, edit my original question to reflect the answer? – Apoloniaapolune

Normal practice on SO is to request the comment be changed to an answer (which I have done). – Audly

+1 for providing code and HTML (JSFiddles are an ideal way of presenting this type of question) – Audly

Ok. I just signed up. Thanks again! – Apoloniaapolune

Answer 1

You are simply missing an opening brace (and the .'s on your selectors as you found):

<script type="text/javascript">

$(window).load(function() { <<<<

    // cache container
    var $container = $('#isotope_container');

    // initialize isotope
    $container.isotope({
    // options...
    animationEngine: 'best-available',
    itemSelector: '.isotope_selector'
    });

    // filter items when filter link is clicked
    $('#isotope_filters li a').on('click', function() {
    var selector = $(this).data('filter');
    $container.isotope({
    filter: selector
    });

});
</script>

Audly

Answer 2

For future visitors of this question I leave the code working (without Css)

Code Snippet

$(window).load(function()
{
    // cache container
    var $container = $('#isotope_container');

    // initialize isotope
    $container.isotope({
    // options...
    animationEngine: 'best-available',
    itemSelector: '.isotope_selector'
    });

    // filter items when filter link is clicked
    $('#isotope_filters li a').on('click', function() {
    var selector = $(this).data('filter');
    $container.isotope({
    filter: selector
    });

}); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<div id="grid_page">
<ul id="isotope_filters">
    <li><a data-filter="*" href="#">show all</a></li>
    <li><a data-filter=".event-planning" href="#">event planning</a></li>
    <li><a data-filter=".marketing" href="#">marketing</a></li>
    <li><a data-filter=".site-survey" href="#">site survey</a></li>
</ul>

<ul id="isotope_container">
    <li class="isotope_selector event-planning marketing">
        <a href="./link-1/"></a>
        <div class="caption">
          ----> event-planning marketing  <-----
        </div>
    </li>
    <li class="isotope_selector site-survey">
        <a href="./link-2/"></a>
        <div class="caption">
           ----> site-survey  <-----
        </div>
    </li>
    <li class="isotope_selector event-planning marketing">
        <a href="./link-3/"></a>
        <div class="caption">
           ----> event-planning marketing  <-----
        </div>
    </li>
    <li class="isotope_selector marketing">
        <a href="./link-4/"></a>
        <div class="caption">
           ----> marketing  <-----
        </div>
    </li>
</ul>
</div>

Sidwohl