Filter Elements

Nice work Mark. Simple and elegant.

D

1 Like

Thanks @DBear,

Still working on it.

I have a reset working now. Just about to start on populating the buttons automatically.

I want to do it so you have a choice of auto or your own.

Mark you did a great job - congratulation. I tried to add a third line and it short well when I click on a button. Nevertheless as soon I click on the same button again to reset the third line get added to the second line. Unfortunately I am a greenhorn in terms of Java Script. Therefore could you please give me a hint how I can fix this problem.

Thank you in advance for your help
Alain

Can you post what you have.

Cheers

here we go

third line.hype.zip (158.1 KB)

Ok. Took me a minute to refresh my memory of this.

I have changed a bit of the code to hopefully account for new rows better.

So what should happen is when we get a row of six elements, (columnCounter >= columnCount) we add 291 pixels to the top property var. And set the leftproperty to back to 45.
We then can reset the column counter to 0.

Look at the code it should make more sense.

TagFilter_v4.hypetemplate.zip (203.0 KB)

3 Likes

Mark - this is perfect. Works absolutely great - exactly what I was looking for. Thank you very much for your fast help.

Hey Mark, the stuff you’re doing to extend Tagsort is really neat. If you’re interested, you should contribute to the GitHub project because I’d love to get your work into the plugin itself.

Came back on this @MarkHunte.
Looking for a solution where i can counting in numbers the filtered objects.
So like having a amount of all tag-objects and then subtract the outfiltered ones and give the result back in a div as text.
How would that be looking in code?

Olof

@Olof

Just above where the sort animation code is add this code.

We simply need to get the existing count of the animateArray and elementItems Arrays.

var shown = animateArray.length ;
var hidden = elementItems.length ;
console.log("shown " + shown);
console.log("hidden " +  ( hidden - shown)); 
	 
	  //-- SORT ANIMATION array

That easy? Wow. Thank you.

i am using this code


and find it great, but i need a amendment.
At present you can select 1 or more options from the tag searches but i need t
the user to click on 1 choice and the other options grewy
out of hide so they cant be selected.
Can someone show me the code to get this up a running.
Cheers

A little to the code to detect button color, change pointer events.

Change :

		 //--SET BUTTON COLOUR
	var buttonBackgroundColor =  element.style.backgroundColor;
	
	if (buttonBackgroundColor == "white") {

element.style.backgroundColor = "pink";

 
}else{

element.style.backgroundColor = "white";

}

To

         //--SET BUTTON COLOUR

 var GroupButtons = $("div.tag");
    	  
    	var buttonBackgroundColor =  element.style.backgroundColor;
   
    	if (buttonBackgroundColor == "white" || buttonBackgroundColor == "grey") {
     
    	 
    	 $.each(GroupButtons, function( index, value ) {
    	 
    	
    	 
    	$(value).css("background-Color", "grey");
    	 $(value).css("pointer-events", "none");
    	
    	 });
    element.style.backgroundColor = "pink";
    element.style.pointerEvents = "auto";
     
    }else{

     $.each(GroupButtons, function( index, value ) {
    	 
    	
    	 
    	$(value).css("background-Color", "white");
    	 $(value).css("pointer-events", "auto");
    	
    	 });

    }

Cheers Mark
Tried and cant seem to get it to work.
Any chance you could send the file amended

Update … Oops posted wrong one…

:stuck_out_tongue_winking_eye:Tag_Single_Filter.hypetemplate.zip (203.8 KB)

Cheers Mark
Thanks for solving this

1 Like

thanks again Mark for the help.
getting stuck with what i am trying to achevie.
I need to set up a smart filter form and this seems to solve most of the problem, but not quite.
i need the user to select options say
male, female the result shows options
one, two, three then shows more options
one, two, three, four the result of this shows a list of the tags attached.
the reason for the one click was only one option can be choosen at a time to reveal the next result options.
hope I have explained ok can this be acheived .
Cheers

Are you able to post your Hype project or an example

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