0

I'm using wookmark JS to display content.. All good, filtering works fine but, Im not too hot on Jquery. I need to load relative filtered items when coming from a specific nav link or page

Here's a link to the prototype page: http://cumminganderton.designnut.co.uk/projects.html

How do I pass the data-filter-class to objects when a user clicks the relevant link in the drop-down, or from the homepage, so if I click 'education' in the dropdown, when it loads the page, only items with data class of 'education' display?

Ive been searching for days now, cant seem to find a solution.. going mad.

Hope someone can help.

Cheers

Ren
  • 1
  • 1

1 Answers1

0

If you want Javascript-triggered changes to apply to the page when reloaded or linked to, the URL needs to contain something that will tell the Javascript to apply a filter upon load. The hash of the page location is the most common way to do this.

I suggest that you slightly decompose your onClickFilter and change the hash of the page location:

    var onClickFilter = function(event) {
      updateWithFilterElement($(event.currentTarget));
    }

    var updateWithFilterElement = function(item) {
      var activeFilters = [];

      if (!item.hasClass('active')) {
        filters.removeClass('active');
        location.hash = '';
      }
      item.toggleClass('active');

      // Filter by the currently selected filter
      if (item.hasClass('active')) {
        activeFilters.push(item.data('filter'));
        location.hash = item.data('filter');
      }

      handler.wookmarkInstance.filter(activeFilters);
    };

Now, when the user clicks a filter, it is stored in the URL for later use. After you’ve loaded images and set up your mouse events, you can add code to change the filter if the location has a hash:

if (location.hash != '') {
  updateWithFilterElement($("*[data-filter='" + location.hash + "']"));
}

You should probably add some error-checking to ensure such an element actually exists before trying to filter by it.

Buck Doyle
  • 6,333
  • 1
  • 22
  • 35
  • Thanks for taking the time to answer this Buck.. But I don't quite undertstand how it knows what filter to add?.. I tried adding #education on the end of the string (projects.html#education).. Doenst seem to work.. Am I missing something? where do I add that last block of code? – Ren May 12 '14 at 08:27
  • I didn’t write anything that would make it watch the location hash for changes and update the filter based on that. You could make it work [that way](http://docs.webplatform.org/wiki/dom/Element/hashchange), too, would be cleaner. But if you want to try what I wrote, just add the extra block of code before the end of your `imagesLoaded` call. – Buck Doyle May 12 '14 at 11:08