Fullscreen Background Slideshow Plugin

BuildInternet brings us a super-stylish “supersize” plugin for full-screen slideshows of background images. The supersize plugin is robust and feature-packed, resizing images to full-browser dimensions while maintaining the proper aspect ratio and cycling through background images in smooth slideshow fashion. Plus, navigational controls enable the user to pause, play, and go forward or backward through the images.

Supersized makes it super-easy to deliver fullscreen background slideshows with plenty of options for custom configuration:

• startwidth, startheight – width/height for resizing ratio calculation
• vertical_center – toggles centering of images in vertical fashion
• slideshow – toggles slideshow; includes captions, counters & nav
• navigation – toggles navigation; configurable with custom images
• transition – transition effects include slide-ins, fades, or nothing
• pause_hover – pauses slideshow while current image hovered over
• slide_counter – toggles display of slide counter
• slide_captions – toggles slide captions
• slide_interval – time between slide changes in milliseconds

No explicit usage instructions are found on the plugin’s official project page, but several demos are available that should provide everything you need via the source code. Below is a link to the default demo, the others are available at the bottom of the documentation page.

More info and discussion here.

Demo

Documentation

Download

Read more

On Vacation..

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 =)

Read more

Auto-Resize Textareas

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.

Demo

Documentation

Download

Read more

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

jQuery Before/After Plugin

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.

Demo

Documentation

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

jQuery Mix Soft-Launch

After two weeks of development, jQuery Mix is going live. I am not officially announcing the site anywhere yet, but this “soft-launch” will help me to finalize some testing and ensure that everything is working as planned.

Please let me know of any suggestions or issues regarding the site, and please be as descriptive as possible. Thanks.

Read more