Top10 Simplest jQuery Tutorials

jQuery tutorial

Top10 Simplest jQuery Tutorials

La settimana comincia con una Top10 dei 10 tutorial jQuery più semplici ed utili che possono essere di aiuto per chi si avvicina a jQuery o per chi già lo conosce e cerca strumenti utili per il proprio sito o per il sito di un cliente. Come noterete, con jQuery è ormai possibile fare cose che fino a qualche anno fa non si pensava fosse possibile se non con flash. Effetti grafici incredibili e funzioni che migliorano la navigation experience dell'utente.

Alla fine della Top10 troverete un Bonus!

The week begins with Top10 of the 10 jQuery simpler and more useful Tutorials that may be helpful for those approaching to jQuery or for those that already know it and look for useful tools for your website or for the website of a client. As you can see, with jQuery now you can do things that up until a few years ago you thought were possible only with Flash. Incredible graphics effects and features that improve the navigation experience of the user.

At the end of the Top10 there's a Bonus!

Amazing Music Player Using Mouse Gestures and Hotkeys

An amazing tutorial about hot to create an impressive music player, realized in XHTML and jQuery, mouse's gestures and hotkeys availables.  To interact with the music player’s interface user can click and drag the mouse or use directional keys and the space bar instead of the mouse.

Amazing Music Player Using Mouse Gestures and Hotkeys

FancyBox

FancyBox is tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under the MIT License

fancybox

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

jcrop

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

Table Row Checkbox Toggle

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries.

AJAX Upload

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

scrollable

Fix Overflow

How to avoid that IE puts scroll bars inside overflowing elements also when an element is only one line and the scroll bar will cover it.

fix overflow

Radio Button and Check Box Replacement

How to replaces radio buttons and check boxes with jQuery.

Radio Button and Check Box Replacement

jQuery books widget

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

jQuery books widget

Simple Controls Gallery

Want to display images as an automatic slideshow that can also be explicitly played or paused by the user? Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery. Lets take a look at the script's set of features:

simple-controls-gallery

How to Create a MooTools Home Page-Inspired Navigation Effect

A simple side menu realized in jQuery.

How to Create a MooTools Home Page-Inspired Navigation Effect

Bonus

Slide and hide section with jquery

A simple how to about a jQuery Interface to Slide and Hide sections of a page.

Slide and hide section with jquery
Waiting for comments/sugestions and don't forget to follow us for extra news and updates!