J'bloo

jQuery and Ajax Best Demos Part-2
A small list of jQuery and Ajax demos.

Pretty checkboxes with jQuery

Using Form Labels as Input Values with jQuery and CSS
I nice little additive to web forms is to put the input labels inside of the inputs box as the starting value. By using jQuery to bring the label in as the value we can archive the desired effect without impacting accessibility, since the label elements are still there. Then we can take it a step further by dynamically adding a class to the input and use CSS to style the form only if JavaScript is enabled. The search box at the top of this page is an example of this technique.

Creating a Virtual jQuery Keyboard
This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.

De-Constructing Accordion and Hover Effects with jQuery
This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.

Current Field Highlighting
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

If you would, for whatever reason, have a large webform all fields should be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields.

So, we can say that each group of fields represent a sub task of a larger task – filling the entire web form. Thus, each sub task can become a step with a description, input fields and navigation that is common for wizard forms – back and next. The entire process can be done in several simple steps.

This detailed tutorial will show you how to turn long webform into a wizard with jQuery. A plugin is also available for download.

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/webform_to_wizard/
License: License Free

Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery.

It is easy to follow, it also helps you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. The tutorial explains how it works step by step and it’s good for learning how to do the toggle and tooltips with jQuery.

Requirements: jQuery Framework
Demo: http://aext.net/example/twitterlogin/
License: License Free