jQuery Mix

On Vacation..

Jeff Starr — Sat, 26 Sep 2009 22:37:56 +0000

Just a note to all new subscribers and visitors, I will be out of town and away from the computer from Saturday, September 26th until Tuesday, October 6th. I will try to check in with jQuery Mix at least a few times during that time to approve any submissions, respond to comments, and maybe even post a quick article ;) So stay tuned, there is much more awesome jQuery goodness in the “mix” and planned for the future.

Until then, I’ll be getting lost in downtown Manhattan =)

Auto-Resize Textareas

Jeff Starr — Sat, 26 Sep 2009 22:25:53 +0000

James Padolsey gives us an easy way to automatically resize textareas with the autoResize plugin. The autoResize plugin will increase the height of the textarea as the user continues to type. Once the preset limit is reached, the textarea stops expanding and displays a scrollbar for the remainder of the input. Upon deletion of the input text, the textarea returns to its original, default size.

This plugin is very straightforward, and there are plenty of options available:

onResize – callback function fired every time the textarea is resized
animate – enable/disable animation of the expanding textarea
animateDuration – millisecond duration of animation, default is 150
animateCallback – callback function fired every time an animation completes
extraSpace – pixel value to be added to the total necessary height when applied to the textarea
limit – once the textarea reaches this height it will stop expanding, default is 1000

The autoResize plugin has been been tested successfully in IE6/7, FF2/3, Opera9, Safari3 & Chrome.

Create a Stylesheet Switcher with jQuery and PHP

Jeff Starr — Wed, 23 Sep 2009 06:16:15 +0000

James Padolsey shares an excellent tutorial at nettuts on how to create an amazing jQuery stylesheet switcher. Enabling your visitors to switch styles on the fly is great for delivering custom or specialty interfaces. Some good examples of use:

Provide visitors with a simplified, highly usable theme (large fonts, strong contrast, etc.)
Create separate themes for “night” (dark design) and “day” (lighter design)
Provide “themed” interfaces based on mood, character, etc.

The tutorial explains each of the following steps in good detail, making it easy to understand and follow along:

The HTML
The CSS (two different layouts provided: “day” and “night”)
Small PHP snippet
The jQuery

The style switcher built in this tutorial is easy to implement, unobtrusive, and completely degradable. Cookies are used to remember the user’s preference, and best of all, the jQuery is used to progressively enhance the switcher, which works perfectly fine with JavaScript disabled. jQuery is used to enhance the switching functionality with a smooth, fading transition effect between styles. It also enables the styles to be switched without a page refresh.

In short, 100% awesome. I look forward to using it for my next theme at my personal site, Perishable Press.

Pagination with jQuery, MySQL and PHP

Jeff Starr — Tue, 22 Sep 2009 01:06:03 +0000

Srinivas Tamada over at 9Lessons comes through with yet another concise, no-frills tutorial on how to implement pagination with jQuery, MySQL, and PHP. As is custom at 9Lessons, the tutorial is aimed at those who already familiar with the fine art of web development and focuses on providing only the code required to get things done. As they say on the big screen, “just the facts, ma’am.”

This highly useful tutorial includes the following components:

Database configuration (table creation)
JavaScript code
Three PHP scripts
And some CSS

Looking at the demo, everything looks nice and tight — a good implementation of Ajax-style functionality for pagination.

Note that this technique does no degrade gracefully — JavaScript is required in the user’s browser for pagination to work.

Multiple File Uploads with Progress Bar

Jeff Starr — Tue, 22 Sep 2009 00:41:13 +0000

Web Developer Plus gives us a much-needed tutorial on uploading multiple files with progress bars. The tutorial provides everything you need to implement a file-upload form that allows for multiple-file selection using Ctrl/Shift keys. Each of the selected files displays its own progress bar while they are being uploaded.

The tutorial is very straightforward, providing a brief explanation of the JavaScript involved, and provides the following ingredients:

The folder structure
The HTML structure
The CSS styles
The JavaScript

Overall, a good technique that contributes a very useful tool for working with multiple file uploads.

Note: The technique requires the SWFUpload jQuery Plugin, which means that Flash is required for the script to work properly. The author suggests an alternate upload option for users without Flash.

jQuery and Google Maps Tutorial: #1 Basics

marc grabanski — Tue, 22 Sep 2009 00:08:52 +0000

Use jQuery and the Google Maps API to create your own map application.

jQuery Before/After Plugin

Jeff Starr — Mon, 21 Sep 2009 23:47:56 +0000

Catch My Fame recently released a very slick before & after plugin that enables easy transition between two different images. The plugin combines two images, presumably a “before” and “after” version of the same thing, and then transposes a slider over the merged composition. Users can then grab the slider and move it across the before and after image composition to see the difference between the two. This kind of functionality is normally done with Flash, so to have it available as a jQuery plugin is very exciting.

Weighing only 7K, the before/after plugin is packed with features, including:

Slick effect, no Flash needed
Reusable on multiple containers
Show either image via nav links
Cross-browser compatible
Many options, including auto-animation
Degradable. If the visitor doesn’t have JavaScript they will still see both images.

This plugin is perfect for showing the difference between any two before and after images. If this sounds like something you would like to do without Flash, this plugin is for you.

Create a Draggable Sitemap with jQuery

Jeff Starr — Mon, 21 Sep 2009 18:45:25 +0000

Dave McDermid at boagworld shares a clean tutorial on how to create a draggable sitemap with jQuery. This tutorial explains how to build a “drag-and-drop sortable sitemap” for your website. After experimenting with a few of the available JavaScript solutions, Dave decided to craft his own. The result is a slick, carefully constructed sitemap that delivers a seamless drag-n-drop experience.

The tutorial covers the following:

The HTML
The requirements
Simplifying the task
The JavaScript/jQuery
The CSS
Extra spice

Everything is explained in good detail and Dave even takes the time to explain how everything works. Always nice to understand what you are doing :)

If you are looking for a clean, concise drag-n-drop sitemap solution that degrades gracefully without JavaScript, this is it.

Simple Ajax Website with jQuery

Jeff Starr — Mon, 21 Sep 2009 18:24:08 +0000

Tutorialzine provides a nice tutorial on how to make a simple Ajax website with jQuery. The tutorial is aimed at creating a site with four pages that each use Ajax to load dynamically. The demo shows the final result of the tutorial, which is essentially a menu bar with four links to the four pages. Each page then loads when the user clicks on its associated link. Pretty cool, but the demo does not seem to degrade gracefully. That is, when the user doesn’t have JavaScript enabled, the pages do not load (at least in my tests).

The tutorial is divided into four straightforward parts:

The XHTML
The CSS
The jQuery
The PHP

Everything is explained fairly well in the tutorial — not a lot of theory, just what you need to build the site.