11 Useful & New jQuery Techniques

This is the jQuery roundup for April 2011 – the first JavaScript listing we have done since 200 AJAX & JavaScript Techniques in February. This specific listing represents new jQuery techniques from middle February until now – and contains fresh jQuery solutions, including a practical menu solution for WordPress and a fun but yet useful photobooth.

jQuery: The twelfth maintenance release for jQuery UI 1.8 is out. This update brings bug fixes for Autocomplete, Datepicker, Dialog, Progressbar, Resizable and more.

In our definition of jQuery techniques we include tutorials, plugins and similar – and in our definition of “new” we include released or updated during the actual period: and this time our actual period is between February 15 and April 26.

Cashrevelations.com presents a selection of new and useful jQuery techniques – 11 brand new jQuery techniques released or updated during the period of February 15 until April 26 this year (2011). All these jQuery techniques are presented with demo.

11 New & Useful jQuery Techniques – April 2011

1. Photobooth With PHP & jQuery & CSS3
In this pedagogic and fun tutorial by Martin Angelov, you will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
View Demo

2. Moving Boxes Content With jQuery
This tutorial will teach you how to create a template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.
View Demo

3. diagonalFade – jQuery Plugin
This is a jQuery plugin (by jonobr1) allowing you to easily specify direction, fade-in and fade-out, and a host of other options to a grouping of elements – great for inventory or anything with a large amount of items ordered in a grid.
View Demo

4. Constrained Stickies With jQuery
Siddharth shows you how to use the StickyFloat jQuery plugin (smart sticky floating box) to create a sticky menu for your website – it will follow and stay in focus as you scroll, but only within its parent. The source code can be downloaded.
View Demo

5. Better Check Boxes With jQuery & CSS
In this short tutorial, you will learn how to create a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
View Demo

6. jQuery Animated Error Messages & Form Validation
This tutorial by Design Chemical shows you how to use jQuery animation to create more interesting and engaging form validation errors for a user registration form – and with an additional code snippet to check that the user’s password re-entry matches.
View Demo

7. Expanding Image Menu With jQuery
This tutorial will teach you how to create a stylish expanding image menu with jQuery and CSS. The main idea is to have some columns with black and white image slices that will make a content area slide out when we click on them.
View Demo

8. Making A Flickr Powered Slideshow – jQuery
This tutorial shows you how to develop a jQuery plugin that will make it easy to create presentations from your Flickr photos – by using Flickr’s API and YQL to fetch the photos, after which it will create the markup of the slideshow and listen for events.
View Demo

9. Custom Vertical Mega Menu For WordPress – jQuery
This tutorial by Design Chemical will teach you how to use the jQuery Vertical Mega Menu Plugin to build a customized WP menu – you will achieve that result by using the plugins built in CSS classes combined with the inherent WordPress menu classes.
View Demo

10. markItUp! Universal Markup jQuery Editor
This is a plugin built with jQuery and it allows you to turn any text area into a markup editor. HTML, Textile, Wiki Syntax, Markdown, BBcode or your own Markup system can easily be implemented. Version 1.1.10 – update on February 20 2011.
View Demo

11. Animated Content Menu With jQuery
This tutorial shows you how to create a slick animated content menu with jQuery and CSS for a restaurant theme or something similar – the menu items will be animated and when they are clicked, a content area with more information will appear.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.