Make Beaver Themer Header Stick And Shrink At Any Size
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 js as it runs after and can be redeclared in javascript. Create a js file and enqueue it to your theme and past the content of…
Read MorejQuery Document Ready Function For 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, a jQuery document ready function is expressed as below. $(document).ready(function(){ }); jQuery document ready 1st…
Read MoreSticking 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 simple CSS property position:sticky You would apply some CSS to an element that you want…
Read MoreDisplay CSS Animations When In Browser Viewport
CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it. Here’s where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run…
Read MoreAdd Link Tag to Whole Column in Beaver Builder Layout
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. It is preferable to probably just redo the layout as html from scratch in a html module, but if you need to present the layout in…
Read MorejQuery replace an image on click
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 class=”button-container”> <button class=”black-button”></button> <button class=”red-button”></button> <button class=”blue-button”></button> <button class=”yellow-button”></button> </div> <img id=”change-image” src=”/wp-content/uploads/2018/09/black.jpg” alt=”Black Image” /> jQuery jQuery(document).ready(function($){ $(‘.black-button’).on({…
Read MoreAdding 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 the overhead of using a slider plugin. Image Preparation Generally you’ll want to optimize your…
Read MoreAnchor Link Offset to Other Pages with Fixed Header Size
Here is a snippet of code that will link to a anchor link on another page with an offset which allows for a fixed header size, so the link appears just below the header. The code snippet is documented. View the code on Gist.
Read MoreUse jQuery SlideToggle to Show/Hide Multiple Rows or Divs
In this tutorial a set of links control the visibility of a number of corresponding divs or rows. It uses jQuery’s slideUp and slideToggle sliding effects. I have used a list as the triggers that will open close the corresponding div/row – clicking a different list item will close the open content and open the relevant…
Read MoreFind and Trump Z-Index on all Elements on a Page with jQuery
The jQuery snippet below will search all HTML elements on a page and find the element with the highest z-index value and capture that value in a variable – then using the .css function in jQuery, assign and increment that value by 1 to a selector you have chosen.
Read More