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. View the code on Gist. If you know the…
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