luis-almeida / filtrify Goto Github PK

hi, just a quick problem... the "Search" placeholder text is hard-coded :) it's easy to change it, but it would be nice, if it can be changed using API / config value :)

I did not find any documentation about implementing a reset trigger in Isotope so I thought I would share how I got it to work.

Initially I could not get ft.reset(); to work until I finally added var ft = back in. It is absent from the javascript shown in the original Isotope example

 
   var ft =  $.filtrify("container", "placeHolder", {
        hide     : false,
        callback : function ( query, match, mismatch ) {
            container.isotope({ filter : $(match) });
        if ( mismatch.length ) $("div#reset").show();
            else $("div#reset").hide();
        }
    });
     
    $("div#reset > span").click(function() {
        ft.reset();
    });

Thanks for the plugin Luis!

I am working on a project in which I need multiple filters. Like, user has selected the category1 in categories, and he want to select type. He can select type1 and also he can select the type2. If he has selected two type and one category then it needs to display items from category1 and also in type1 and type2.

And, other setting require for pagination. i need to set limit of items. Like If I want to set limit to 9, And there are 15 items after filtering, then it will display pagination with 2 pages.

Is this possible?

The "popup" filtering panel isn't displayed in the downloaded demo with the online version of jquery-1.7.1.min.js that it's currently linking to.

It works if the path is changed to jquery-1.7.1.min.js in the js folder of filterify-master, or if it links to the latest online version of jquery at http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

I love the plugin; I have one request.

I want the user to be able to pick one category, pick an item from the dropdown, as usual.

But then, if the user goes back to that category and picks something else, can the first search be cancelled out in favor of the second?

In other words, I don't want the user to be able to pick more than one item in each category.

Thoughts?

thank you thank you,
Gloria

Hi!

First, I want to thank you for all the good work you did to create this. I really appreciate it. I have an issue with Firefox and I was wondering if you could help me solve it.

I don't know why, but when I try to use it in Firefox, it says that there's a pluggin missing. It's weird, you know, because it's jquery and javascript. I don't know why they say that and it's written in the description of filtrify that it's compatible with firefox.

Am I the only one experiencing this issue ?

Thanks a lot for your help,

Withney

P.S. : Sorry, english isn't my first language so, I hope you understand :)

Hi,

I try to set a custom "noresults" message but it seems it's not displayed at all.
Even if I leave the default message unchanged.

Where it's supposed to appear?

I have tried to check your demos but there's no message even there.

Thanks for your support.
Best regards

Carlo

First of all - great product! But I'm trying to change it a bit to fit my use..
So a couple of questions:

1. Do you know of a way to easily search the container instead of the categories?
2. Right now if you tick off Action and Adventure under genre, you get movies that are tagged both Action and Adventure. But is it possible to get to show movies that are tagged with just Action even when both Action and Adventure is ticked off?

Hi there, I have implemented filtrify into a page (see link below)

http://artslondon.github.io/beta/style-guide/examples/csm-short-courses.html

Does anyone know how I can remove the last comma from the individual filter lists?

I tried removing the last comma using jquery but when I did this is stopped the filtering from working.

Grateful for any advice.

hi wanna know how to paste navitagion pages on both places, on top and on footer :) thanks!

This is more of a UX choice than anything. Personally I would want to only be able to see the tags that do have matches. Whether you still deliver both options (do/don't show empty matches), I at least think the default option should be that they are hidden. Thoughts?

Maybe it's best to consolidate all UX and UI related questions, concepts and naggling problems into one thread. It's a very emotional, intangible field so it's not exactly a case of "this is a bug, fix it" - it's more like "what would the user expect to see in x scenario".

• Animate filter in and out - A fadeIn/fadeOut is obligatory, maybe a 10px "drop in" too?
• Multiple filters available at once - In the demo, you can have all three filters visible at once, and they compete for z-index on hover. I can understand the thought process behind all three being available, but personally would shy away from it as it looks hectic. Is there a way you could consolidate all 3 into the one area?
• Movie demo - We talked about using Masonry or Isotope to deliver "same height" functionality, but perhaps the movie titles should have white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to ensure the titles are only ever one line and the images line up.

Thoughts?

When having multiple categories it would be desirable to not have panels stay open. Just like how you can close the panel automatically when you select a tag can the same be done when you open up a second panel?

I have an idea that it has to do with creating a siblings selector in the filtrify.js

Thanks for your help.

Basicly I want that if I choose multiple values from one parent, it'll filter them with "OR". For example: if I choose "genre: action, comedy" It'll show all the movies with action OR comedy, and not action AND comedy.

Here is a link for my stackoverflow question, if it's not understood:
http://stackoverflow.com/questions/20933606/jquery-filtrify-plugin-filter-or-instead-of-and

Can you add this feature?

hi! i'm having some margin problems:

when windows is a little smaller, filters get outside screen:

example:

I'm facing a strange issue with filtrify on ios. When I open a filter, I actually cannot scroll. Although the scollbar is moving, the tags don't. When I open a second filter, then I can scroll the first one...

http://www.a-clip.de/testsite/?s=berlin

(It won't work with the original filtrify css either)
Any hints would be highly appreciated.

The "mismatch" items have a "ft-hidden" class name appended. I need to add a class name to "match" items which doesn't happen now. My business requirement is to use .slice() function on the "matched elements". Hope i am clear!

I was wondering if jQuer BBQ or any other back-button plugin would be an impovement or an easy addition so you can get the hash for a link to preselected tags?

$.browser is no longer available in since jquery 1.9
$.support is working just fine instead

Hi
I'm trying to implement the jpages plugin and i'm using the code you provide for insert "legend" of what you are searching. But when i do that, jpages dont work anymore.
I'm not an expert in jquery and i supose that the the problem is in the way i put the code together.
What it's the correct way to do this?

The content of search text field is currently not validated on input. It's currently vulnerable to cross site scripting (XSS) attacks.

Hey, maintainer(s) of luis-almeida/filtrify!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library luis-almeida/filtrify is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "luis-almeida/filtrify",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I wonder how I can manipulate the filter to find the condition "or".
I also wanted to manipulate the names of the filter without being tagged by date.
example:
  the menu is as 'state' and I wish you were 'State', how can I do this?

Grateful for the assistance.

hi, is there any way i can avoid repeating information?

i mean:

html5 "data-" has an information ex:

<li data-director="spielberg">

..and then.. i'm retyping it..:

<span>Director: <i>spielberg</i></span>

i'm using it over github so only javascript available..

any way to avoid repeating everything?

thanks!

Hey! Really like this plugin. Awesome job!

I was hoping you could offer some guidance on this. You know how you can close selected items from the filter by clicking on them from the dropdown?

Well, for some reason, I can't figure out how to allow items to be closeable outside of the dropdowns. For instance, in the legend, I'd like the selected tags to be clickable/closeable so the user doesn't have to go into each dropdown just to close some tags.

To further convey this, here's an example from Behance: http://www.behance.net/search?field=44&sort=appreciations&user_tags=971379|971837|971895 You'll see their tags are closeable in one spot. Thanks!

Integrating this script with Isotope or Masonry means you could leverage some pretty sexy UI conventions.

There's a risk it's delivering duplicate functionality, as per this filtering example.

The main benefit of at least using Masonry would involve getting rid of the mismatched heights in the movies demos, as Masonry equalises them.

There's a 1px jump when toggling the filter in the "Single Category" demo.

Chrome 18, OS X Lion

Hi,

Just love this plugin.Awesome work.Thanks for making and sharing it to the world :)

I have a requirement where i want to do certain actions when user makes a selection.

Currently i use the Callback function for the same. The only problem being callback function is also called during filrtrify load.(Not just when user makes a selection)

To circumvent this i cannot use the "query" object to check whether it contains value to determine if this is the first load callback as some times on page load i fill the "query" object.

Is there any thing iam missing in the options or is there any quick workaround you might suggest?

Once again thanks for this beautiful plugin.

Hello, thanks for the plugin!
I'm just trying to combine your Isotope integration with your lazy load integration, but seems to only isotope layout, then not trigger the lazy load. I guess I need a call back but I'm unsure where it should go..do you think this kind of integration would work?

Thanks!

I'd like to integrate the generated menu into a website's menu in order to create the type of navigation + filtering that is used on many retail sites (i.e. shopstyle.com).

How can I call a specific category instead of the entire menu so that I can incorporate it in the the proper place and with the necessary formatting?

Is there any chance to add grouping for list items?
So I can divide one category into two subcategories.

First, I am a mac user and hate IE, especially when designing or coding, that said, I was testing a site on IE8 with your online jPages/Filtrify demo page and note that the Filtrify dropdowns are not visible. No problems in Mac or PC Firefox, Chrome or Safari.

IE8 error details

Message: Object expected
Line: 2
Char: 12379
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Hello,

I wish to hide when the matches is empty. how can i do it ?

looking at your example http://luis-almeida.github.io/filtrify/legend.html

how would one make the legend clickable so that they undo the selected filter.
in other words:

1. user clicks a tag which filters and appears as a legend.
2. user can now click the legend and it un-filters that tag.

Hi,
is it also possible to use the filttify-Plugin also with tables?

BR

Great plugin by the way! Was wondering if there was any future plans of implementing filtering by input box (ie. search capability)

Hey hey!

While going through some of the docs on your homepage, I found that filtrify is based on Chosen, which is the predecessor of Select2: http://ivaynberg.github.com/select2/
I really like the UX from this plugin, especially that you can have an overview of all active filters, without opening any panels.
So I decided to give it a shot, but after spending the whole day in trying to incorporate select2 in filtrify, I have to admit I am not a jquery guru...
On the other hand, I have the impression that it would greatly simplify the current code base, since there is a lot of abstraction for things filtrify does manually.

So the question: any plans perhaps to include select2 within filtrify?

Thanks!

I'd like to filter by a range, rather than just the direct values (e.g. filter by name A-L, M-Z). I've hooked it up to a jquery ui slider for price, and on slider change, I run through the list (filtered or unfiltered) and identify all the list elements that fit within the range. Is there any way to adapt this to make the non-matching elements hidden just like a standard Filtrify filter?
Thanks.

Here's the simple js I've implemented in terms of filter.

$(".listElement").each(function () {
                var cost = $(this).attr("data-rangeFilterElement");
                if (cost < val2 && cost > val1) {
                           //Add to list of matched elements / do something

val1 and val2 are the lower and upper limits, respectively.

The union of the filtrify existing matched elements and my matched elements would be the elements I would like to display.

Hi there, not sure if anyone else has noticed this or has encountered the same problem but I have implemented the filtrify plugin on the University of the Arts London website for its collection of chart courses and it works great, the only issue I am having is that the order of the filters seem to reorder in FireFox.

Please see link below.

http://www.arts.ac.uk/csm/courses/short-courses/browse-short-courses/

The filters on the left are in the correct order with 'Filter By Session' appearing as the first filter. However if you look at this same page in FireFox it seems to move 'Filter By Session' to second from bottom of the list and puts 'Three Dimensional Design' at the top.

I have nothing fancy going on here at all other then adding a bit of CSS to make the gap between the first and second filter bigger and to append the 'Filter By Discipline' header between them.

Would be grateful for any advice on this.

Thanks in advance.

Hey there, is there a way to get the title of the filter to be capitalized?

I've tried playing around with the HTML list item's "data" name. And, with the CSS's "text-transform: capitalize;" command, but neither method works. My guess is that the case of the filter title gets stripped because it's being assigned in the jQuery commands themselves. I notice on your example pages all the filter titles are in lowercase lettering.

I love the filter program. Thanks for building it. I'm a novice when it comes to jQuery, so this is a huge help.

Hi, is there a way to add a current state to every item you click on in the filter list, also clicking again would unselect and remove the filter?

An example of this would be a check box list.

Thanks!
-chris

Hi

Anybody have any idea why my filter lists appear in a different order when viewed in IE and FireFox.

http://www.arts.ac.uk/csm/courses/short-courses/browse-short-courses/

The 'Filter By Session' should be the first list.

Thanks

No "modern" browsers support the method that this plugin originally used; if an image is loaded on the page via the "src" attribute in the tag, that can't be suppressed -- it loads. The updated method requires that img tags use a placeholder image in the src attribute, and specify the actual image via a "data-src" attribute.

Hi,

i have two simple questions:

1. Is there a way to change the Label of the tags (i.e. data-onof="something" would show "onof" as a tag)?
2. Is there a posibility to produce: list instead of an unordered list for the tags? Thanks in advance.

Hi guys,

first of all THANK YOU Luis for this great plugin! It's the definitive filtering plugin!

I'm here just to confirm a doubt.
I was trying to add your plugin to a wp site and I was not able to make it work.

I'm trying to keep things updated and I'm loading jquery 2.0 just to make a try.

After several trials I change jquery version to 1.7... like in your demo and it finally work so I keep trying loading newer versions of jquery and I found filtrify is not compatible for jquery after version 1.8.3
Am I right?

Is anyone working on it to make it compatible with newer versions of jQuery?

Thanks again for your great work!
Best regards

Carlo

Hello,

What can i do to hide an empty tag,
It's for multiple selection, for exemple.
When i select Genre : action what i need to do with the empty tags in the actor category. I guess it's not so difficult, just need to hide the tags with count 0.

Thank you.
Sorry if my english is bad, i'm french.

Awesome plug-in!
I have encountered a strange issue though.. jPages worked perfectly fine with my data until i used window.onhashchange. Now, the pagination is distorted.
Also, when i click on the panels it automatically closes it (even though i have set close : false)
It seems like window.onhashchange is overriding the default behavior of filtrify.

Dear friends.

when I try to create the call filtrify, happens the following error (TypeError: $(...).on is not a function - filtrify.js LN: 162). Can you help me?
grateful.

My Code:

$(function() {

        $.filtrify("container", "placeHolder");

    });

Thanks.

I know you have an example of how to reset all filters on a page, but how about resetting just the filters in a given category? Let's say I have three categories like you have in your Movies example (http://luis-almeida.github.io/filtrify/movies.html). My ideal implementation is this:

• Click a filter to add it
• Rather than adding the filter name to the top of the list as is the current action, add a "Reset" button
• Once the reset button is clicked, it resets ONLY the filters in that given category, leaving the other two categories alone. So, if I want to reset my Genre but keep the Director, I can do that.

At the moment, with the examples you have and poking around myself a bit, I've only been able to produce the "Reset All" example you provide. Any chance of an added feature for those points above?

Hi,
first it is a really great plugin.
But one thing what makes the plugin really hard to use in own website environment is that the filtermenu is completely generated by javascript.
i have an website who i use Bootstrap and I can only use the Bootstrap-classes if I change the plugin.

Think about it and probably it could be a point to make this plugin still better.

BR