Here goes Mark
its a bit of a mess , i am linking to other timelines to get around the single selection option.
the result is to end with 5 or 6 products after filtering.
Also cant get the back button to reset your selection if you start again.
Here hoping you can sort.
Cheers
Is there a way to set it so that only one tag can be selected a time? i.e. if a user clicks one tag, and then clicks a second tag, the first tag will automatically deselect?
Also, I’m not sure how to use the reset setting? What exactly does setting it to reset: false mean as opposed to true? Is there a way to make a button that, when clicked, resets all tags?
In the filter cod I would surround the first if condition with another if condition for the reset button calling it.
This stops the button changing colour.
if ( element.id !== "reset") {
//--SET BUTTON COLOUR
....
longtime. I didn’t read your code but I saw that there was a third row problem. Back in the days when addressing the screen memory directly we often had to convert index to x/y-coordinates and vice versa.
Thanks for the math.
I did solve the new row issue a while back, if that what you are refering to.
But this is all just examples to help people along their way and I expect there would be a lot of changes that they would want for thier ideal setup.
It's funny every now and then I am asked to come back to this code and help.. and have to drag my memory through it to understand what I did, why and my general thought process..
It reminds me I must comment my code better for my future self.
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");