More Powerful & Flexible Facebook-like TextboxList

We have mentioned TextboxList a while ago, which is something similar to Facebook List Input. Now New TextboxList has been rewritten from scratch, and it’s more powerful and flexible than ever.

It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).

Facebook List Input

Requirements: Mootools 1.2.x
Demo: http://devthought.com/projects/mootools/textboxlist/
License: License Free

iPhone Style Checkboxes in jQuery

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then Thomas Reynolds has got something special for you. iPhone Style Checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes.

Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

iPhone Checkboxes

Requirements: jQuery Framework
Demo: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
License: License Free

Submit multiple forms with jQuery and Ajax.

Submit multiple forms with jQuery and Ajax.
How to submit multiple forms with jQuery and ajax.

28 in 50 Useful New jQuery Techniques and Tutorials

Make Your Header Responses To Mouse Movements with jParallax

Make Your Header Responses To Mouse Movements with jParallax
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

5 in 50 Useful New jQuery Techniques and Tutorials

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

171 in 50 Useful New jQuery Techniques and Tutorials

jQuery File Tree

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

169 in 50 Useful New jQuery Techniques and Tutorials

Portfolio Layout Idea Using jQuery

Portfolio Layout Idea Using jQuery

164 in 50 Useful New jQuery Techniques and Tutorials

Creating a Keyboard with CSS and jQuery

Creating a Keyboard with CSS and jQuery
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.

161 in 50 Useful New jQuery Techniques and Tutorials

The youlove.us scrolling background effect explained

The youlove.us scrolling background effect explained
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

160 in 50 Useful New jQuery Techniques and Tutorials

A jQuery inline form validation

A jQuery inline form validation, because validation is a mess Të Position Absolute
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

157 in 50 Useful New jQuery Techniques and Tutorials