June 08, 2022
In the attached example, an each function is used to equalize the heights of the containers based on the width of the columns so the images will show in equal size.
This allows for the same type of element to be setup multiple ways without additional classes / css.Read More
In the past I’ve manually changed the content of the jquery file (I know, bad bad bad), or used a plugin to make this editable for me (also, bad bad bad). This snippet helps avoid those two methods and lets the edit occur within your theme.Read More
When adding content, sometimes it’s necessary to add in extra non-breaking spaces to adjust spacing on desktop. Even some plugins (Shortcodes Ultimate) will create additional paragraph tags in the content area that cannot be removed from the editor.Read More
It’s unfortunate that the Time Field in Gravity Forms does not have more custom options available.
Contrarily, the Date Field, allows for a calendar icon, and drop downs, but the Time Field doesn’t have a default placeholder option to populate the current time, or an alternate view to allow for drop downs showing 12 or 24 hour time.
So I had to turn to jQuery…Read More
I’ve been running into “Uncaught referenceError: jQuery is not defined” a lot lately when working with scripts and plugins that I’ve used for years. It’s unbelievably annoying to have something that’s worked one way for most of my career to suddenly stop working and bring up errors.
Nonetheless, I’ve found a solution!Read More
I hate anchor tags, and I hate even more that there isn’t an easy point / click way for them to be added into a website using the WordPress editor.
Nonetheless, clients request them a lot, and they don’t like the “jumping” that they cause when the anchor links are on the same page.Read More
Another way to style images dynamically based on window sizes is shown below.
If you’re using images that are set to a 2:1 ratio (where width is two times greater than the height), you can use the example below to dynamically scale the height of the containers as windows are loaded / resized.Read More
This is a continued modification of my earlier post for toggling multiple embedded YouTube videos into a larger playing div.
Since I was already using Posts to embed the videos, enabling a Featured Image for a Poster, and using the Content editor for a text overlay was a simple feat to accomplish.Read More
Using buttons and jQuery to filter and sort Posts on a website can be fun! Unfortunately, as your content grows, it can also become space consuming, and difficult to read.
Convert a list to a dropdown, and toggle the display of the items via class with a jQuery function.Read More
I recently needed to create a dynamic table for a visual aesthetic. A few background images had been strategically placed alongside the content, and the grid provided structure and flow. Using this bit of code, I was able to target a div to populate an empty table, and style it accordingly.Read More
Embedded fonts that are being loaded from a server / another website, or file, will sometimes load after the main css file, and after the page is loaded, resulting in a weird display. Typekit fonts can be loaded faster using a timeout script.Read More
When Themes are upgraded in Shopify, script libraries are upgraded. Depending on the level of expertise of the individual that developed your Theme, this means errors can arise. If your mobile navigation stops working, you may need to find your scripts.js.liquid file and look for errors in syntax and coding. Check your console to be sure which file you should edit, and always make a back up!Read More