WP-Mix

A fresh mix of code snippets and tutorials

Category Archive: JavaScript

Posts about JavaScript

Page 2 of 5

jQuery Auto Resize Multiple Textareas

The User Notes Widget that’s included in my Dashboard Widgets Suite plugin enables users to edit notes right on the WP Dashboard. To make things extra awesome, each note automatically expands as the user types more lines of text. This post explains how I achieved this trick, aka multiple auto-resize textareas.

Replace contenteditable with textarea

Working on my WordPress plugin, Dashboard Widgets Suite, I needed a solid way of replacing contenteditable with a textarea on form submit. Here is a simple solution along with some bonus notes on dealing with certain HTML tags.

jQuery check inline CSS property

Working on my WordPress plugin, Dashboard Widgets Suite, I needed a quick function to check a property defined via the inline style attribute on a specific element. Here is an easy, plug-n-play solution that works great.

Include Google jQuery with Local Fallback

Here’s a nice snippet of JavaScript for including Google-hosted jQuery with fallback.

jQuery Add / Remove Class

Adding and removing classes to/from HTML elements is super-easy with jQuery. Here is a quick tutorial that explains how it’s done. The code snippets are copy & paste friendly, so you can grab, gulp, and go.

jQuery Fade Out Element

Here is a simple jQuery technique to fade out any element on the page. It uses jQuery’s .hide() method to animate the fade-out of the specified element.

jQuery Get Number of Paragraphs

Quick jQuery code snippet to get the number of paragraphs in the specified element. The technique can be modified easily to get the number of any element.

jQuery Truncate Text

Here are a few choice code snippets to truncate text with jQuery. Useful for fine-tuning responsive layouts, or just truncating strings of text in general.

Break Out of Frames

This tutorial explains some ways to use JavaScript to prevent your pages from being framed. Also known as “frame busting” or “breaking out of frames”.

Auto-Focus Form Fields with jQuery

When you load a page that contains a form, it may be useful to automatically place the user’s cursor in the first form field. This post explains how to do autofocus with jQuery.

Basic Code for Image Slider

Here is the basic code required for making a simple image slider. It provides a good starting point for rolling your own sliders, carousels, and so forth.

jQuery Add Another Image Link

This code snippet is taken from my plugin, User Submitted Posts. It displays a link that users may click to add another file-upload input field.