Filter Elements

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

sample.hypetemplate.zip (366.0 KB)

The reset part probably need the class 'show' toggled off from the buttons.

So have the MTB and Road buttons run this as a rese first,

 			 var showList =  $("div.HYPE_element.tag.show");
	 
	 $.each(showList, function( index, item ) {
 $(this).toggleClass( "show" );
	 
	 });

Then the filter()

34

This was a quick look..

Yep.. which makes it a bit difficult to workout what you are doing and want.

Can you maybe put a simplified example up and explain how it should work..

Cheers Mark

Hi Mark
it is a simple version of something like I am trying to setup
is this possible .

https://www.evanscycles.com/shoe-finder?utm_source=direct&utm_campaign=buying-guide_banner_shoe-finder

Hi Mark,

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?

To be honest the last few post I did in this give enough to work this out. It should be just a matter of adjusting the code I indicate here

I do not think the reset() in willam's example was in my Original.

But if I did have a reset button I would simple (hack) it like this.

reset.hype.zip (204.0 KB)

I new reset button with the id of 'reset' to call the function;

 var showList =  $("div.HYPE_element.tag.show");
	 
	$.each(showList, function( index, item ) {
 $(this).toggleClass( "show" );
 $(this).css("background-color", "white")
	 
	 });
	 
	 hypeDocument.functions().filter(hypeDocument, element, event)

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
....

Hello Mark,

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.

The math behind the operation is:

row    = Math.floor (index / tilesPerRow)
column = index % tilesPerRow

Input:
Index is the current tile number (0-based)
tilesPerRow is the number of tiles per row

Output:
row needs to be multipled by (tileWidth+tileMargin)
column needs to be multipled by (tileHeight+tileMargin)

if tilesPerRow has to be responsive and you got fixed tileWidth then

tilesPerRow = containerWidth / tileWidth

Hope this helps.

Regards from Berlin

Hi, I hope you are well.

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.

Yes, just saw that the post I was referring to is ages old. I am rusty :slight_smile:

1 Like

This does not really help me understand what your goal is, too many moving parts for me to try and guess..

I think I have given enough ideas in the thread to help you through though..

Hi Mark,
Thanks for your explanation of your Filter, https://forums.tumult.com/t/filter-elements/3685

I’m trying to add a responsive layout (iPad Hochformat) to your document.

The entire design then changes.
The distances in the first layout change. And in the new layout the “tag” `s are no longer displayed.

When I delete the new layout (iPad Hochformat), everything is fine again.

Do you have any idea for me where to start so I can add responsive layout?

Thank you very much best regards from Cologne

Ralf

Hi,

There are a few versions, which one are you using?.

Also it helps if you post and example project with the issue…

Ta.

I took it from your version … TagFilter_v4.hype.zip (273,5 KB)
TagFilter_v4.hypetemplate

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)?