jQuery 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 MoreStyling WooCommerce Default DropDown Sort Select 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 the WooCommerces default dropdown sort select field – which you can apply to any select field too. Then one with some jQuery…
Read MoreAdding a loading icon spinner on Search & Filter Pro Archive Page
Search & Filter Pro is a great WordPress filter tool, here is a guide to add a loading icon animation whilst the page is ajax refreshed when the user has selected a filter request and is waiting for the page to load the new results. The plugin author has made 2 event callbacks where you…
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 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 page. The code snippet is documented. jQuery(document).ready(function($) { // set a variable for the anchor…
Read MoreImage Carousel Thumbnail Slider with ACF Gallery Field in WordPress
Here is a guide on how to make an image carousel thumbnail slider with ACF in WordPress using the ACF gallery field. Lightslider, a lightweight image slider seems to fit the bill perfectly – I need it to just display simple thumbnails below the main image which on click/touch show the image in the main slide…
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 MoreAdd Scroll Back to Top of page Functionality in WordPress
How to add a scroll back to top of page in WordPress? – I am sure there are a dime a dozen tutorials and plugins on this subject – here is the solution I went with. jQuery scrollToTop was my choice of poison, download and install the scrollToTop.min.js file in your theme’s js folder and create an init…
Read MoreResponsive Layouts – Going from a Tab Layout to an Accordion in WordPress
There is a nice responsive tabs plugin which is jQuery based called aptly called Responsive-Tabs, it handles changing the layout from a tabbed contant structure to an accordion layout at a set media query size. The accordion layout is better suited for smaller mobile/tablet sizes. Going from tab to accordion… To a smaller viewport setting… Basic HTML…
Read MoreCreate Tabbed Content in WordPress with ACF Repeater and Tabslet
This tutorial walks through how to create a Tabbed content section in WordPress using Advanced Custom Fields and Tabslet. ACF (Advanced Custom Fields) Pro comes with an addon called the Repeater field which allows a user to perpetually add additional rows of data of certain custom fields to a page or post (or custom post type) in WordPress. This can be…
Read More