How to do divs filtering and loading?

Hi Nuno, Some plugins achieve that, take a look:

https://scrollrevealjs.org/

https://terwanerik.github.io/ScrollTrigger/

https://edull24.github.io/ScrollWatch/

http://scrollanim.kissui.io/

Of course, sorry...

At my notepad's links I have the following: https://github.com/jiren/filter.js/tree/master -Demo: http://jiren.github.io/filter.js/index.html

https://mixitup.kunkalabs.com/

Hi Nuno,

Some of the resources are jQuery plugins, to learn how to implement them I suggest this course: Using jQuery Plugins

Hi,

Thank you for the plugins. I'll have a look.

What about the filter system and how should I store all the divs. Can you help me with that?

Hi!

Thank you for the links. That's exactly what I need. I didn't understand straight away how to apply them but I will study them later and do some trials.

Thank you!

Thank you! I will watch it :)

Hi again :)

I'm looking into the filter that you show me: https://github.com/jiren/filter.js/tree/master

It look different from the jquery plugins and am I in trouble to implement it...

First, my data is in this format:

    <div class="className" data-collapse="accordion persist">
        <h2>Title of Item</h2>
        <ul>
            <li>Item type</li>
            <li><div class="subItem-li">
                <p>subItem 1</p>
                <a href="" title=""><img src="img/play.png" alt=""/></a>
        </div></li>

            <li><div class="subItem-li">
                <p>subItem 2</p>
                <a href="" title=""><img src="img/play.png" alt=""/></a>
            </div></li>
        </ul>
    </div>

So, there is a title. and then a list. Each list item contains text on the left and a image with a link on the right.

I want to filter them by Item type and subitem using checkboxes.

Also, in the external examples I noticed that they use the class="fjs_item" but I don't see any reference to it in the documentation.

Do I need to change my divs to be like the VIEW in the documentation???

Create a template using the script with all those divs classes and tables to present information??? That doesn't sound correct to me...

Thank you!

Hi Nuno, always when I will implement a more complex plugin, I first begin with an example of the plugin itself, and then I go modifying it to my project. To facilitate this process, I reorganized the structure files/folders for you. What is your email address? (So I can send it to you)

Please send it to elfo106@hotmail.com

You are awesome!

Hi,

I'm looking at your files. It's more simple this way :)

As far as I understand, I need obviously the index.html and modify to have the filter option that I want, then I need to change the movies.js to have the data that I want instead of these movies, I need filter.js as it is, and then modify the javascript.js to the class names that I use in index.html

For now I've one question before starting to do some changes:

In the index.html id="movie-template" there are some tags that are strange to me like

<h4><%= _fid %>. <%= name %></h4>

I guess <%= %> is to include a variable content and _fid and name are variable names.

Where are the declarations of _fid and name? Is it in movies.js? I know that _fid correspondes to the movie number (like a db index) but I dont see its declaration anywhere...

Hi Nuno, For what I see all these "variables" are at the movies.js file, for example:

var movies = [
  {
    "name": "The Shawshank Redemption",
    "outline": "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
    "rating": 9.3,
    "director": "Frank Darabont",
    "year": 1994,
    "stars": [
      "Tim Robbins",
      "Morgan Freeman",
      "Bob Gunton"
    ],
    "runtime": 142,
    "genre": [
      "Crime",
      "Drama"
    ],
    "certificate": "R",
    "date": "1974-04-30T10:29:29+05:30",
    "actor": "Tim Robbins",
    "id": 1
  }, ...

<%= rating %> = "rating": 9.3

<%= _fid %> = "id": 1

<%= name %> = "name": "The Shawshank Redemption"

<%= outline %> = "outline": "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency."

<%= runtime %> = "runtime": 142

...

How _fid is id ? Where the _f came from? :)

The "_fid" appears 8 times at the filter.js file, maybe it is where its definition comes from.

Hi,

I want to have um li with a p and a for each item array in the movies.js but when I use

<li><div class="className"> <p><%= items %></p> <a href="" title=""><img src="img/play.png" alt=""/></a> </div></li>

I get obviously one bullet point with all the items written in the same line and one image in the end. Do you know how I can split all the itens in different lines?

I would suggest you take a look at your css (how it is stylized) with your browser inspector tool, and then change it as you want.

If you say so...but to be honest I don't think it's a css thing.

I think the tag <%= items %> is grabbing all the array items of my object and putting it all together in a unique "string"

If it was a css thing I would get one image per array item (like I want) but not splitted in different lines.

Am I wrong?

If I use <%= items[0] %> I get only the first array item.

Send me your project folder via email please.

PS: I never used this plugin before, so I will try to figure it out.

Hi,

Did you had any success? The most I could achieve so far was to have a break line by editing the movis.js file :(

I didn't receive your email.

Sent again

I got it already. Thank you for your support!