jQuery

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.

Previously examples of this that I’ve found and used don’t always seem to work. I found an updated version that works well.

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.

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

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.

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

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.

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.

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

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

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

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

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

Create a simple background parallax with the following instructions.

Comes in handy when working with older devices.

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.

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.

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