JavaScript

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.

How to switch tabs every x seconds when the tabs element is scrolled into view.

With Bricks' Nestable tab element, here's how we can set which tab is active by default.

The next major version of WordPress, 6.3 includes a loading strategy for scripts so we can easily specify that the scripts have defer or async…

This Pro tutorial provides the steps to use Grid.js in a WordPress site powered by Bricks builder. Grid.js is a lightweight and performant JavaScript library…

We look at one way to move the color palette selector in the builder from the bottom of the popup to the top.

This Pro tutorial provides the steps to update the text of a sticky div with the title of the post that is hovered on the…

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…

In the Bricks Facebook group a user asks: I need to create popups to expend the text (eg. read more). I wonder if I have…

In certain situations like using ScrollSmoother, you may be looking to disable smooth scrolling functionality that’s built into Bricks.

This Pro tutorial provides the JavaScript code that will automatically switch to the tab when using Nestable Tabs elements based on the "tab" URL parameter…

This Pro tutorial provides the steps to move WP Grid Builder's filters inside the Bricks' native Offcanvas on smaller viewport widths. Let's work with the…

This Pro tutorial shows how to make the tabs of Tabs (Nestable) elements active on hover in Bricks. Step 1 Add one or more Tabs…

Looking to have links output by RSS Block (in the block editor) in new tab/window when using Bricks? Add this in your Bricks template/Page at…

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…

In this tutorial, we'll learn how to sync two nestable sliders in Bricks: one will be the main slider and the other one will be…

This Pro tutorial provides the code for opening submenus with click instead of hover in Bricks. Step 1 Add this in child theme's style.css: Step…

Bricks child theme's functions.php comes with code to enqueue (load) style.css on the front end. What if you want to load a custom JavaScript file…

In this tutorial, we'll learn how to dynamically change the text of a basic text element based on the viewport width in Bricks. Introduction Sometimes…