0

This may pull off as a bit of a n00b question, but I am a jQuery n00b. I've combined bin sorting (Packery) with filtering (Filtr.js) here (search box at top left). Problem is once you filter, spaces are left in the layout until you resize the window which refreshes the layout. Filtr.js has a callback function after filtering, and I'd like it to refresh the layout. I've tried: 

$('input[name="filter"]').filtr($('#thumbs div'), {    
    afterFilter: function(){
        pckry.layout();
    }
});

To no avail. I've tried my best to implement afterFilter from here and Packery refreshing via pckry.layout(). I can't tell whether this just isn't possible to do, or if I haven't written this correctly?

Domenico
  • 5
  • 3
  • Tell us a little more about browsers you're using for testing, does the effect look alike in all browsers? What do you mean: "spaces are left in the layout"? I see spaces in the layout before and after writing something in input box. After you put something in search box what effect do you expect? By the way it'a a cool idea you're having, nice metro design. – Pawel Miech Jul 12 '13 at 06:48
  • I'm using Safari, but the behaviour is consistent across other browsers. What I mean by the spaces if if you type in 'foo' for instance the items are removed leaving voids instead of the filtered items grouping together. The behaviour I want is what happens when you resize the window after filtering for 'foo'. Haha, thank you for the complement, the coloured squares are just for test purposes!! – Domenico Jul 12 '13 at 06:53

1 Answers1

0

It looks good, but pckry isn't currently defined in your script. Instead of attaching Packery to the jQuery object, you can instantiate a new instance of Packery and define it as pckry (or whatever you want) like:

var pckry = new Packery($container[0], {
  itemSelector: '.item',
  gutter: 10
});

Note the [0] after your jQuery object to reference the original DOM object.

Walter Cameron
  • 2,383
  • 19
  • 9
  • Wow! Thank you so much. That just worked like magic! Is it correct to just put that bit of code in with the rest or should it be streamlined further? – Domenico Jul 12 '13 at 07:09
  • It really depends on what more you want to do with the page. I've never used Packery and its website is down so I can't really advise there. I would recommend brushing up on basic javascript though, [jQuery Fundamentals](http://jqfundamentals.com/chapter/javascript-basics) is a great resource. – Walter Cameron Jul 12 '13 at 07:17
  • More just for performance. I've removed some existing js which was doubling up on the new instance. I definitely will read through. Thank you. – Domenico Jul 12 '13 at 07:24