Hi,
There are a few versions, which one are you using?.
Also it helps if you post and example project with the issue…
Ta.
Hi Mark,
when I use your document, the filter is absolutely perfect!
The layout looks like this.
I need the filter for desktop, for iPhone and Ipad. That’s why I want to finish the layouts in hype.
if I add an additional layout in your hype document (MarkHunte-Filter_Elements.hype.zip (274,4 KB)
), the listing of the filter changes. Then it looks like that.
I can not find the mistake. I do not have any knowledge of javascript and css. I started to program something here with hype, so I do not know where to start searching. Do you, or anyone have an idea for me?
I would like to use the solution of various layouts in the project here. http://nextgreen.design/
Hype3_nextgreen.design.hype.zip (535,0 KB)
I probably will add anything I find there so others can benefit.
The initial issue is simply the jQuery picking up all item elements within the projects and the code accounting for them later on when it should not.
If we only ask the current scene to search for the items then we should only account for those and not others on another layout.
This is a simple fix ( I think)
We can add my extension to the head file ( little over kill) and use it's scene element property.
//--GET SCENE INFO
var sceneInfo = hypeDocument.sceneInfo()
//--GET SCENE ELEMENT
var current_sceneElement = sceneInfo.sceneElement
//--GET ALL THE ITEM ELEMENTS
var elementItems = current_sceneElement.querySelectorAll("div.item.col-md-3") // $("div.item.col-md-3");
//--GET ALL THE TAG BUTTON ELEMENTS
var activeTagList = current_sceneElement.querySelectorAll("div.HYPE_element.tag.show") //$("div.HYPE_element.tag.show");
mh_Tags_v5.hype.zip (275.4 KB)
But there appears to be another issue. The second layout hides all items when any button is selected??
The second issue was simply we are using the IDs of the buttons to workout which button data type we want to search for.
When we create a new layout the ids are wiped and given Hype ids. The is normal.
IDs have to be unique.
When we encounter this we need to use another method. We commonly use class names.
So all we have to do is give the buttons another class name in the identity inspector.
They already have an extra class called ‘tag’. we add a new class which is the same name we had used for the button/s id.
We the just change the line in the code.
var tagged =$(tagValue).attr('id');
to
var tagged =tagValue.classList[2];
This singles out second class name in the class name list of a button.
When we give .i.e the PHP button the class name of PHP along with it’s tag class name
The button actually ends up with 3 class names.
0, hype generated class name ( at run time)
1, tag
2,PHP
mh_Tags_v5.0.1.hype.zip (279.5 KB)
cool …I try to understand that …
Hi Mark,
Thank you for your support. Through your help, I have progressed.
I took pictures for myself to better understand your programming.
1 Like
Hi, is there a way to adjust the code so that when selecting for example 2 buttons it will show both associated elements (2 different ID’s)?
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.