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 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");
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!
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.
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.