it already does?
Sorry, I meant that if I select for example Javascript and PHP, it shows only elements which have both ID’s (Javascript and PHP), but could it be fine-tuned so that it shows all elements which have either Javascript ID or PHP ID?
Hello, the current demo is set to Exclusive (only elements that contain ALL of the tags will be shown), I would need help to set it to Inclusive (all elements that contain ANY of tags will be shown). I have tried many different ways but cannot get it right. Any help would be appreciated!
This will do the trick if someone else is looking for it:
change:
if ( counter == dataListItems.length ){
(thisItem).show();
} else {
(thisItem).hide();
}
to
if ( counter ){
(thisItem).show();
} else {
(thisItem).hide();
}
Hi sorry, I have not had time to look at this…
from memory that likely will not work as expected.
If I get a chance I may have a look. But the code may have to be completly changed to a different logic approuch.
I’ve been trying to do the “inclusive” behavior as well with no success any help would be great, here’s how the code reads in my build:
if ( counter == dataListItems.length ){
$(thisItem).show();
animateArray.push($(thisItem));
}else{
$(thisItem).hide();
}
counter =0;
});Would it be possible to post a zip of your .hype document? The code snippet itself isn’t quite enough to go on. Thanks!
basically have one tag per each item would like to add from the menu other than subtract so more items would stack up as you select more menu items
1 Like
I just attached to the response, new to the forum process Thank you so much in advance. editing the post with files and thoughts
1 Like
Sometimes after a long time away from a project and even if you wrote it logical answers are not always obvious at a glance. ( probably bad commenting and code layout 
)
Anyway it would seem to me and I have not looked too deeply… that if we are looking to see if counter is equal to the length of dataListItems this is where we are looking for a match of all items.
So logic dictates that if counter is greater than 0 then we have at least one match.
so change if ( counter == dataListItems.length ){
to
if ( counter > 0 ){
I should also add that this only works if the data-item-tags are a single item and not a list like in my original.
So this should work.
Any one wanting this will also likely want you use the reset code. @studioblake has added this to his version and also calls it on a Main Timeline keyframe action to initially hide all items. Which is the point of this type of version, that the items are not showing at the start.
( note there is a reset version above for the use in multi tag items. )
@studioblake has done a nice job of implementing the suggestions above. 
1 Like
sort-component-demo.hype.zip (133.7 KB)
Here’s the latest with the reset and clear functionality. My next hurdle is:
Issue 1: Category selections need to persist after leaving and returning to component URL.
After clicking an item link, and returning (back) from the URL, the ideal result would be that the user selections would persist.
Issue2: Component needs to keep items selected arrangement when the browser window is resized.
After the user has made the “Category” selections, and the browse window is resized the “Item” sort arrangement is lost. The sort arrangement is restored when the user deselects and selects a “Category” again.
This may fall in the realm of Local storage.
Any help would be appreciated.
There are a couple of new threads regarding localStorage. Please have a look at them.
This seems to be related to the project being set to to scale/ responsive.
I think the original projects above missed this because they do not scale or they may use layouts.
Scaling does seem to throw up issues with this.
I added this code to hide all elements on resize ( found some code that also try not to fire it too often on resize)
You can add it to the bottom of the init() function.
var elementItems = document.querySelectorAll("div.item.col-md-3") // $("div.item.col-md-3");
var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
elementItems.forEach(myFunction1);
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
hypeDocument.functions().filter(hypeDocument, element, event)
elementItems.forEach(myFunction2)
}
}
function myFunction1(item, index) {
item.style.opacity= 0
}
function myFunction2(item, index) {
item.style.opacity= 1
}
Another thing is the above projects did not have click actions on the info elements.
Having so throws up another bug with how display none ( show/hide) is working here.
I suspect this is partly due to use of jQuery ( and if I ever had the inclination I would rewrite this all without it)
The show/hide ( display ) should hide the elements so they are not visible to the user facing display and not take up space in the DOM. This means if we hover the mouse over one when it has display none/hide we should not get the little hand indicating inactivity.
But we do. likely because how we are using JQuery - hype hybrid code.
I found we need to use:
thisItem.parentNode.style.display ='none'
and
thisItem.parentNode.style.display ='block'
There are other bugs like when resizing the Scene may change to the selected tags background colour !??.
Again I suspect JQuery hybriding here..
The fixes I have here are just using organic coding to fix fires, so not perfect..
I could re write the whole code without JQuery which should not really be too hard ( not even sure why I elected to use it in the first place )
I would also move the data attributes to Hype's data attribute section.
But feel that I do not really want to spend the time on this.
The code above is a tip & trick and the sole intent is to show how to do some stuff in concept.
1 Like