How to use "Mixitup" filtering language in hype 3


(Jay) #1

Hello,

I curious to check is there any way to use “MixitUp” Java in hype 3.
MixitUp

If there is way to use it, could you please let me know how to do it or upload example?
It would be much appreciated.

Thank you!


#2

“MixitUp” is a plugin for jQuery written in Javascript (not Java - this is a completely different language) :slight_smile:

To use it would be fine. But, it would take a bit of work implementing it within a Hype document.

Essentially you want to add a reference to the jQuery library and the MixitUp library in the Head HTML of your Hype document. Then treat each element you create as the mix elements by giving them a class (in the inspector) of mix. Also you would have to give the Hype scene an id of “container”. (You can do this by adding this small javascript function on scene load):

element.id = "container";

This should get you started and you can follow the instructions at the link you provided to instantiate, etc. I haven’t got much time at the moment to provide an example. But, if you try it yourself and then come back for some help I can try and show you something. :wink:


(Jay) #3

Hello DBear!

Thank you for your reply.
I follow your instruction and partially succeed to implement it.
I wrote id with Capital c in the scene load and it worked.

element.id = “Container”;

But somehow the filtering and sorting functions are not clear for me…
I made this quick test, could you please check and correct me what i did wrong?

Mixit up test.hype.zip (32.2 KB)

Really appreciate your help!


#4

Hi @Jay

Using capitol C works because the code copied from mixitup has a capitol C in its CSS :slight_smile:

I’ve made a few changes and additions to get you a little further. One problem I foresee is that the filtered / sorted elements will stay in place because the plugin relies a bit on a CSS flexbox layout (so the elements move to fill gaps).

MixItUp-vDBear.hype.zip (39.1 KB)