Create a Stylesheet Switcher with jQuery and PHP

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:

1. The HTML
2. The CSS (two different layouts provided: “day” and “night”)
3. Small PHP snippet
4. 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.

Demo

Documentation

Download

Read more

Pagination with jQuery, MySQL and PHP

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:

1. Database configuration (table creation)
2. JavaScript code
3. Three PHP scripts
4. 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.

Demo

Documentation

Download

Read more

Multiple File Uploads with Progress Bar

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:

1. The folder structure
2. The HTML structure
3. The CSS styles
4. 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.

Demo

Documentation

Download

Read more

Create a Draggable Sitemap with jQuery

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:

1. The HTML
2. The requirements
3. Simplifying the task
4. The JavaScript/jQuery
5. The CSS
6. 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.

Demo

Documentation

Read more

Simple Ajax Website with jQuery

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:

1. The XHTML
2. The CSS
3. The jQuery
4. The PHP

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

Demo

Documentation

Read more

Vertical Sliding Panel with jQuery and CSS3

Jon Phillips over at Spyre Studios shows us how to create a a sexy vertical sliding panel using jQuery And CSS3. Rather than the usual “top-down” slider, Jon walks through a technique that behaves more like a vertical drawer that doesn’t push down the content on the page. The result is a clean, dynamic-looking “slide-bar” that rolls open gracefully from the side of the screen.

The tutorial is straightforward and provides everything needed to implement your own vertical sliding panel in very little time. Three steps to completion:

1. The Markup
2. The CSS
3. The jQuery

Looks and works great on CSS3-capable browsers. Three different demos also available within the tutorial page.

Demo

Documentation

Read more