CARD FILTER EXTENSION (FREE) - updated 3/7/24

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

CARD FILTER EXTENSION (FREE) - updated 3/7/24

Post by crispy68 »

Image

Description:
Based off a recent post on the forum (and being a bit bored) and a Pablo created template (where it was used), I created an extension you can use to create a simple filter for cards. Ideal for those who don't want to mess with adding any jQuery code. There are some manual steps you will need to do in creating the sort buttons, but this saves you the hassle of messing with code.

Features:
- Fade transition effect
- Sample project file included

Download Package:
Includes extension, a .pdf help file and sample WB project file.

PLEASE NOTE!!:
If you already own this extension, please visit the My Orders page and login to get the update. Please do NOT reorder it thru the store.

Info & Demo:
Web Builder Templates

--------------------------------------------------

If you like any of my extensions, I would appreciate your support!

See some of my Menu Extensions:
Go here!

Need an interesting Slider or Slideshow Extension, check these out!
Go Here!
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

Minor Update

1. Made the fade transition between All button and filter buttons smoother.

Please view the updated demo.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: CARD FILTER EXTENSION (FREE)

Post by wwonderfull »

@crispy68 thanks for making an extension out of the suggestion I had posted although @pablo did resolve much with his features.

Any solution for the cramped cards? I mean does it need to be adjusted on breakpoints from the pages of wwb or can it be done directly from the extension?

Image
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

The cards are controlled by the card container or grid being used. This gives you normal control over them. I did not add any breakpoints to my demo. The extension only helps create the filtering effect and to help those who don't understand code. I did add a smoother fading effect.
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: CARD FILTER EXTENSION (FREE)

Post by wwonderfull »

No problem it can be adjusted I think. But thanks for the extension. As it is purely JavaScript based as you mentioned it cuts the need of jQuery which is the future proof solution. That is also the reason I had suggested it but people thought why am I asking a feature which already exist but uses jQuery.

Other than that appreciate your effort for bringing this extension 👏 Brilliant effort.
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

There was no need to add manipulation of the cards within the extension when a card container can already do that. Much more flexibility this way. Actually, it does use jQuery versus vanilla javascript. If I get time maybe I'll look into converting it but it may require more code. Plus, I'm a hack when it comes to javascript.
User avatar
VictorKrs
 
 
Posts: 166
Joined: Sun May 17, 2020 8:08 pm

Thanks!: CARD FILTER EXTENSION (FREE)

Post by VictorKrs »

crispy68 wrote: Thu Feb 29, 2024 12:12 am Minor Update

1. Made the fade transition between All button and filter buttons smoother.

Please view the updated demo.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.

Crispy68!

Thank you for your work, for this and for all the other extensions that you have developed! And of course, for the excellent support of users (including me).
I think all WWB users will be glad to see your new developments! We are waiting! :)

With great respect, Victor!
User avatar
zinc
 
 
Posts: 2150
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by zinc »

Love it Ron!!!!

Soon I will be firing up WWB for my Books (As you know) as the project is coming to completion and need a website - So this little GEM comes very handy! THANK YOU!!!!!
Running WYSIWYG Web Builder since 2007...
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

New in version 1.0.1:

1. Added additional transition effect - slide
2. Minor code tweaks

See demo for updated demo.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.
User avatar
VictorKrs
 
 
Posts: 166
Joined: Sun May 17, 2020 8:08 pm

Re: CARD FILTER EXTENSION (FREE)

Post by VictorKrs »

crispy68 wrote: Fri Mar 01, 2024 12:15 am New in version 1.0.1:

1. Added additional transition effect - slide
2. Minor code tweaks

See demo for updated demo.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.

Hello, Crispy68!

Super! Everything works fine.

Thank you very much!
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: CARD FILTER EXTENSION (FREE)

Post by mixextra »

Crispy68,

you can also add to the manual an option that I use in one of my projects and can be useful for WWB users.

It is a multiple filter, i.e. when display in several filters can be added to one card.

An example of expanding the filter and colors:
https://mixextra.sk/Test2/wbwd-card-filter.html
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

Yes, I could look at adding that to the help.file. Would you mind sharing that project with me?
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: CARD FILTER EXTENSION (FREE)

Post by mixextra »

crispy68 wrote: Fri Mar 01, 2024 12:59 pm Yes, I could look at adding that to the help.file. Would you mind sharing that project with me?

Enjoy here is the wbs to download:
https://1drv.ms/u/s!AvUMMey_-ptLjG9FoZp ... d?e=Na53df
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

@mixextra,

Thanks! I have updated my demo to reflect a multi-category filter and will be adding it to the demo project included.
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE)

Post by crispy68 »

New in version 1.1.0:

1. Filter categories are entered into the extension
2. Eliminated need to enter a filter 'name' for each card

This update eliminates issue where adding a class to card overrides some CSS generated by the card. See demo for updated demo. Please make sure to read the help file.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.
User avatar
onlye
 
 
Posts: 368
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: CARD FILTER EXTENSION (FREE) - updated 3/7/24

Post by onlye »

Thanks Crispy. Very nice extension.
onlye
Gluckstadt, MS USA
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: CARD FILTER EXTENSION (FREE)

Post by mixextra »

crispy68 wrote: Thu Mar 07, 2024 11:09 pm New in version 1.1.0:

1. Filter categories are entered into the extension
2. Eliminated need to enter a filter 'name' for each card

See demo for updated demo. Please make sure to read the help file.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.
Please check the download version, still 1.0.1. ?
User avatar
VictorKrs
 
 
Posts: 166
Joined: Sun May 17, 2020 8:08 pm

Re: CARD FILTER EXTENSION (FREE)

Post by VictorKrs »

mixextra wrote: Sun Mar 10, 2024 11:22 am
crispy68 wrote: Thu Mar 07, 2024 11:09 pm New in version 1.1.0:

1. Filter categories are entered into the extension
2. Eliminated need to enter a filter 'name' for each card

See demo for updated demo. Please make sure to read the help file.

!! IMPORTANT !!
If you already own any previous versions of the extension, please visit the My Orders page and login to get the update rather than re-purchasing it thru the store.
Please check the download version, still 1.0.1. ?

I agree! On the website version 1.0.1.
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: CARD FILTER EXTENSION (FREE) - updated 3/7/24

Post by crispy68 »

Sorry guys, it's been fixed now. Thanks!
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: CARD FILTER EXTENSION (FREE) - updated 3/7/24

Post by mixextra »

Thanks, category management in one place is another useful improvement.
Post Reply