Filter Elements


#21

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)


(Mark Hunte) #22

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…


#23

Cheers Mark


#24

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


(spark) #25

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?


(Mark Hunte) #26

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

(Loves Hype) #27

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


(Mark Hunte) #28

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.


(Loves Hype) #29

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


(Mark Hunte) #30

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…