Bricks Grid View Switcher - Native JS
The video demonstrates a method for switching Grid views via an accessible "Radio" set, utilizing Bricks Builder, Custom JavaScript, and CSS. This approach modifies the Grid CSS properties to adjust the views instead of hiding/showing content. Additionally, it incorporates localStorage to preserve the state.
I would love any feedback from users who have comments or ideas to improve on this.
[EDIT] at 04:53 I say "Check for focus", I meant to say "Check for Checked status"
00:00 Intro
03:15 DOM Structure for Radio inputs (Switcher)
07:04 DOM Structure for the main layout grid
10:29 Bricks structure for the "Controls"
15:43 JavaScript for the controls
27:22 Bricks Structure for the Layout Grid - Singl query loop
29:46 CSS for the Layout Grid
33:05 CSS for the Controls - Sorry this should have been after the JS :)
39:25 Reorganising the Controls structure to work with FireFox
43:00 Reflow triggering for Amimation to work properly
45:20 Changing the Carh layout for different views
Link to template used for this demo:
https://wpeasy.sharepoint.com/:u:/s/W...
Watch video Bricks Grid View Switcher - Native JS online without registration, duration hours minute second in high quality. This video was added by user WP Easy 21 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 51 once and liked it 2 people.