Create a content flyout overlay in Beaver Themer Layout Header

Overlay Flyout Beaver Builder

This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the…

Make Beaver Themer Sticky Header And Shrink At Any Size

Beaver Themer Header Shrink Stick

You can make the Beaver Themer header stick and shrink at any viewport width by overriding the default fl-theme-builder-header-layout.js that comes with Beaver Themer, your version will overrule the Themer javascript as it runs after and can be re-declared in javascript.…

jQuery Document Ready Function For WordPress

Document Ready Wordpress

You can set up a jQuery document ready function for use with WordPress and use the jQuery library that WordPress ships with rather than use another one. Here are three ways to use jQuery document ready function with WordPress. Usually,…

Sticking An Element To The Top Of The Browser After Scroll

You can stick an element to the head of the browser after a user has scrolled past it with either pure CSS or jQuery with the help of Waypoints and Sticky Elements. CSS You can actually do this with a…

Add Link Tag to Whole Column in Beaver Builder Layout

Wrap Column In Link

To add a link to a whole column in a Beaver Builder layout you need to use some jQuery to add the link tag markup to make the whole column clickable. This post has 2 solutions the first is the…

jQuery replace an image on click

swap image on button click with jquery

jQuery replace an image on click- example below, this is a method to swap numerous images in HTML by manipulating the images src attribute value from the click of another element such as a button. HTML <div> <button></button> <button></button> <button></button> <button></button>…

Adding Multiple Fading Images To A Background with jQuery

You can add multiple sliding/fading images to a background HTML element using the Backstretch jQuery plugin, this is great if you just want to alternate a number of images behind another web page element similar to a slider but without…

Anchor Link Offset to Other Pages with Fixed Header Size

anchor-offset-links

Here is a snippet of code that will link to an anchor link on another page with a fixed offset which allows for a fixed header size, so the link appears further down below the header of further down the…