Fix FOUC ‘flash of unstyled content’ on WordPress
FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load. Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing…
Read MoreAdd a CSS class on a current active menu item
With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…
Read MoreWooCommerce Accordion Style Expand/Collapse Product Category Menu
Here is a jQuery solution for a WooCommerce accordion style menu for the product category menu that can be assigned with a WooCommerce widget, the menu works best when all product categories are assigned to a parent category. The Accordion menu will then expand and collapse on click with the first parent category appearing expanded,…
Read MoreOverride the Beaver Builder LightBox Plugin
Here is a quick guide on how to override the Beaver Builder Lightbox plugin in which you may wish to run another lightbox plugin instead. If you are using the Beaver Builder plugin, then add in your theme’s function.php add_filter( ‘fl_builder_override_lightbox’, ‘__return_true’ ); Additionally, if you are running the Beaver Builder Theme then you need…
Read MoreStyling Default Select DropDown Fields
The default dropdown select field form element is difficult to style in CSS alone – it needs a bit of jQuery love, here is a guide to add some cleaner styling to change default dropdown sort select fields. Then one with some jQuery magic… Using select2.js So the above select field was transformed by…
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 MoreAdd text block to a Gravity Form visible when sent as email
You may want to show arbitrary text on a Gravity Form that is not shown on the website but is sent on the email along with the other fields. In the Gravity Form add a paragraph field and add in your text in the advanced tab in the default value field – also give it a…
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. This post has 2 solutions the first is the simpler one with no CSS just some jQuery – the second one is more long…
Read More