jQuery

A fixed header can cause auto-scroll content to be covered. Use this function to offset the scroll to the height of the fixed container.

Read More

Ideal for working with plugins where the fields are not available for editing / customization.

Read More

Count Divs with jQuery

jQuery

December 25, 2019

I’ve been working with a few plugins lately that have templates, but do not allow for editing for the loop, so I’ve been unable to add counters with PHP.

Read More

Press play on the video when the slider loads to address the issue.

jQuery('#banner').on('init', function(ev, el){
jQuery('.videoWrapper').each(function () {
this.play();
});
});

Source.

Read More

Autosort data on a page from a hash URL using the following snippet and related HTML.

Read More

Working with fixed headers and absolute-positioned drop-down menus can be difficult to adjust with CSS alone.

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

Slick Slider has pause and play functions available, but they are not easily enabled. 

Read More

iOS Hover Events Fix

jQuery

February 13, 2019

iOS devices when programmed to use “hover” with css will often ignore this effect in handheld and touchscreen devices, forcing the user to double-click in order to reveal toggled or hidden content.

Read More

Simple jQuery function to toggle between multiple containers on click.Filter links HTML:

Read More

Slick Slider is a great plugin for creating custom carousels on websites. It has a built in navigation option for the carousel as well: asNavFor.

Read More

There is probably a simpler way to do this, but so far this method works for me …

Read More

Comes in handy if you’re adding links to multiple external sources or components, such as locations, company websites, or PDFs.

Read More

This example works great with Isotope, Masonry, and jQuery filters.

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

Use the following snippet to identify the tallest div in the sequence and force all the same level divs to match height with it.

Read More

Smooth Scrolling

jQuery

December 27, 2017

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

If your design is in a tiled layout, or you have a series of blog entries in rows and would like to show the “Read More” buttons below the lead-in text at the same height, this is a pretty straight-forward fix.

Read More

jSON Instagram Slider

jQuery

October 25, 2017

Create a custom Instagram slider for your site using jSON and the following instructions…

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

Using tiled image layouts in responsive design can sometimes be tricky to set the height, especially if you want all of the image containers to consistently remain the same height.

Read More

Check all values of a div, by class name, and return only values matching the search criteria. Below is an example where this search filter is applied to a staff directory.

Read More

Super simple jQuery data filter, that can easily be made dynamic using a query like so:

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

Create your own media page from posts with embedded YouTube videos, and toggle the list of videos into a larger div to play the content using the steps below.

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

When the order of elements in your desktop layout differs from the order of items in your mobile layout, it might be prudent to load items based on the screen size using a jQuery if statement.

Read More

A simple alternative to using HTML5 audio controls. Link directly to an audio file in the page, or use this method within a loop.

Read More

Can bet setup to occur automatically onload. If there is a large menu section that you’d like visitors to scroll past on subpages.

Read More

Sourced here, and also has a great JSFiddle to demonstrate the functionality:

Read More

Change Text on Click

jQuery

December 08, 2015

Toggle text back and forth from a selected phrase using this function

Read More

I used this with my Fake Archives for Multiple Authors in order to hide the child containers.

Read More

Create a simple background parallax with the following instructions.

Read More

Target Mobile Devices

jQuery

January 22, 2015

Comes in handy when working with older devices.

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

Adjust Div Size with jQuery

jQuery

September 04, 2014

When working with background images, parallax websites, or full width and height sliders, you might find the need to have a div adjust to be the full width or height of the viewport automagically. This code will help you find your way. Sourced from the comments on css-tricks.com

Read More

Working with Shopify, I found this bit of code, and was able to setup auto-switching full screen background images. You can use this to setup multiple background images that will change over automagically on page load.

Read More
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.