giotiskl / filterizr Goto Github PK

First of all, great work, thank you.

I have category = 0 and seems not valid for Filterizr, it is intended? or is a problem on my side?

cols = Math.round(self.width() / self.find('.filtr-item').outerWidth());

For example if container is 1024px, and tiles are 400px, cols will be calculated as 3, and as result the last tile in row will be only partially visible. In many cases this behavior is not desired, and can be fixed by using Math.floor(). So ideally there should be an option to control this behavior.

I kill myself :)!

What is the problem of this?

typo in the website document in "install div". it should be data-filter, instead of data-fltr. have attached image. it does not work with "data-fltr" attribute. or am i missing something?

Hi,

I know in the FAQ section you talk about images not being the right height because they are loaded in the DOM after the plugin has been initialised. So I'm trying it with imagesLoaded with the following:

`jQuery('.filtr-container').imagesLoaded(function() {

        var filterizd = jQuery('.filtr-container').filterizr({
            animationDuration: 0.5, //in seconds
            delay: 150,
            delayMode: 'progressive',
            easing: 'ease-out',
            filter: 'all',
            filterOutCss: { //Filtering out animation
                      
                opacity: 0,
                transform: 'scale(0.5)'   
            },
               filterInCss: { //Filtering in animation
                      
                opacity: 1,
                transform: 'scale(1)'   
            },
           layout: 'sameSize',
           selector: '.filtr-container',
           setupControls: true
        });
    });`

HTML

`

        <div class="filtr-item project-item " data-category="1" data-sort="hello">
          <figure class="fancy-effect">
            <picture>
              <source data-srcset="/assets/img/hello-small.jpg" media="(max-width: 425px)" />
              <source data-srcset="/assets/img/hello-medium.jpg" media="(min-width: 1024px)" />
              <source data-srcset="/assets/img/hello-large.jpg" media="(max-width: 1440px)" />
              <img data-src="/assets/img/webdesign/hello-medium.jpg" alt="hello screenshot" class="lazyload">
            </picture>
            <figcaption>
              <h2 class="project-title">Hello</h2>
              <p class="project-subtitle"></p>
              <p class="project-tech">Wordpress, HTML5, CSS3, SCSS, jQuery</p>
              <a class="project-link" href="#project-item01">View Slides</a>
            </figcaption>
          </figure>
        </div>

      </div>
    </div>`

 ` .portfolio,
    .filtr-container {
        display: block;
        position: relative
    }

    .filtr-container {
        margin: 0 auto;
        padding: 1em 0 4em;
        text-align: center;
        float: left;
        display: block;
        margin-right: 13.30108%;
        width: 100%
    }

    .filtr-container {
        float: left;
        display: block;
        margin-right: 8.49092%;
        width: 100%
    }

    .filtr-container .project-item {
        display: block;
        position: relative;
        float: left;
        float: left;
        display: block;
        margin-right: 13.30108%;
        width: 100%
    }

    .project-item figure {
        display: block;
        background: #383838;
        cursor: pointer;
        float: left;
        margin: 15px 1%;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 100%
    }

    .project-item figure img {
        display: block;
        height: auto;
        max-width: 100%;
        min-height: 100%;
        opacity: 0.8;
        position: relative
    }

    .project-item figure>figcaption {
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        color: white;
        font-size: 1em;
        height: 100%;
        left: 0;
        padding: 1em;
        position: absolute;
        text-transform: uppercase;
        top: 0;
        width: 100%;
        float: left
    }

    .project-item figure>figcaption::after,
    .project-item figure>figcaption::before {
        pointer-events: none
    }

    .project-item figure>figcaption>a {
        overflow: hidden;
        text-indent: 101%;
        white-space: nowrap;
        opacity: 0;
        z-index: 1000
    }

    .project-item figure>figcaption h2.project-title,
    .project-item figure>figcaption p {
        margin: 0
    }

    figure.fancy-effect {
        background: #D8D8D8
    }

    figure.fancy-effect img {
        max-width: none;
        width: -o-calc(100% + 10px);
        width: calc(100% + 10px);
        -o-transition: opacity 0.35s, -o-transform .35s;
        -o-transition: opacity 0.35s, -o-transform .35s;
        transition: opacity 0.35s, transform .35s;
        -o-transform: translate3d(-10px, 0, 0);
        -o-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        -o-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
        -o-backface-visibility: hidden;
        backface-visibility: hidden
    }

    figure.fancy-effect:hover img {
        opacity: 0.099;
        -o-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    figure.fancy-effect figcaption {
        text-align: left
    }

    figure.fancy-effect h2 {
        position: relative;
        overflow: hidden;
        padding: .5em 0
    }

    figure.fancy-effect h2::after {
        background: #383838;
        bottom: 0;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        width: 100%;
        -o-transition: -o-transform .35s;
        -o-transition: -o-transform .35s;
        transition: transform .35s;
        -o-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    figure.fancy-effect:hover h2::after {
        -o-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    figure.fancy-effect p {
        opacity: 0;
        padding: .3em 0;
        word-spacing: 216px;
        -o-transition: opacity 0.35s, -o-transform .35s;
        -o-transition: opacity 0.35s, -o-transform .35s;
        transition: opacity 0.35s, transform .35s;
        -o-transform: translate3d(-10px, 0, 0);
        -o-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        -o-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    figure.fancy-effect:hover p {
        opacity: 1;
        -o-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }`

    `.project-item {
    	figure {
    		display: block;
        background: $light;
        cursor: pointer;
        float: left;
        margin: 10px 1%;
        overflow: hidden;
    		position: relative;
        text-align: center;
    		width: 100%;


    		img {
    			display: block;
    			height: auto;
    			max-width: 100%;
    			min-height: 100%;
    			opacity: .8;
    			position: relative;

    		          &.lazyload,
    		          &.lazyloaded {
    			     'style that would give me the same height as img/figure no matter the browser width?'
    			}
    		}`

Description:

1. User can filter the items or scroll down the page.
2. If user filtered the items, while the page is scrolling down, new items attached to the page, and is filtered accordingly. The page will return some strings when data end.
3. User also can scroll down the page, then reach for the filters. Next, it will filter accordingly.

Current Situation:

1. I am using php to pull the data from mysql and display it on page. Pagination is used for view more data.

How to do so easily? Use Ajax? I am newbie in JQuery.
So sorry if the question sounds dumb...

hi guy, I'm using Filterizr for my website and I have a bug when it's online.
pls tell me how can i fix it, thank you.
sorry my bad english.

i written a hover function i.e.. when a image hover i am displaying overlay with content. In this after filtering category wise on hover is coming very slow on first two images some times it is not coming. Is there any solution for this.

I am looking for lighter alternatives for isotope.js and found this little thing. Now wondering if you plan on a plain Javascript version anytime soon.

I am also interested in teaming up and developing such a version.

The Plugin doesn't show items correctly at the beginning if I use percentage as container or item width.

My code is like this:

.filtr-container {
  width: 100%;
}

.filtr-item {
  background-color: #e1e1e1;
  color: #7f8c8d;
  border: 1px solid #fff;
  padding: 20px;
}

<div class="filtr-container">
   <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">TEXT</div>
</div>

I initialize the plugin on window.load (document.ready has the same effect).

The Problem is width: 100% in filtr-container will be handled as "100" and "col-md-3" handled as "25" and not "25%"

Debugging your code on "_calcItemPositions" method shows these values:

containerHeight = 0,
cols = Math.round(self.width() / self.find('.filtr-item').outerWidth()), ---> self.width() => 100 !!
rows = 0,
//Item data
itemWidth = array[0].outerWidth(), => itemWidth => 25 !!

when i open my index.php i got this

https://gyazo.com/c872caa8bcfd2bf92cf6b3773c6c7f12 // <-- Not correct
https://gyazo.com/84b9bde721b7a9b14a91d5dc4d4e354a // <-- Correct
images not loading correct
but when i click one menu Amatic or Netent its ok.... only on first loading i got this problem ... do you know how to fix this?

This is the function that i am using to call filterizr.

function callFilter(){
if($('body.has-filterizr').length > 0){
var filterizd = $('.filtr-container').filterizr({
delay: 25,
    delayMode: 'progressive',
layout: 'sameWidth'
});
}
}

Issue i am facing is blank space that shows on the bottom as soon i filter using any category other than All.

Can you guide what might be causing this behavior?

current line 948:
ret = ret.split(', ');
should be:
ret = ret.split(',');

Thanks, spent about 1 hour trying to figure out why my array to string wasn't working in filter when it turned out to be a f**king space that should not be there. There is no reason to include the space on the split, this is just plain old BAD coding practice.

I can't find a way to make the plugin work with multiple categories. Is this really not possible? If so its a deal breaker for me and I'd love to see it added.

Hi,

I wondering if you could help me with this.

Seems like the error is on line 284 subArrays[self._mainArray[i]._category[p]].push(self._mainArray[i])

I use string of category ex. data-category="Chinse, Single"

Thanks.

Dear all how can i select the filter by select option not a buttons because i have more more items and i want to select filter by option

thanks waiting your replay

hello
I have a few data-multifilter
sample

<ul>
   <li data-multifilter="1"> Green </li>
   <li data-multifilter="2"> Orange </li>
   <li data-multifilter="3"> Purple </li>
</ul>
<ul>
   <li data-multifilter="4"> text1 </li>
   <li data-multifilter="5"> text2</li>
   <li data-multifilter="6"> text3</li>
</ul>

And i have some blocks

<div class="filtr-container">
    <div class="filtr-item" data-category="1,2,4" data-author="John Doe" data-year="1998" data-novel="Cool book 1">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="1,3,5" data-author="Jane Doe" data-year="2003" data-novel="Cooler book">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="4,6" data-author="Jake Doe" data-year="2008" data-novel="Coolest book">
       <img src="img/sample.jpg" alt="sample">
    </div>
</div>

in defaul mode if i choice category 1 and 4 Filtterzr result 1 OR 4. But i need 1 AND 4. I need result only data-category="1,2,4"

is there any option to set the sampling algorithm? some INCLUSIVE/EXCLISIVE mode... like this http://wch.io/projects/tagsort/demo-stacks/

I am using in about us page in my site two things is there one is login and another one without login. Without login script is working fine with login through dnn script is through an error like "throw new Error('Filterizr: the value of data-category must be a number, starting from value 1 and increasing.');"

There is two main problem:

Documentation don't have information in install page about this library:
https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js

If display flex is used on 'filtr-item' then height on container is wrong calculate.

• On Every pages except of where filterizr is called.

Using on Wordpress site

Hey man,

thanks for your work! I'm really enjoying Filterizr on a current project of mine. There is just one point I can't cope with. I would like to set up two galleries on one page with default settings but for the moment the filter controls affect both galleries. I would like to control them separatly. This is a Jekyll project.

This is my two html gallery containers:
https://github.com/Lobotomizer/LS-Page/blob/master/1_artist.html

Here is the main sass file:
https://github.com/Lobotomizer/LS-Page/blob/Filterizr/css/main.scss

This is where I'm initiate Filterizr:
https://github.com/Lobotomizer/LS-Page/blob/Filterizr/js/filterizr-app.js

Here the javascript is called
https://github.com/Lobotomizer/LS-Page/blob/Filterizr/_includes/scripts.html

That should be the most important stuff. Thanks for your help in advance.

Hannes

Hello. lightbox, fancybox and other fotos scripts show hidden fotos. I want it will be show only filtered fotos. How do it? Can you help me?
Sorry for my english...

You can see my problem here: http://www.enhabit.uk.com/case-studies/

I've read list items sometimes don't capture click events in iOS and odd fixes like adding a cursor:pointer in CSS resolve it. No such luck here.

Hi,

I've modified the search function in jquery.filterizr.js because I need to find occurs that contain more than one keyword.

Example of needed behavior:

myArray = ["John Doe", "John Brown"];

Search keywords : "Jo Do"
// before modification give me nothing
// after modification, give me "John Doe"

search: function(text) {
            var self   = this,
                //get active category
                array  = self._multifilterModeOn() ?
                            self._makeMultifilterArray() :
                            self._getCollectionByFilter(self.options.filter),
                target = [], i = 0, j = 0;       
            if (self._isSearchActivated()) {
                for (i = 0; i < array.length; i++) {
                    if (text.indexOf(' ') >= 0) {
                        var words = text.trim().split(' ');
                        var confirmation = 0;
                        for (j = 0; j < words.length; j++) {
                            if(array[i].text().toLowerCase().indexOf(words[j].toLowerCase()) > -1) {
                                confirmation++;
                            }
                        }      
                        if (confirmation == words.length) {
                            target.push(array[i]);
                        }
                    }
                    else {
                        var containsText = array[i].text().toLowerCase().indexOf(text.toLowerCase()) > -1;
                        if (containsText) {
                            target.push(array[i]);
                        }
                    }
                }
            }
            //Show the results
            if (target.length > 0) {
                self._handleFiltering(target);
            }
            //If there are no results
            else {
                //and search is activated, show blank
                if (self._isSearchActivated()) {
                    for (i = 0; i < self._activeArray.length; i++) {
                        self._activeArray[i]._filterOut();
                    }
                }
                //if search is not activated display gallery with last applied filter
                else {
                    self._handleFiltering(array);
                }
            }
        }

Hope that can help someone ;)

Hi,

How can I start on data-filter="1" and remove data-filter="all" completely?

Thanks.

Hi,
I just started to play around with filterizr and I am having a issue here and I am not sure why...

On the page where I needed filterizr I do not get any error, but on other pages where I didn't even add the filterizr script tag I get the same error.

Uncaught TypeError: $(...).filterizr is not a function
    at HTMLDocument.<anonymous> (app.js:11)
    at fire (jquery.js:3187)
    at Object.fireWith [as resolveWith] (jquery.js:3317)
    at Function.ready (jquery.js:3536)
    at HTMLDocument.completed (jquery.js:3552)

and my short app.js code looks like

$(document).foundation()
$(document).ready(function() {
    $(".clc").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
    $(".scs").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
    $('.filtr-container').filterizr();
})

and the line 11 is $('.filtr-container').filterizr();

PS.
#26 I followed this issue and changed the line as well... that didn't fix the issue here

Thank you in advance,

Does this work with the latest jQuery? If not, what version would you recommend?

JS Fiddle

In order to stay relevant Filterizr needs to work well with upcoming Bootstrap 4 - the dominating frontend framework.

Bootstrap 4 is major rework of framework. Much changing here.

Me tried to implement Filterizr in Bootstrap 4 alpha v6.

Unfortunately no longer working: Items clump up - forming irregular heaps, instead of evenly distributed grid. Filterizr does not position them correctly anymore.

This is issue with Filterizr + Bootstrap 4, as equivalent example works right in Bootstrap 3.

Good to know: The clumped mess, can be made into intended grid structure on "shuffle".

Yet: Just attaching shuffle at the end of filtering process no solution - as clumping still occurs, yet at lower frequency. It appears shuffle process sometimes not finishing. Shuffle callback not reached, see console log for missing "shuffling ended" message.

JS Fiddle

Instructions:

1. You may want to use different dimensions of HTML window.
2. Just hit the filter buttons several times to reproduce issue.
3. When clumped use shuffle to unclump to get and idea of what is meant.

NOTE: I changed line 85 of jquery.filterizr.js: self.slector -> self to make work good with jqery 3,
as suggested here: other issue

Hello @giotiskl ,
I am the member of cdnjs project.
We want to host this library.
But there is a question I want to ask.
I install the library on npm which is the 1.2.4 release version.
But the version in /src/jquery.filterizr.js shows 1.2.3.
Please help me confirm that.
Thanks for your help!

cdnjs/cdnjs#7820

Hi,

I have a filter structure which goes like this:

• All
• Filter 1
• Filter 2
• Filter 3
• Filter 4
• Filter 5
• Filter 6

I want to know if there's a way in which the browser can reflect the URL of the active tab, i.e. www.sampleurl.com/filter-1 instead of www.sampleurl.com when I click on

Hi,

I am using this plugin in two instances on a site I'm developing. In both instances it is working out the height on the main wrapper wrong.

First off, i will mention the height on main wrapper issue.

both instances i am missing a few pixels form the main wrappers height that is auto generated bu the script. on instance i am using the "sameSize" layout, this is missing 20px ish. and the other instance, i am using the "vertical" layout, which is missing about 2 pixels

The vertical layout has a border at the bottom of each item, which is getting cut off on when the filter is set to all. When the filter is set to one of my categories, the border shows fine. There isn't any images within items, just plain text.

                var filterizd = $('.m-client-list').filterizr('setOptions', {
                    layout: 'vertical'
                });

and the css

.m-client-list {
  border-top: 2px solid #646469; }
  .m-client-list-item {
    border-bottom: 2px solid #646469;
    margin-right: 0;
    opacity: 0; }
    .m-client-list-item-content p {
      font-weight: 300;
      font-size: 12px;
      margin: 0;
      padding: 10px 0; }
    .m-client-list-item-title h3 {
      margin: 0;
      padding: 10px 0; }
    .m-client-list-item:after {
      content: "";
      display: block;
      clear: both; }

I'm hoping the problem with the 20 pixels that are missing with be fixed with the issue above. The 20 pixels missing is using the layout "sameSize"

Yassas @giotiskl, it would be great if you can add this package to bower repository so that one can install with bower too.

Hi,

I'm getting the above error straight as the page loads. In addition, every time I click a filter button I get the following one:
jquery.filterizr.min.js:1 Uncaught TypeError: Cannot read property 'length' of undefined

Hi,

how can I init Filteriz with sort order desc ?

by default all divs are aligned to left. is there any way we change it?

I have some Categorie results load with Ajax and the Filterizr do not work.

array[0] is undefined is the issue

How i can initailze Filterizr again?

And how it is possible to use in data-category="1, 5" words (string) like data-category="new wheel, other"

Also word with spaces must be possible

I've used Filterizr plug-in for my categories, but after creating a hamburger menu for my website, my categories stopped working. The screens bellow shows the error occurred.
Issue

Code

When both work filtrizк and stellar.js, Stellar incorrectly positioned background image.

Nice Plugin. Great Job.

Only thing i found is -
When i am excluding all button from the filter menu, than it should not show all the items on page!! It should show as per the #no. given in data-filter attribute.

Can you solve this?

Hi, first i want to say that i love this plugin. I tested it with jquey 3.1.1 and then sometimes when you filter the blocks dont look nice in a grid but the overlap eachother see screenshots. but sometimes it looks "ok" again

but then when i use jquery1.12.0 (As in your demo) it works fine.

Do you have any responsive options, so items will set based on css on mobile and tablet devices?
For example- I have width 33% each column (3 col per row) with a class and on mobile device width is 100%. But with Filterizr it's not working. It's still 3 column per row.

3 Data Filter Menu Items so it gives 3 content blocks!!

1st Menu item - I used 3 items per row, total 3 rows (1st content block) (item width 300px)
2nd Menu item - I used 1 item per row (2nd block) (item width 780px) (Which is not happening, in that 2nd item is running away out of window)

problem is, i want 3 items per row in scene 1, and 1 item per row in scene 2!! Attached the shots

is it layout: 'sameSize', related???

Hi there,

I only ever want to display for instance 6 filtr-items.

What is the best way to go about that? The only thing I could come up with is try to hide them in one of the callbacks.

Regards,

Cameron

Hi,

First, thanks for this nice work.
Is it possible to use simple filter controls with multiple id in data-category ?
Best regards

I solved the problem, sorry

it would be great if you could add support String categories. One option would be using multiple CSS selectors which can be combined to have logical operations and also very flexible filter definition:

<li class="btn-primary filtr-button filtr" data-filter=".cat-1.cat-2"> AND FILTER </li>

<li class="btn-primary filtr-button filtr" data-filter=".cat-1, .cat-2"> OR FILTER </li>

Thank you.

Hello there,

I m using the Filterizr library for the sorting. But I am getting the problem when I declare the data category like this data-category="2, 4" error is "plugins.js:951 Uncaught Error: Filterizr: the value of data-category must be a number, starting from value 1 and increasing."

I don't why it is getting Error. my code is given below please tell me where I am wrong.

   <ul class="simplefilter filters-filteringModeSingle" id="filteringModeSingle">
          <li class="active filtr" data-fltr="all">Customizable</li>
          <li class="filtr" data-fltr="1">Accessories</li>
          <li class="filtr" data-fltr="2">Jewelry</li>
   </ul>

<div class="filtr-container layout-pane filteringModeSingle">
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="2, 4"> <img class="img-responsive" src="{{media url="wysiwyg/media/img1.jpg"}}" alt="sample image"> </div>
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="2"> <img class="img-responsive" src="{{media url="wysiwyg/media/img2.jpg"}}" alt="sample image"> </div>
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="7"> <img class="img-responsive" src="{{media url="wysiwyg/media/img3.jpg"}}" alt="sample image"> </div>
 </div>

jQuery(document).ready(function() {
    var filteringModeSingle = jQuery('.filteringModeSingle').filterizr({
        delay: 25,
        setupControls: false
    });
    //Filtering section nav
    jQuery('#filteringModeSingle li').click(function() {
        jQuery('.filters-filteringModeSingle .filtr').removeClass('active');
        jQuery(this).addClass('active');
        var filter = jQuery(this).data('fltr');
        filteringModeSingle.filterizr('filter', filter);
    });
});

Hello,

i've a html page which is loading dynamic content from a csv file:

textToInsert[key]=<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 filtr-item"

data-category="'+obj['Criteria']+'" data-sort="'+obj['Surname']+' '+obj['Name']+'"><div class="card

...

$(textToInsert.join('')).appendTo('#teamMember');

and places this into

The simplefilter, multifilter, and sortandshuffle works after this loading in Firefox4x and IE10, but doesn't work in Safari & Chrome.

I tried to update the CSS classes, hide/show the dom elements, to initialize the filtr-container with filterizr,... but nothing helps. What did i do wrong, is there something that i'm missing??

My users filter list has grown to be very large (as its cms populated). So I was thinking of replacing the list tags I have with a select field. I've tried it and the plugin doesn't seem to work out of the box with this.

So I want to confirm, is that correct and if so can I do anything to resolve?