jquery example

English Tutorials jQuery Plugin Authoring Learn how to develop a jQuery plugin. jQuery Beginner Tutorial in 18 minutes Learn to build jQuery plugins from scratch - an 18 minute tutorial. [edit] General Tutorials These tutorials cover the fundamentals of the jQuery library - covering a diverse number of topics.

How jQuery Works by John Resig. A basic introduction to jQuery and the concepts that you need to know to use it. Tags: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects Getting Started with jQuery by Jörn Zaefferer Goes through the basics of jQuery, all the way up to building plugins.

Tags: jQuery Core, Selectors, Attributes, Traversing, Manipulation, Events, Effects, Ajax, Plugins jQuery For Designers by Mark Panay Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.

Tags: Selectors, Manipulation, Effects, Events Live Examples of jQuery by Cody Lindley An interactive demonstration of the basics behind jQuery.

Tags: Selectors, Attributes, Traversing, Effects, Manipulation [edit] Interface Introduction to jQuery Animation by Abel Mohler 51+ Best of jQuery Tutorials and Examples by Sydney Monis jQuery Tutorials for Designers by Sydney Monis Highlight words in an html page by Reuven jQuery Tabs Build simple jQuery Tabs controls (Beginner's Tutorials) by Greg Sidelnikov Create a Roll Over Star Comment Rating with JQuery by Eli Geske

Form validation with jQuery from scratch by Daniel Create an Accessible Slideshow Using jQuery by Jacob Gube Create a Vertical Scrolling Menu with Tooltips by Andrew Valums Create a Horizontal Scrolling Menu with CSS and jQuery by Andrew Valums Slide and Hide Section with jQuery by WebAir The Dollar Sign What is the Significance of the Dollar Sign ($)?

Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com) Create a smooth tabbed menu in jQuery by Adrian Mato (yensdesign) How to Validate Forms in both sides using PHP and jQuery by Adrian Mato (yensdesign.com) Improving search boxes with jQuery by Adrian Mato (yensdesign)

Submit a Form Without Refresh Using jQuery by NETTUTS Create a tabbed content area by Queness Simple jQuery Modal Window Tutorial by Queness AJAX Interface using JQuery/PHP by Vision Master Designs Building modal panels with jQuery by Daniel Jquery Image Loader add loading animation before image completely loaded by Bali Web Design State-Saving jQuery Accordion Menu Without Reloading the Page by Michael Jacob Davis

Creating a very basic Image Gallery in JQuery by Jack Franklin Disjointed rollovers in jQuery by Justin Farmer Image Enlargement with .animate() by Justin Farmer jQuery Frequently Asked Questions (FAQ) by Michael Jacob Davis Ajaxify your web pages using jQuery by Bali Web Design PHP jQuery Ajax Login by Bali Web Design SEO friendly ajax by Bali Web Design Building a Lightbox by dryan Simple JQuery

Image Slide Show with Semi-Transparent Caption by Queness jQuery Image Gallery/News Slider with Caption Tutorial by Queness Create an Attractive jQuery Menu with Fadein and Fadeout Effect by Queness Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery by Queness Simple Lava Lamp Menu Tutorial with jQuery by Queness jQuery

Moving Tab and Sliding Content Tutorial by Queness Create a Stunning Sliding Door Effect with jQuery by Queness jQuery Thumbnail with Zooming Image and Fading Caption Tutorial by Queness Making a jQuery pagination system by web.enavu Making a jQuery infinite carousel with nice features by web.enavu How to make a completely reusable jquery modal window by web.enavu

Make a custom tab interface with JQuery by web.enavu Cool navigation menu made with JQuery by web.enavu Sliding door effect with JQuery by web.enavu Image splitting effect with CSS and JQuery by web.enavu Create an amazing contact form with jQuery. by web.enavu

Making image captions using jQuery by web.enavu Client side filtering data with jQuery by web.enavu Create a Thumbnail with Fading Caption Using jQuery by Queness Create a Simple Infinite Carousel with jQuery by Queness jQuery Drop Down Menu for RSS Subscription

Tutorial by Queness 7 Amazing Presentation Slides to Teach you How to Code with jQuery by web.enavu Making a Cool Spotlight Effect with jQuery by web.enavu jQuery Photo Slide Show with Slick Caption Tutorial Revisited by Queness [edit] Misc Beginner's Plugin Tutorial Build jQuery Plugins from scratch (Beginner's tutorials). Run my JQuery script only if a certain element exists! by Eli Geske How to switch to an Alternate Stylesheet using jQuery by Web Dev Codex Roundup of jQuery Menus by Query7 Staff 5 Tips for Better jQuery Code by Marc Grabanski Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro &

Adrian Mato (yensdesign) Easy XML Consumption Using JQuery by Joseph Ucuzoglu Creating a very basic Image Gallery in JQuery by Jack Franklin jQuery Thickbox and ColdFusion Dynamic Image Resizing by Raymond Camden An introduction to jQuery and Form Validation by Raymond Camden Useful and Handy jQuery Tips and Tricks by Queness JQuery/PHP: Simple Random Text Generation Box [edit] Using jQuery with...

ASP.NET UserControl and jQuery by Hossein Rahmani Using AjaxPro by Michael Schwarz An example on how to use jQuery and Ajax.NET Professional together. Tags: Ajax Using Ext With jQuery by Juha Suni Getting started with the Ext library and jQuery.

Tags: Ajax, Plugins, Ext Simple Web 2.0 with Lasso and jQuery jQuery snippets An introduction to using JQuery with Lasso Using jQuery with Adobe AIR Quickstart Guide to ColdFusion+jQuery - Easy example on using jQuery with ColdFusion components (.cfc).] My First ExtJS DataGrid (Part 2, Part 3, Part 4, and Part 5) JQuery Ajax + Rails jQuery + jqGrid + Rails = Powerful Grid Component in your Rails app! CakePHP Ajax "Quick Save" with jQuery by Marc Grabanski: Using jQuery and CakePHP together to perform an Ajax form save.

jQuery and Google Maps Tutorials by Marc Grabanski: jQuery &

Google Maps #1 Basics - Getting started using jQuery inside the Google Maps API.

jQuery & Google Maps #2 Ajax - Saving and Retrieving Points with Ajax.

Using jQuery with Joomla 1.5 and PHP 5 Using jQuery to Enhance the Appearance and Usability of a Structured Document with the NetBeans IDE by Lloyd Dunn Drupal 6.x Creating a lavaLamp menu * GeeksandGod.com - Tutorials Integrating SharePoint 2007 and jQuery (Part 2, SmartTools.

jQuery on CodePlex) by Jan Tielens [edit] Sources for tutorials These are sites that are dedicated to regularly providing a number of jQuery tutorials. jQuery Tutorials Tutorials for Beginners TutorialsPoint - jQuery Tutorials Learning jQuery maintained by jQuery Project Team member Karl Swedberg jQuery for Designers (incl. screencasts) maintained by jQuery Project Team member Remy Sharp valums.com - jQuery &

Web Tutorials 15 Days of jQuery Detached Designs - jQuery Blog absolute beginner's blog jQuery HowTo, Tutorials & Plugins jQuery UI Tutorials yensdesign.com - jQuery & web tutorials Query7.com - jQuery Tutorials & Plugin Reviews Queness - jQuery tutorials TutsValley - jQuery Tutorials [edit]

jQuery API Tutorials These tutorials directly look at different concepts presented in the jQuery API and discuss them in-depth. [edit] jQuery Core Introducing $(document).ready() by Karl Swedberg An introduction to the $(document).ready() function and explaining how important it is.

Tags: jQuery Core Multiple $(document).ready() by Karl Swedberg Some advanced tips for working with $(document).ready().

Tags: jQuery Core Quicker Than window.onload() [edit] Traversing and Selectors How to Get Anything You Want by Karl Swedberg An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM

Tags: Selectors, Attributes, Traversing Zebra Striping Made Easy by Jack Born Walking through the simple code needed to stripe table rows.

Tags: Traversing, Selectors, CSS, Events Auto-Selecting Navigation by Remy Sharp Highlighting the current page in a navigation menu.

Tags: Selectors, Attributes, Traversing 5 Quick jQuery Tips by Rowan Lewis Some quick, short, examples of what you can do with jQuery.

Tags: Selectors, Attributes, Traversing, Manipulation, CSS Stylesheet Switcheroo Getting Select List Values by Marc Grabanski Using jQuery selectors to get the current value or option from a select list. [edit] Manipulation, Attributes, and CSS Wrapping Images With A Drop Shadow by Jack Born A simple example of using .wrap() to add a drop shadow to an image.

Tags: Manipulation Rounded Corners by Jack Born Adding rounded corners to an element, using no extra markup. Tags: Manipulation Multiple File Upload Magic by Jack Born Building an unobtrusive multiple file upload input.

Tags: Selectors, Attributes, Manipulation, Events, Forms Getting Around The Minimum Height Glitch by Yansky Just a quick tutorial for getting around the min-height glitch

Tags: Selectors, CSS PNG Opacity Fix for IE6 by Timo Besenreuther How to make transparent PNGs possible in Internet Explorer 6 Fancy Drop Cap (Part 2) Multiple Fancy Drop Caps Semi-transparent Rollovers Fancy quote marks while preserving presentation Turn Nested Lists Into a Collapsible Tree With jQuery Easy Multi Select Transfer with jQuery [edit] Events Mouse Position by Patrick Hall Some quick examples of finding the position of the mouse on a page.

Tags: Events, Attributes Accordion Menu (Screencast) by John Resig Building a simple, unobtrusive, Accordion-style menu using basic events and animations.

Tags: jQuery Core, Selectors, Attributes, Events, Effects, Screencasts AJAX and Events by Karl Swedberg and Jonathan Chaffer Discusses binding event handlers to DOM elements at the appropriate times.

Tags: Ajax, Events, Manipulation Really Simple Live Comment Preview by Karl Swedberg Adding a live preview to the comment entry area of Wordpress.

Tags: Events, Attributes, Forms Creating an OS Web Interface in jQuery by Adrian Mato (yensdesign.com) Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com) Create an amazing music player using mouse gestures & hotkeys in jQuery by Adrian Mato &

Ivan Guardado Castro (yensdesign.com) Collapsible Layouts -

Use jQuery to create smart collapsible page layouts. Working with Events - Event Delegation Working with Events - Event Re-binding Easy Image Rollovers with CSS class Animated Menus Blurring Links Affiliate Link Loveliness Pop Up Menu Set a Hover Class for Anything Characters Remaining on an Input Field Text Box Hints News scroller/ticker with jQuery and AJAX -

multiple news, fading effect, mouseover pause jQuery Text Resizing by ShopDev A simple tab script with jquery by Codersstuff.com [edit] Ajax Quick and Dirty Ajax by Jack Born A screencast that provides a quick run through of all the different types of Ajax that're possible with jQuery.

Tags: Ajax, Screencasts Safer Contact Forms Without CAPTCHAs by Jack Born Building a complete, jQuery-based, solution for stopping spammers from mis-using your forms.

Tags: Ajax, Manipulation, Forms Edit in Place with Ajax by Jack Born Building an edit-in-place solution that saves all data in the background, using Ajax.

Tags: Ajax, Events, Manipulation, Forms AJAX and Events by Karl Swedberg and Jonathan Chaffer Discusses binding event handlers to DOM elements at the appropriate times.

Tags: Ajax, Events, Manipulation How to load content via AJAX in jQuery by Adrian Mato (yensdesign.com) Create a shoutbox using PHP and AJAX (with jQuery) by Adrian Mato (yensdesign.com)

Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro &

Adrian Mato (yensdesign) Easy Ajax With jQuery by Akash Mehta Simplify Ajax development with jQuery by Jesse Skinner Ajax development with jQuery using PHP and JSON objects by FactsAndPeople.com No More Ajax Headaches -

How to debug Ajax calls with FireBug Auto-populating Select Boxes using jQuery & Ajax - Also makes use of PHP and JSON. Ajax with Special Effects Ajax'ed Forms Easy AJAX with jQuery Auto-Complete Field with jQuery, JSON & PHP (Part 2) AJAX callbacks with jQuery jQuery and XML jQuery Makes Parsing XML Easy by Marc Grabanski Quick code example to illustrate how jQuery can make parsing XML simpler.

create ajax based login form using jquery PHP by Bali Web Design updated here auto populate dropdownlist via ajax request with Jquery by Bali Web Design PUT and DELETE with jQuery Ajax with jQuery, PHP and JSON objects by FactsAndPeople.com Create a Ajax based Form Submission with jQuery+PHP by Queness A Simple AJAX Driven Website with jQuery+PHP by Queness Checking username availability with ajax using jQuery by TutsValley [edit] Plugin Development jQuery Plugin

Tutorial Learn to make jQuery plugins by following these plugin patterns A Plugin Development Pattern by Mike Alsup How to create a plugin for jQuery by Adrian Mato (yensdesign.com) jQuery for Programmers – Writing a simple, dynamic, plugin using jQuery.

Building jQuery Plugins Turn your jQuery code into a richer, unit testable, plugin A Really Simple jQuery Plugin Tutorial by Queness Introduction to building jQuery plugins by Andrew Valums jQuery Plugin Patterns by Winton Welsh Building Your First jQuery Plugin Building jQuery Plugins by Daniel

How to display tips by creating a jQuery plugin by Adrian Mato & Ivan Guardado Castro (yensdesign.com) A Really Simple jQuery Plugin Tutorial by Queness [edit] Tools These guides look at using jQuery with different tools and utilities.

Using Firebug and jQuery (Screencast) Have Your jQuery Fun on Any Site with Greasemonkey Getting started with Aptana and jQuery Updated jQuerify Bookmarklet Solving JQuery IntelliSense Weirdness in Aptana 1.1 Using jQuery with Spket IDE Using syntax coloration in Vim [edit] Web Services Parsing Yahoo Pipes JSON Feeds with jQuery - A tutorial on how to parse and display JSON feeds from the Yahoo Pipes Web Service using jQuery. [edit]

Tutoriaux en Français jQuery.info Danse avec jQuery Transformer tous les liens d’une page Ajouter une boîte à coucou Un paragraphe trop à l’étroit Le plugin « editable » Géolocaliser Lille Le plugin « form » Un repas équilibré Ajouter une image dans une page Cloner des éléments Le code révélé Jouer à Shanghaï Une boîte de recherche un peu smart L’effet machine à écrire end() Bandeau d’actualité Babylon-Design Apprendre et comprendre jQuery -

1/3 Apprendre et comprendre jQuery -

2/3 Apprendre et comprendre jQuery -

3/3 Les Intégristes Introduction à jQuery jQuery :

dansez maintenant ! (quelques méthodes) jQuery :

codez branché ! (les plugins) jQuery :

l'événement ! (les événements) WebInventif.fr Comment utiliser jQuery dans un bookmarklet ? Laissez le visiteur choisir comment il va ouvrir un lien LePotlatch.org

Une FAQ accessible et facile à mettre à jour avec JQuery ChezNeg - Le blog d'un développeur web Premiers pas avec jQuery et sa fonction slideToggle() Système de commentaires en Ajax avec jQuery Vérification instantanée des champs d'un formulaire avec jQuery Coder un slider horizontal avec jQuery executer des événements sur des éléments rajoutés au DOM

Faire une animation en boucle avec jQuery et setInterval() Créer un bloc déroulant avec Jquery Recherche à la volée avec Jquery Faire un bouton "J'aime" comme sur Facebook avec jQuery Le blog technique de Loïc Bar jQuery et ASP.NET Snoupix.com Slideshow jQuery accessible Galerie d'images avec le plugin Flip!

Vérifier un formulaire avec jQuery Galerie d'images dynamique en jQuery Initiation à AJAX avec jQuery (Partie 1) Initiation à AJAX avec jQuery (Partie 2) Webjax.eu Liste des pages Webjax.eu sur JQuery Présentation du framework JQuery Méthode JQuery.Core Sélecteurs JQuery Attributs JQuery Traverser le modèle DOM avec JQuery Manipuler le modèle DOM avec JQuery CSS avec JQuery Gestion des évènements JQuery Effets JQuery Requêtes AJAX avec JQuery Utilitaires JQuery Interface Utilisateur JQuery UI portail sur

jQuery documentation en français de l'API NoShade.net Créer un mini-site avec jQuery [edit] Tutoriales en español Cómo crear un menú de pestañas elegante en jQuery publicado por Web.Ontuts Cómo validar un formulario utilizando PHP y Javascript (jQuery) publicado por Web.Ontuts Cómo crear un Menú Contextual en Javascript mediante jQuery publicado por Web.Ontuts Cómo crear un Plugin para jQuery publicado por Web.Ontuts Mejorando las cajas de búsqueda mediante jQuery publicado por Web.Ontuts JSONP,

llamadas entre dominios (incluye plugin para jQuery) publicado por Web.Ontuts JavaScript fácil y rápido con jQuery Eventos en jQuery Conceptos esenciales de la librería JQuery Además incluye una variedad de ejercicios en el sitio los cuales puedes: probarlos, modificarlos y ver los resultados inmediatamente. Introducción a jQuery Haciendo Tablas Cebra Facilmente by Jack Born Esta es una traducció del artí "Zebra Striping Made Easy" de Jack Born.

Pequeño tutorial a través de ejemplos sencillos de código para hacer tablas tipo cebra. Tags: Traversing, Selectors, CSS, Events VideoTutorial Nº1 Curso de JQuery En este primer VideoTutorial hacemos una introducción en la que vemos cuales son las ventajas del uso de este tipo de frameworks, así como las funcionalidades que nos ofrece. Terminamos creando el primero proyecto con jQuery y explicando la sintaxis y estructura básica que utiliza. De momento publicados 14 videotuoriales del Curso.

Manual de jQuery publicado por DesarolloWeb.com [edit] Tutorials auf Deutsch jQuery - Die Grundlagen jQuery - AJAX-Formular AJAX-Formular in einer Thickbox - Ich werde im folgendem beschreiben wie ich vorgegangen bin mit wenigen Eingriffen in den HTML-Code ein PopUp mit dem Formular zu erstellen in welchem die Übermittlung per AJAX geschieht. jQuery - Tutorial-Serie Es geht darum eine existierende Webseite ohne Eingriff in CSS und HTML-Code zu dynamisieren.

Ohne Javascript im Browser des Besuchers bleibt alles wie es ist, alle Inhalte sind voll zugänglich. Wer aber Javascript akiviert hat bekommt eine durch Animation und Ajax aufgewertete Funktion. Lange Textbeiträge nur teilweise anzeigen mit Möglichkeiten diese ganz darzustellen. jQuery und Google Maps - Google Maps mit jQuery-Hilfe einbinden. Javascript debug Helfer mit JQuery – die ganz schnelle Tour.

Ajax-Tooltip-Image - Ein Bild eingebunden als Link per MouseOver anzeigen.

JQuery Beispiele - Grundlagen für Ajax und zugriffe auf Objekte anhand von Beispielen JQuery und Wordpress - Tutorial für die Einbindung von jQuery in Wordpress

Themes JQuery Einstiegs Tutorial -

jQuery Tutorial mit Beispielen [edit] O jQuery po polsku

jQuery - to łatwe! - jeden z pierwszych w Polsce, przystępnie napisany kurs jQuery dla początkujących jQuery - Narzędzia. - pierwsza część cyklu opisującego narzędzia jQuery.

jQuery - Narzędzia. - pierwsza część cyklu opisującego narzędzia jQuery.

jQuery - Narzędzia v2. - druga część cyklu opisującego narzędzia jQuery.

jQuery - Kurs - Wskaźniki. - pierwsza część spolszczonej dokumentacji.

jQuery - JSON przez POST - bardzo prosty dodatek do jQuery - postJSON.[edit] Türkçe eğitseller jQuery-TR jQuery için Türkçe destek grubu

jQuery ve Seçiciler Seçiciler nedir ve jQuery için ne anlam ifade ederler?

jQuery ve Css işlemleri jQuery ile Css işlemleri nasıl yapılıyor?

jQuery ve Olaylar jQuery ile olay yönetimi nasıl yapılıyor?

jQuery ve DOM işlemleri jQuery ile DOM (document object model) işlemleri nasıl yapılır?

jQuery ve AJAX işlemleri jQuery ile AJAX işlemleri nasıl yapılır?

jQuery ve Efekt işlemleri jQuery ile efekt işlemleri nasıl yapılır?

jQuery ile animasyon yapmak jQuery ile animasyon işlemleri nasıl yapılıyor?

Temel ve ileri düzey bilgi. Yazar: Jeffrey Jordan Way, Çeviri: sohbet - Alastyr - By Mehmet Tahta Jquery ve css ile hareketli button yapmak by Zülküf Küçüközer Jquery ve Seçiciler (Jquery Selectors) by Zülküf Küçüközer PHP ve Jquery ile Google suggest benzeri AutoComplete | Otomatik Metin Tamamlama Hazırlamak by Zülküf Küçüközer ASP.NET ortamında Jquery, Ajax ve JSON ile sayfada yüklenen resimlere resim yükleniyor efekti vermek by Zülküf Küçüközer Jquery, Ajax ve PHP ile dizin içeriğini okumak ve göstermek by Zülküf Küçüközer Jquery ve PHP ile Ajax stili çoklu dosya göndermek by Zülküf Küçüközer jQuery:Sayfa yenilenmeden AJAX ile veri eklemek Form ile gönderilen veri sayfa yenilenmeden nasıl alınır ? -

Codersstuff.com Transportadora Site taşıma yeni sitede jquery ayar düğmesini kullanarak jQuery ile sayfayı yenilemeden verileri ekrana bastırmak jQuery ve Javascript ile sayfaya refresh atmadan 3 satır kodla verileri ekrana bastırabilirsiniz.-

Codersstuff.com Fofoca Dedikodu sitesinde jquery ayar düğmesini kullanarak jQuery ile mouse pozisyonu jQuery ile imlecin kordinatlarını almak. -

Codersstuff.com jQuery ile validation jQuery ile validation. jQuery ile Yıldızlı Oylama (Star Rating) | demo jQuery ve Asp.net ile Yıldızlı Oylama (star rating). jQuery Akordion | demo jQuery ile Akordion içerik yapımı. Oi Torpedo jQuery tarafından ücretsiz kısa mesaj jQuery ile Animasyon jQuery ile animasyon. Jquery ile Accordion menu hazırlayalım Jquery ile Accordion menu hazırlayalım. Jquery'de each kullanımı. Jquery de each kullanımı. Jquery ile Arkadaşına gönder formu jQuery ile Form Doğrulama - Resimler jQuery topLink Plugin -

Codersstuff.com jQuery ile fotoğraf adres kontorolü -

Codersstuff.com jQuery ile efekt vererek veri silmek -

Codersstuff.com ~ Codersstuff Blog jQuery ile sayfa kaydırma -

Teknodergi.Org jQuery Form Kontrolü - Teknodergi.Org Drupal ile JQuery Kullanımı - Teknodergi.Org Jquery, Iframe Auto Height Jquery ile iframe Auto Height tanımlama Jquery TextBox Help Plugin Jquery ile TextBox için tıklandığında kaybolan yardım metni oluşturma Jquery & Nice Css Form Jquery ile temiz css tabanlı formlar oluşturmak Jquery Form Tooltip Jquery ile form alanları için tooltipler oluşturma (Form Tooltip)

Read more »

jQuery Animations and Effects

You can slide elements, animate elements, and even stop animations in mid-sequence. To slide elements up or
down:
$("#myElement").slideDown("fast", function() {
// do something when slide down is finished
}

$("#myElement").slideUp("slow", function() {
// do something when slide up is finished
}

$("#myElement").slideToggle(1000, function() {
// do something when slide up/down is finished
}

To animate an element, you do so by telling jQuery the CSS styles that the item should change to. jQuery will set the new styles, but instead of setting them instantly (as CSS or raw JavaScript would do), it does so gradually, animating the effect at the chosen speed:
$("#myElement").animate(
{
opacity: .3,
width: "500px",
height: "700px"
}, 2000, function() {
// optional callback after animation completes
}
);

Animation with jQuery is very powerful, and it does have its quirks (for example, to animate colors, you need a special plugin). It's worth taking the time to learn to use the animate command in-depth, but it is quite easy to use even for beginners.

Read more »

Showing and Hiding Elements with jQuery

The syntax for showing, hiding an element (or toggling show/hide) is:
$("#myElement").hide("slow", function() {
// do something once the element is hidden
}

$("#myElement").show("fast", function() {
// do something once the element is shown
}

$("#myElement").toggle(1000, function() {
// do something once the element is shown/hidden
}

Remember that the "toggle" command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation. A number for "speed" represents the speed in milliseconds. The second parameter is an optional function that will run when the command is finished executing.

You can also specifically choose to fade an element in or out, which is always done by animation:
$("#myElement").fadeOut("slow", function() {
// do something when fade out finished
}

$("#myElement").fadeIn("fast", function() {
// do something when fade in finished
}

To fade an element only partially, either in or out:
$("#myElement").fadeTo(2000, 0.4, function() {
// do something when fade is finished
}

The second parameter (0.4) represents "opacity", and is similar to the way opacity is set in CSS. Whatever the opacity is to start with, it will animate (fadeTo) until it reaches the setting specified, at the speed set (2000 milliseconds). The optional function (called a "callback function") will run when the opacity change is complete. This is the way virtually all callback functions in jQuery work.

Read more »

Adding, Removing, and Appending Elements and Content

There are a number of ways to manipulate groups of elements with jQuery, including manipulating the content of
those elements (whether text, inline elements, etc).

Get the HTML of any element (similar to innerHTML in JavaScript):
var myElementHTML = $("#myElement").html();// variable contains all HTML (including text) inside #myElement.

If you don't want to access the HTML, but only want the text of an element:
var myElementHTML = $("#myElement").text();// variable contains all text (excluding HTML) inside #myElement
Using similar syntax to the above two examples, you can change the HTML or text content of a specified element:
$("#myElement").html("
This is the new content.
");// content inside #myElement will be replaced with that specified
$("#myElement").text("This is the new content.");// text content will be replaced with that specified

To append content to an element:
$("#myElement").append("
This is the new content.
");// keeps content intact, and adds the new content to the end
$("p").append("This is the new content.
");// add the same content to all paragraphs
jQuery also offers use of the commands appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), and insertAfter(), which work similarly to append() but with their own unique characteristics that go beyond the scope of this simple tutorial.

Read more »

Manipulating and Accessing CSS Class Names & CSS Style

Manipulating and Accessing CSS Class Names :
jQuery allows you to easily add, remove, and toggle CSS classes, which comes in handy for a variety of practical
uses. Here are the different syntaxes for accomplishing this:

$("div").addClass("content"); // adds class "content" to all

elements
$("div").removeClass("content"); // removes class "content" from all

elements
$("div").toggleClass("content");// toggles the class "content" on all

elements (adds it if it doesn't exist, //and removes it if it does)

You can also check to see if a selected element has a particular CSS class, and then run some code if it does. You
would check this using an if statement. Here is an example:
if ($("#myElement").hasClass("content")) {
// do something here
}

You could also check a set of elements (instead of just one), and the result would return "true" if any one of the
elements contained the class.

Manipulating CSS Styles with jQuery:
CSS styles can be added to elements easily using jQuery, and it's done in a cross-browser fashion. Here are some
examples to demonstrate this:
$("p").css("width", "400px"); // adds a width to all paragraphs
$("#myElement").css("color", "blue") // makes text color blue on element #myElement
$("ul").css("border", "solid 1px #ccc") // adds a border to all lists

Read more »

Selecting Elements in jQuery

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also use single quotes), which is the jQuery wrapper. Here are some examples of “wrapped sets” in jQuery:

$("div"); // selects all HTML div elements
$("#myElement"); // selects one HTML element with ID "myElement"
$(".myClass"); // selects HTML elements with class "myClass"
$("p#myElement"); // selects HTML paragraph element with ID "myElement"
$("ul li a.navigation");// selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors:
$("p > a"); // selects anchors that are direct children of paragraphs
$("input[type=text]"); // selects inputs that have specified type
$("a:first"); // selects the first anchor on the page
$("p:odd"); // selects all odd numbered paragraphs
$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors. Here are some examples:
$(":animated"); // selects elements currently being animated
$(":button"); // selects any button elements (inputs or buttons)
$(":radio"); // selects radio buttons
$(":checkbox"); // selects checkboxes
$(":checked"); // selects checkboxes or radio buttons that are selected
$(":header"); // selects header elements (h1, h2, h3, etc.)

Read more »

Link to jQuery's Source Code Remotely

This is an optional technique that many developers are using today. Instead of hosting the jQuery source code on
your own server, you can link to it remotely. This ensures the fastest possible download time of the source code, since many users visiting your site might have the file already cached in their browser. Here is how your

Read more »

jQuery Tutorial for Beginners: Nothing But the Goods

Not too long ago I wrote an article for Six Revisions called “Getting Started with jQuery” that covered some important things (concept-wise) that beginning jQuery developers should know.

This article is the complete opposite; there’s no concepts, no principles, and very little lecturing -- just some straight example code with brief descriptions demonstrating what you can do with jQuery.

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).

Keep in mind that this tutorial is just a bunch of straightforward, superficial code examples and very brief explanations for beginners who want to avoid all the jargon and complexities. But I still highly recommend that all beginners get past this stuff by means of a good book, some more in-depth tutorials online, or by using the jQuery documentation.

Read more »

jquery basics

This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating a new HTML page with the following contents:

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:



You can download your own copy of jQuery from the Downloading jQuery page
[edit]
Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

$(document).ready(function(){
// Your code here
});

Inside the ready event, add a click handler to the link:

$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});

Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert pop-up, before leaving to go to the main jQuery page.

For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:

$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

[edit]
Complete Example

The following is an example of what the complete HTML file might look like if you were to use the script in your own file. Note that it links to Google's CDN to load the jQuery core file. Also, while the custom script is included in the , it is generally preferable to place it in a separate file and refer that file with the script element's src attribute

[edit]
Adding and Removing an HTML Class

Important: The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. See Launching Code on Document Ready above for details.

Another common task is adding (or removing) a class.

First, add some style information into the of your document, like this:



Next, add the addClass call to your script:

$("a").addClass("test");

All your a elements will now be bold.

To remove the class, use removeClass

$("a").removeClass("test");

(HTML allows multiple classes to be added to an element.)

[edit]
Special Effects

In jQuery, a couple of handy effects are provided, to really make your web site stand out. To put this to the test, change the click that you added earlier to this:

$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

Now, if you click any link, it should make itself slowly disappear.
[edit]
Callback and Functions

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
[edit]
Callback without arguments

For a callback with no arguments you pass it like this:

$.get('myhtmlpage.html', myCallBack);

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.
[edit]
Callback with arguments

"What do you do if you have arguments that you want to pass?", you might ask yourself.
[edit]
Wrong

The Wrong Way (will not work!)

$.get('myhtmlpage.html', myCallBack(param1, param2));


This will not work because it calls

myCallBack(param1, param2)

and then passes the return value as the second parameter to $.get()
[edit]
Right

The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.

In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of 'function(){'. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.

$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});

param1 and param2 are evaluated as a callback when the '$.get' is done getting the page.

Read more »

jquery tutorial

English Tutorials jQuery Plugin Authoring Learn how to develop a jQuery plugin. jQuery Beginner Tutorial in 18 minutes Learn to build jQuery plugins from scratch - an 18 minute tutorial. [edit]General TutorialsThese tutorials cover the fundamentals of the jQuery library - covering a diverse number of topics.

How jQuery Works by John Resig. A basic introduction to jQuery and the concepts that you need to know to use it. Tags: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects Getting Started with jQuery by Jörn Zaefferer Goes through the basics of jQuery, all the way up to building plugins.

Tags: jQuery Core, Selectors, Attributes, Traversing, Manipulation, Events, Effects, Ajax, Plugins jQuery For Designers by Mark Panay Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.

Tags: Selectors, Manipulation, Effects, Events Live Examples of jQuery by Cody Lindley An interactive demonstration of the basics behind jQuery.

Tags: Selectors, Attributes, Traversing, Effects, Manipulation [edit]Interface Introduction to jQuery Animation by Abel Mohler 51+ Best of jQuery Tutorials and Examples by Sydney Monis jQuery Tutorials for Designers by Sydney Monis Highlight words in an html page by Reuven jQuery Tabs Build simple jQuery Tabs controls (Beginner's Tutorials) by Greg Sidelnikov Create a Roll Over Star Comment Rating with JQuery by Eli Geske

Form validation with jQuery from scratch by Daniel Create an Accessible Slideshow Using jQuery by Jacob Gube Create a Vertical Scrolling Menu with Tooltips by Andrew Valums Create a Horizontal Scrolling Menu with CSS and jQuery by Andrew Valums Slide and Hide Section with jQuery by WebAir The Dollar Sign What is the Significance of the Dollar Sign ($)?

Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com) Create a smooth tabbed menu in jQuery by Adrian Mato (yensdesign) How to Validate Forms in both sides using PHP and jQuery by Adrian Mato (yensdesign.com) Improving search boxes with jQuery by Adrian Mato (yensdesign)

Submit a Form Without Refresh Using jQuery by NETTUTS Create a tabbed content area by Queness Simple jQuery Modal Window Tutorial by Queness AJAX Interface using JQuery/PHP by Vision Master Designs Building modal panels with jQuery by Daniel Jquery Image Loader add loading animation before image completely loaded by Bali Web Design State-Saving jQuery Accordion Menu Without Reloading the Page by Michael Jacob Davis

Creating a very basic Image Gallery in JQuery by Jack Franklin Disjointed rollovers in jQuery by Justin Farmer Image Enlargement with .animate() by Justin Farmer jQuery Frequently Asked Questions (FAQ) by Michael Jacob Davis Ajaxify your web pages using jQuery by Bali Web Design PHP jQuery Ajax Login by Bali Web Design SEO friendly ajax by Bali Web Design Building a Lightbox by dryan Simple JQuery

Image Slide Show with Semi-Transparent Caption by Queness jQuery Image Gallery/News Slider with Caption Tutorial by Queness Create an Attractive jQuery Menu with Fadein and Fadeout Effect by Queness Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery by Queness Simple Lava Lamp Menu Tutorial with jQuery by Queness jQuery

Moving Tab and Sliding Content Tutorial by Queness Create a Stunning Sliding Door Effect with jQuery by Queness jQuery Thumbnail with Zooming Image and Fading Caption Tutorial by Queness Making a jQuery pagination system by web.enavu Making a jQuery infinite carousel with nice features by web.enavu How to make a completely reusable jquery modal window by web.enavu

Make a custom tab interface with JQuery by web.enavu Cool navigation menu made with JQuery by web.enavu Sliding door effect with JQuery by web.enavu Image splitting effect with CSS and JQuery by web.enavu Create an amazing contact form with jQuery. by web.enavu

Making image captions using jQuery by web.enavu Client side filtering data with jQuery by web.enavu Create a Thumbnail with Fading Caption Using jQuery by Queness Create a Simple Infinite Carousel with jQuery by Queness jQuery Drop Down Menu for RSS Subscription

Tutorial by Queness 7 Amazing Presentation Slides to Teach you How to Code with jQuery by web.enavu Making a Cool Spotlight Effect with jQuery by web.enavu jQuery Photo Slide Show with Slick Caption Tutorial Revisited by Queness [edit]Misc Beginner's Plugin Tutorial Build jQuery Plugins from scratch (Beginner's tutorials). Run my JQuery script only if a certain element exists! by Eli Geske How to switch to an Alternate Stylesheet using jQuery by Web Dev Codex Roundup of jQuery Menus by Query7 Staff 5 Tips for Better jQuery Code by Marc Grabanski Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro &

Adrian Mato (yensdesign) Easy XML Consumption Using JQuery by Joseph Ucuzoglu Creating a very basic Image Gallery in JQuery by Jack Franklin jQuery Thickbox and ColdFusion Dynamic Image Resizing by Raymond Camden An introduction to jQuery and Form Validation by Raymond Camden Useful and Handy jQuery Tips and Tricks by Queness JQuery/PHP: Simple Random Text Generation Box [edit]Using jQuery with...

ASP.NET UserControl and jQuery by Hossein Rahmani Using AjaxPro by Michael Schwarz An example on how to use jQuery and Ajax.NET Professional together. Tags: Ajax Using Ext With jQuery by Juha Suni Getting started with the Ext library and jQuery.

Tags: Ajax, Plugins, Ext Simple Web 2.0 with Lasso and jQuery jQuery snippets An introduction to using JQuery with Lasso Using jQuery with Adobe AIR Quickstart Guide to ColdFusion+jQuery - Easy example on using jQuery with ColdFusion components (.cfc).] My First ExtJS DataGrid (Part 2, Part 3, Part 4, and Part 5) JQuery Ajax + Rails jQuery + jqGrid + Rails = Powerful Grid Component in your Rails app! CakePHP Ajax "Quick Save" with jQuery by Marc Grabanski: Using jQuery and CakePHP together to perform an Ajax form save.

jQuery and Google Maps Tutorials by Marc Grabanski: jQuery &
Google Maps #1 Basics - Getting started using jQuery inside the Google Maps API.
jQuery & Google Maps #2 Ajax - Saving and Retrieving Points with Ajax.

Using jQuery with Joomla 1.5 and PHP 5 Using jQuery to Enhance the Appearance and Usability of a Structured Document with the NetBeans IDE by Lloyd Dunn Drupal 6.x Creating a lavaLamp menu * GeeksandGod.com - Tutorials Integrating SharePoint 2007 and jQuery (Part 2, SmartTools.

jQuery on CodePlex) by Jan Tielens [edit]Sources for tutorialsThese are sites that are dedicated to regularly providing a number of jQuery tutorials. jQuery Tutorials Tutorials for Beginners TutorialsPoint - jQuery Tutorials Learning jQuery maintained by jQuery Project Team member Karl Swedberg jQuery for Designers (incl. screencasts) maintained by jQuery Project Team member Remy Sharp valums.com - jQuery &

Web Tutorials 15 Days of jQuery Detached Designs - jQuery Blog absolute beginner's blog jQuery HowTo, Tutorials & Plugins jQuery UI Tutorials yensdesign.com - jQuery & web tutorials Query7.com - jQuery Tutorials & Plugin Reviews Queness - jQuery tutorials TutsValley - jQuery Tutorials [edit]

jQuery API TutorialsThese tutorials directly look at different concepts presented in the jQuery API and discuss them in-depth.[edit]jQuery Core Introducing $(document).ready() by Karl Swedberg An introduction to the $(document).ready() function and explaining how important it is.

Tags: jQuery Core Multiple $(document).ready() by Karl Swedberg Some advanced tips for working with $(document).ready().

Tags: jQuery Core Quicker Than window.onload() [edit]Traversing and Selectors How to Get Anything You Want by Karl Swedberg An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM

Tags: Selectors, Attributes, Traversing Zebra Striping Made Easy by Jack Born Walking through the simple code needed to stripe table rows.

Tags: Traversing, Selectors, CSS, Events Auto-Selecting Navigation by Remy Sharp Highlighting the current page in a navigation menu.

Tags: Selectors, Attributes, Traversing 5 Quick jQuery Tips by Rowan Lewis Some quick, short, examples of what you can do with jQuery.

Tags: Selectors, Attributes, Traversing, Manipulation, CSS Stylesheet Switcheroo Getting Select List Values by Marc Grabanski Using jQuery selectors to get the current value or option from a select list. [edit]Manipulation, Attributes, and CSS Wrapping Images With A Drop Shadow by Jack Born A simple example of using .wrap() to add a drop shadow to an image.

Tags: Manipulation Rounded Corners by Jack Born Adding rounded corners to an element, using no extra markup. Tags: Manipulation Multiple File Upload Magic by Jack Born Building an unobtrusive multiple file upload input.

Tags: Selectors, Attributes, Manipulation, Events, Forms Getting Around The Minimum Height Glitch by Yansky Just a quick tutorial for getting around the min-height glitch

Tags: Selectors, CSS PNG Opacity Fix for IE6 by Timo Besenreuther How to make transparent PNGs possible in Internet Explorer 6 Fancy Drop Cap (Part 2) Multiple Fancy Drop Caps Semi-transparent Rollovers Fancy quote marks while preserving presentation Turn Nested Lists Into a Collapsible Tree With jQuery Easy Multi Select Transfer with jQuery [edit]Events Mouse Position by Patrick Hall Some quick examples of finding the position of the mouse on a page.

Tags: Events, Attributes Accordion Menu (Screencast) by John Resig Building a simple, unobtrusive, Accordion-style menu using basic events and animations.

Tags: jQuery Core, Selectors, Attributes, Events, Effects, Screencasts AJAX and Events by Karl Swedberg and Jonathan Chaffer Discusses binding event handlers to DOM elements at the appropriate times.

Tags: Ajax, Events, Manipulation Really Simple Live Comment Preview by Karl Swedberg Adding a live preview to the comment entry area of Wordpress.

Tags: Events, Attributes, Forms Creating an OS Web Interface in jQuery by Adrian Mato (yensdesign.com) Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com) Create an amazing music player using mouse gestures & hotkeys in jQuery by Adrian Mato &

Ivan Guardado Castro (yensdesign.com) Collapsible Layouts -

Use jQuery to create smart collapsible page layouts. Working with Events - Event Delegation Working with Events - Event Re-binding Easy Image Rollovers with CSS class Animated Menus Blurring Links Affiliate Link Loveliness Pop Up Menu Set a Hover Class for Anything Characters Remaining on an Input Field Text Box Hints News scroller/ticker with jQuery and AJAX -

multiple news, fading effect, mouseover pause jQuery Text Resizing by ShopDev A simple tab script with jquery by Codersstuff.com [edit]Ajax Quick and Dirty Ajax by Jack Born A screencast that provides a quick run through of all the different types of Ajax that're possible with jQuery.

Tags: Ajax, Screencasts Safer Contact Forms Without CAPTCHAs by Jack Born Building a complete, jQuery-based, solution for stopping spammers from mis-using your forms.

Tags: Ajax, Manipulation, Forms Edit in Place with Ajax by Jack Born Building an edit-in-place solution that saves all data in the background, using Ajax.

Tags: Ajax, Events, Manipulation, Forms AJAX and Events by Karl Swedberg and Jonathan Chaffer Discusses binding event handlers to DOM elements at the appropriate times.

Tags: Ajax, Events, Manipulation How to load content via AJAX in jQuery by Adrian Mato (yensdesign.com) Create a shoutbox using PHP and AJAX (with jQuery) by Adrian Mato (yensdesign.com)
Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro &

Adrian Mato (yensdesign) Easy Ajax With jQuery by Akash Mehta Simplify Ajax development with jQuery by Jesse Skinner Ajax development with jQuery using PHP and JSON objects by FactsAndPeople.com No More Ajax Headaches -

How to debug Ajax calls with FireBug Auto-populating Select Boxes using jQuery & Ajax - Also makes use of PHP and JSON. Ajax with Special Effects Ajax'ed Forms Easy AJAX with jQuery Auto-Complete Field with jQuery, JSON & PHP (Part 2) AJAX callbacks with jQuery jQuery and XML jQuery Makes Parsing XML Easy by Marc Grabanski Quick code example to illustrate how jQuery can make parsing XML simpler.

create ajax based login form using jquery PHP by Bali Web Design updated here auto populate dropdownlist via ajax request with Jquery by Bali Web Design PUT and DELETE with jQuery Ajax with jQuery, PHP and JSON objects by FactsAndPeople.com Create a Ajax based Form Submission with jQuery+PHP by Queness A Simple AJAX Driven Website with jQuery+PHP by Queness Checking username availability with ajax using jQuery by TutsValley [edit]Plugin Development jQuery Plugin

Tutorial Learn to make jQuery plugins by following these plugin patterns A Plugin Development Pattern by Mike Alsup How to create a plugin for jQuery by Adrian Mato (yensdesign.com) jQuery for Programmers – Writing a simple, dynamic, plugin using jQuery.

Building jQuery Plugins Turn your jQuery code into a richer, unit testable, plugin A Really Simple jQuery Plugin Tutorial by Queness Introduction to building jQuery plugins by Andrew Valums jQuery Plugin Patterns by Winton Welsh Building Your First jQuery Plugin Building jQuery Plugins by Daniel

How to display tips by creating a jQuery plugin by Adrian Mato & Ivan Guardado Castro (yensdesign.com) A Really Simple jQuery Plugin Tutorial by Queness [edit]ToolsThese guides look at using jQuery with different tools and utilities.

Using Firebug and jQuery (Screencast) Have Your jQuery Fun on Any Site with Greasemonkey Getting started with Aptana and jQuery Updated jQuerify Bookmarklet Solving JQuery IntelliSense Weirdness in Aptana 1.1 Using jQuery with Spket IDE Using syntax coloration in Vim [edit]Web Services Parsing Yahoo Pipes JSON Feeds with jQuery - A tutorial on how to parse and display JSON feeds from the Yahoo Pipes Web Service using jQuery. [edit]

Tutoriaux en FrançaisjQuery.info Danse avec jQuery Transformer tous les liens d’une page Ajouter une boîte à coucou Un paragraphe trop à l’étroit Le plugin « editable » Géolocaliser Lille Le plugin « form » Un repas équilibré Ajouter une image dans une page Cloner des éléments Le code révélé Jouer à Shanghaï Une boîte de recherche un peu smart L’effet machine à écrire end() Bandeau d’actualité Babylon-Design Apprendre et comprendre jQuery -

1/3 Apprendre et comprendre jQuery -

2/3 Apprendre et comprendre jQuery -
3/3 Les Intégristes Introduction à jQuery jQuery :
dansez maintenant ! (quelques méthodes) jQuery :
codez branché ! (les plugins) jQuery :
l'événement ! (les événements) WebInventif.fr Comment utiliser jQuery dans un bookmarklet ? Laissez le visiteur choisir comment il va ouvrir un lien LePotlatch.org

Une FAQ accessible et facile à mettre à jour avec JQuery ChezNeg - Le blog d'un développeur web Premiers pas avec jQuery et sa fonction slideToggle() Système de commentaires en Ajax avec jQuery Vérification instantanée des champs d'un formulaire avec jQuery Coder un slider horizontal avec jQuery executer des événements sur des éléments rajoutés au DOM

Faire une animation en boucle avec jQuery et setInterval() Créer un bloc déroulant avec Jquery Recherche à la volée avec Jquery Faire un bouton "J'aime" comme sur Facebook avec jQuery Le blog technique de Loïc Bar jQuery et ASP.NET Snoupix.com Slideshow jQuery accessible Galerie d'images avec le plugin Flip!

Vérifier un formulaire avec jQuery Galerie d'images dynamique en jQuery Initiation à AJAX avec jQuery (Partie 1) Initiation à AJAX avec jQuery (Partie 2) Webjax.eu Liste des pages Webjax.eu sur JQuery Présentation du framework JQuery Méthode JQuery.Core Sélecteurs JQuery Attributs JQuery Traverser le modèle DOM avec JQuery Manipuler le modèle DOM avec JQuery CSS avec JQuery Gestion des évènements JQuery Effets JQuery Requêtes AJAX avec JQuery Utilitaires JQuery Interface Utilisateur JQuery UI portail sur

jQuery documentation en français de l'API NoShade.net Créer un mini-site avec jQuery [edit]Tutoriales en español Cómo crear un menú de pestañas elegante en jQuery publicado por Web.Ontuts Cómo validar un formulario utilizando PHP y Javascript (jQuery) publicado por Web.Ontuts Cómo crear un Menú Contextual en Javascript mediante jQuery publicado por Web.Ontuts Cómo crear un Plugin para jQuery publicado por Web.Ontuts Mejorando las cajas de búsqueda mediante jQuery publicado por Web.Ontuts JSONP,

llamadas entre dominios (incluye plugin para jQuery) publicado por Web.Ontuts JavaScript fácil y rápido con jQuery Eventos en jQuery Conceptos esenciales de la librería JQuery Además incluye una variedad de ejercicios en el sitio los cuales puedes: probarlos, modificarlos y ver los resultados inmediatamente. Introducción a jQuery Haciendo Tablas Cebra Facilmente by Jack Born Esta es una traducció del artí "Zebra Striping Made Easy" de Jack Born.

Pequeño tutorial a través de ejemplos sencillos de código para hacer tablas tipo cebra. Tags: Traversing, Selectors, CSS, Events VideoTutorial Nº1 Curso de JQuery En este primer VideoTutorial hacemos una introducción en la que vemos cuales son las ventajas del uso de este tipo de frameworks, así como las funcionalidades que nos ofrece. Terminamos creando el primero proyecto con jQuery y explicando la sintaxis y estructura básica que utiliza. De momento publicados 14 videotuoriales del Curso.

Manual de jQuery publicado por DesarolloWeb.com [edit]Tutorials auf Deutsch jQuery - Die Grundlagen jQuery - AJAX-Formular AJAX-Formular in einer Thickbox - Ich werde im folgendem beschreiben wie ich vorgegangen bin mit wenigen Eingriffen in den HTML-Code ein PopUp mit dem Formular zu erstellen in welchem die Übermittlung per AJAX geschieht. jQuery - Tutorial-Serie Es geht darum eine existierende Webseite ohne Eingriff in CSS und HTML-Code zu dynamisieren.

Ohne Javascript im Browser des Besuchers bleibt alles wie es ist, alle Inhalte sind voll zugänglich. Wer aber Javascript akiviert hat bekommt eine durch Animation und Ajax aufgewertete Funktion. Lange Textbeiträge nur teilweise anzeigen mit Möglichkeiten diese ganz darzustellen. jQuery und Google Maps - Google Maps mit jQuery-Hilfe einbinden. Javascript debug Helfer mit JQuery – die ganz schnelle Tour.

Ajax-Tooltip-Image - Ein Bild eingebunden als Link per MouseOver anzeigen.
JQuery Beispiele - Grundlagen für Ajax und zugriffe auf Objekte anhand von Beispielen JQuery und Wordpress - Tutorial für die Einbindung von jQuery in Wordpress

Themes JQuery Einstiegs Tutorial -
jQuery Tutorial mit Beispielen [edit]O jQuery po polsku
jQuery - to łatwe! - jeden z pierwszych w Polsce, przystępnie napisany kurs jQuery dla początkujących jQuery - Narzędzia. - pierwsza część cyklu opisującego narzędzia jQuery.
jQuery - Narzędzia. - pierwsza część cyklu opisującego narzędzia jQuery.
jQuery - Narzędzia v2. - druga część cyklu opisującego narzędzia jQuery.
jQuery - Kurs - Wskaźniki. - pierwsza część spolszczonej dokumentacji.
jQuery - JSON przez POST - bardzo prosty dodatek do jQuery - postJSON.[edit]Türkçe eğitseller jQuery-TR jQuery için Türkçe destek grubu

jQuery ve Seçiciler Seçiciler nedir ve jQuery için ne anlam ifade ederler?
jQuery ve Css işlemleri jQuery ile Css işlemleri nasıl yapılıyor?
jQuery ve Olaylar jQuery ile olay yönetimi nasıl yapılıyor?
jQuery ve DOM işlemleri jQuery ile DOM (document object model) işlemleri nasıl yapılır?
jQuery ve AJAX işlemleri jQuery ile AJAX işlemleri nasıl yapılır?
jQuery ve Efekt işlemleri jQuery ile efekt işlemleri nasıl yapılır?
jQuery ile animasyon yapmak jQuery ile animasyon işlemleri nasıl yapılıyor?

Temel ve ileri düzey bilgi. Yazar: Jeffrey Jordan Way, Çeviri: sohbet - Alastyr - By Mehmet Tahta Jquery ve css ile hareketli button yapmak by Zülküf Küçüközer Jquery ve Seçiciler (Jquery Selectors) by Zülküf Küçüközer PHP ve Jquery ile Google suggest benzeri AutoComplete | Otomatik Metin Tamamlama Hazırlamak by Zülküf Küçüközer ASP.NET ortamında Jquery, Ajax ve JSON ile sayfada yüklenen resimlere resim yükleniyor efekti vermek by Zülküf Küçüközer Jquery, Ajax ve PHP ile dizin içeriğini okumak ve göstermek by Zülküf Küçüközer Jquery ve PHP ile Ajax stili çoklu dosya göndermek by Zülküf Küçüközer jQuery:Sayfa yenilenmeden AJAX ile veri eklemek Form ile gönderilen veri sayfa yenilenmeden nasıl alınır ? -

Codersstuff.com Transportadora Site taşıma yeni sitede jquery ayar düğmesini kullanarak jQuery ile sayfayı yenilemeden verileri ekrana bastırmak jQuery ve Javascript ile sayfaya refresh atmadan 3 satır kodla verileri ekrana bastırabilirsiniz.-

Codersstuff.com Fofoca Dedikodu sitesinde jquery ayar düğmesini kullanarak jQuery ile mouse pozisyonu jQuery ile imlecin kordinatlarını almak. -

Codersstuff.com jQuery ile validation jQuery ile validation. jQuery ile Yıldızlı Oylama (Star Rating) | demo jQuery ve Asp.net ile Yıldızlı Oylama (star rating). jQuery Akordion | demo jQuery ile Akordion içerik yapımı. Oi Torpedo jQuery tarafından ücretsiz kısa mesaj jQuery ile Animasyon jQuery ile animasyon. Jquery ile Accordion menu hazırlayalım Jquery ile Accordion menu hazırlayalım. Jquery'de each kullanımı. Jquery de each kullanımı. Jquery ile Arkadaşına gönder formu jQuery ile Form Doğrulama - Resimler jQuery topLink Plugin -

Codersstuff.com jQuery ile fotoğraf adres kontorolü -
Codersstuff.com jQuery ile efekt vererek veri silmek -
Codersstuff.com ~ Codersstuff Blog jQuery ile sayfa kaydırma -

Teknodergi.Org jQuery Form Kontrolü - Teknodergi.Org Drupal ile JQuery Kullanımı - Teknodergi.Org Jquery, Iframe Auto Height Jquery ile iframe Auto Height tanımlama Jquery TextBox Help Plugin Jquery ile TextBox için tıklandığında kaybolan yardım metni oluşturma Jquery & Nice Css Form Jquery ile temiz css tabanlı formlar oluşturmak Jquery Form Tooltip Jquery ile form alanları için tooltipler oluşturma (Form Tooltip)

Read more »

The best Web 2 jQuery javascript plugins

We developers here at Wiliam are always looking for programming solutions that are robust, standards compliant, extensible and keep our sites loading fast. One such solution that has been gaining popularity among our development team is jQuery.jQuery is a Javascript library that aims to greatly simplify the often tedious and buggy task of writing client-side JavaScript code to for modern Web 2.0 web sites.At Wiliam, JQuery is helping pave the way for our new generation of sites, and I personally have found that its extensible, modular platform has helped me do away with much of our old Javascript code and have all our sites work in a standardised, consistent way with fewer bugs. And best of all, it's free.I'd like to share with you four of the best JQuery plugins that I've been working with and implementing almost every day.jqModal - easy popup boxesI can't remember the last time I built a web site that didn't have some kind of pop-up window. Enquiry forms, login boxes and information boxes are almost always used in our designs. I believe they improve the user experience when used appropriately: the user can request more information about a topic or log in to a site without leaving the current page, for example. jqModal is a plugin for jQuery that simplifies the task of making divs pop up. I was surprised by how little code is required, compared to our old methods. The samples on the jqModal site are simple and easy to follow - in fact I was really surprised by the tiny amount of code required to initialise and then open the popup (compared to the old

Read more »

gps

Global Positioning System was developed by the United States' Department of Defense. It uses between 24 and 32 Medium Earth Orbit satellites that transmit precise microwave signals. This enables GPS receivers to determine their current location, time and velocity. The GPS satellites are maintained by the United States Air Force.

GPS is often used by civilians as a navigation system. On the ground, any GPS receiver contains a computer that "triangulates" its own position by getting bearings from at least three satellites. The result is provided in the form of a geographic position - longitude and latitude - to, for most receivers, within an accuracy of 10 to 100 meters. Software applications can then use those coordinates to provide driving or walking instructions.

Getting a lock on by the GPS receivers on the ground usually takes some time especially where the receiver is in a moving vehicle or in dense urban areas. The initial time needed for a GPS lock is usually dependent on how the GPS receiver starts. There are three types of start - hot, warm and cold.

The hot start is when the GPS device remembers its last calculated position and the satellites in view, the almanac used (information about all the satellites in the constellation), the UTC Time and makes an attempt to lock onto the same satellites and calculate a new position based upon the previous information. This is the quickest GPS lock but it only works if you are generally in the same location as you were when the GPS was last turned off.

The warm start is when the GPS device remembers its last calculated position, almanac used, and UTC Time, but not which satellites were in view. It then performs a reset and attempts to obtain the satellite signals and calculates a new position.

The receiver has a general idea of which satellites to look for because it knows its last position and the almanac data helps identify which satellites are visible in the sky. This takes longer than a hot start but not as long as a cold start.

And finally – the cold start is when the GPS device dumps all the information, attempts to locate satellites and then calculates a GPS lock. This takes the longest because there is no known information.

The GPS receiver has to attempt to lock onto a satellite signal from any available satellites, basically like polling, which takes a lot longer than knowing which satellites to look for. This GPS lock takes the longest.

In an attempt to improve lock times, cellphone manufacturers and operators have introduced the Assisted GPS technology, which downloads the current ephemeris for a few days ahead via the wireless networks and helps triangulate the general user’s position with the cell towers thus allowing the GPS receiver to get a faster lock at the expense of several (kilo)bytes.

Read more »

core jquery

jQuery.holdReady()

Holds or releases the execution of jQuery's ready event.
jQuery()

Accepts a string containing a CSS selector which is then used to match a set of elements.
jQuery.noConflict()
Setup Methods

Relinquish jQuery's control of the $ variable.
jQuery.sub()

Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.
jQuery.when()

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

Read more »

gps co-ordinate with sattelite

Until now, interfacing to both satellite and terrestrial communication networks was a difficult and time-consuming task involving multiple pieces of equipment, differing message formats and brute force routing - all at a high cost and increased time-to-market. The SureLinx 8100 series terminals with dual-mode satellite/GPRS capability are designed to save time and simplify application development for mobile asset tracking, logistics and security applications.



The SureLinx communication terminals operate in a similar manner to the satellite-only solutions. When out of cellular zones, the SureLinx use the GPS satellites to acquire position information and Inmarsat satellites to send and receive data. The data is then directed to the Solution Provider via Land Earth Stations (LES) and SkyWave Network Operation Center. If the SureLinx is in a region where there is cellular coverage, it automatically switches to the available network and sends data to the Solution Provider directly.



system-picture-surelinx


surelinx-8100

SureLinx8100

Engineered for dual-mode satellite/GPRS applications
surelinx-8100c

SureLinx8100c

All the same features of SureLinx 8100 with additional on-board computer and CANbus interface for sophisticated applications.

Read more »

Improve your jQuery - 25 excellent tips

1. Load the framework from Google Code


Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it'll load very quickly from Google's CDN and most importantly it'll already be cached if the user has visited a site which delivers it from Google Code.

This makes a lot of sense. How many sites out there are serving up identical copies of jQuery that aren't getting cached? It's easy to do too...

view plaincopy to clipboardprint?





Or, you can just include a direct reference like this...

view plaincopy to clipboardprint?




Full instructions here


2. Use a cheat sheet


Not just a jQuery tip, there are some great cheat sheets out there for most languages. It's handy having every function on a printable A4 sheet for reference and luckily these guys have produced a couple of nice ones..

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/


3. Combine all your scripts and minify them


OK, a general JavaScript tip here. But any big project that uses lots of jQuery probably uses lots of plugins (this site uses easing, localScroll, lightbox and preload) so it's usually applicable.

Browsers can't load scripts concurrently (well, most can't, yet), which means that if you've got several scripts downloading one at a time then you're really slowing down the loading of your page. So, assuming the scrips are being loaded on every page then you should consider combining them into one long script before deploying.

Some of the plugins will already be minified, but you should consider packing your scripts and any that aren't already. It only takes a few seconds. I'm personally a fan of Packer by Dean Edwards


4. Use Firebug's excellent console logging facilities


If you haven't already installed Firebug then you really should. Aside from many other useful features such as allowing you to inspect http traffic and find problems with your CSS it has excellent logging commands that allow you to easily debug your scripts.

Here's a full explanation of all of it's features

My favourite features are "console.info", which you can use to just dump messages and variables to the screen without having to use alert boxes and "console.time" which allows you to easily set up a timer to wrap a bunch of code and see how long it takes. They're all really easy to use too...

view plaincopy to clipboardprint?

console.time('create list');

for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } console.timeEnd('create list'); In this instance I've deliberately written some very inefficient code! In the next few tips I'll show you how we can use the timer to show some improvements which can be made. 5. Keep selection operations to a minimum by caching jQuery selectors are awesome. They make selecting any element on the page incredibly simple, but internally they have to do a fair amount of work and if you go mad with them you might find things starting to get pretty slow. If you're selecting the same element time and time again (in a loop for example) then you can just select it once and keep it in memory while you manipulate it to your heart's content. Take the following example where we add items to an unordered list using a loop. view plaincopy to clipboardprint? for (i = 0; i < 1000; i++) { var myList = $('.myList'); myList.append('This is list item ' + i); } That takes 1066 milliseconds on my PC in Firefox 3 (imagine how long it would IE6!), which is pretty slow in JavaScript terms. Now take a look at the following code where we use the selector just once. view plaincopy to clipboardprint? var myList = $('.myList'); for (i = 0; i < 1000; i++) { myList.append('This is list item ' + i); } That only takes 224 milliseconds, more than 4x faster, just by moving one line of code. 6. Keep DOM manipulation to a minimum We can make the code from the previous tip even faster by cutting down on the number of times we insert into the DOM. DOM insertion operations like .append() .prepend() .after() and .wrap() are relatively costly and performing lots of them can really slow things down. All we need to do is use string concatenation to build the list and then use a single function to add them to your unordered list like .html() is much quicker. Take the following example... view plaincopy to clipboardprint? var myList = $('#myList'); for (i=0; i<1000; i++){ myList.append('This is list item ' + i); } On my PC that takes 216 milliseconds , just over a 1/5th of a second, but if we build the list items as a string first and use the HTML method to do the insert, like this.... view plaincopy to clipboardprint? var myList = $('.myList'); var myListItems = ''; for (i = 0; i < 1000; i++) { myListItems += '

This is list item ' + i + '

';
}

myList.html(myListItems);


That takes 185 milliseconds, not much quicker but that's another 31 milliseconds off the time.



7. Wrap everything in a single element when doing any kind of DOM insertion


OK, don't ask me why this one works (I'm sure a more experienced coder will explain).

In our last example we inserted 1000 list items into an unordered list using the .html() method. If we had have wrapped them in the UL tag before doing the insert and inserted the completed UL into another tag (a DIV) then we're effectively only inserting 1 tag, not 1000, which seems to be much quicker. Like this...

view plaincopy to clipboardprint?

var myList = $('.myList');
var myListItems = '

';

for (i = 0; i < 1000; i++) { myListItems += '
• This is list item ' + i + '
';
}

myListItems += '

';
myList.html(myListItems);


The time is now only 19 milliseconds, a massive improvement, 50x faster than our first example.



8. Use IDs instead of classes wherever possible


jQuery makes selecting DOM elements using classes as easy as selecting elements by ID used to be, so it's tempting to use classes much more liberally than before. It's still much better to select by ID though because jQuery uses the browser's native method (getElementByID) to do this and doesn't have to do any of it's own DOM traversal, which is much faster. How much faster? Let's find out.

I'll use the previous example and adapt it so each LI we create has a unique class added to it. Then I'll loop through and select each one once.

view plaincopy to clipboardprint?

// Create our list
var myList = $('.myList');
var myListItems = '

';

for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
';
}

myListItems += '

';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) { var selectedItem = $('.listItem' + i); } Just as I thought my browser had hung, it finished, in 5066 milliseconds (over 5 seconds). So i modified the code to give each item an ID instead of a class and then selected them using the ID. view plaincopy to clipboardprint? // Create our list var myList = $('.myList'); var myListItems = '

';

for (i = 0; i < 1000; i++) { myListItems += '
• This is a list item
';
}

myListItems += '

';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) { var selectedItem = $('#listItem' + i); } This time it only took 61 milliseconds. Nearly 100x faster. 9. Give your selectors a context By default, when you use a selector such as $('.myDiv') the whole of the DOM will be traversed, which depending on the page could be expensive. The jQuery function takes a second parameter when performing a selection. jQuery( expression, context ) By providing a context to the selector, you give it an element to start searching within so that it doesn't have to traverse the whole of the DOM. To demonstrate this, let's take the first block of code from the tip above. It creates an unordered list with 1000 items, each with an individual class. It then loops through and selects each item once. You'll remember that when selecting by class it took just over 5 seconds to select all 1000 of them using this selector. view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i); I then added a context so that it was only running the selector inside the unordered list, like this... view plaincopy to clipboardprint? var selectedItem = $('#listItem' + i, $('.myList')); It still took 3818 milliseconds because it's still horribly inefficient, but that's more than a 25% speed increase by making a small modification to a selector. 10. Use chaining properly One of the coolest things about jQuery is it's ability to chain method calls together. So, for example, if you want to switch the class on an element. view plaincopy to clipboardprint? $('myDiv').removeClass('off').addClass('on'); If you're anything like me then you probably learned that in your first 5 minutes of reading about jQuery but it goes further than that. Firstly, it still works across line breaks (because jQuery = JavaScript), which means you can write neat code like this... view plaincopy to clipboardprint? $('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('This cell is now red');


Making a habit of using chaining automatically helps you to cut down on your selector use too.

But it goes further than that. Let's say that you want to perform several functions on an element but one of the first functions changes the element in some way, like this...

view plaincopy to clipboardprint?

$('#myTable').find('.firstColumn').css('background','red');


We've selected a table, drilled down to find cells with a class of "firstColumn" and coloured them in red.

Let's say we now want to colour all the cells with a class of "lastColumn" blue. Because we've used the find() funciton we've filtered out all the cells that don't have a class of "firstColumn" so we need to use the selector again to get the table element and we can't continue chaining, right? Luckily jQuery has an end() function which actually reverts back to the previous unaltered selection so you can carry on chaining, like this...

view plaincopy to clipboardprint?

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');


It's also easier than you might think to write your own jQuery function which can chain. All you have to do is write a function which modifies an element and returns it.

view plaincopy to clipboardprint?

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('hello');


How easy was that?



11. Learn to use animate properly


When I first started using jQuery I loved the fact that it was easy to use the pre-defined animations like slideDown() and fadeIn() to get some really cool effects incredibly easy. It's easy to take things further though because jQuery's animate() method is very easy to use and very powerful. In fact, is you look at the jQuery source code you'll see that internally those methods are just shortcuts which use the animate() function.

view plaincopy to clipboardprint?

slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},

fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}


The animate() method simply takes any CSS style and smoothly transitions it from one value to another. So, you can change the width, height, opacity, background-color, top, left, margin, color, font-size, anything you want.

This is how easy it is to animate all your menu items grow to 100 pixels high when you roll over them.

view plaincopy to clipboardprint?

$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});


Unlike other jQuery functions, animations are automatically queued, so if you want to run a second animation once the first is finished then just call the animate method twice, no callback necessary.

view plaincopy to clipboardprint?

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});


If you want the animations to happen concurrently then just put both styles in the params object of a single call, like this...

view plaincopy to clipboardprint?

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});


You can animate any property that's numeric. You can also download plugins to help you animate properties that aren't, like colors and background colors


12. Learn about event delegation


jQuery makes it easier than ever to attach events to elements in the DOM unobtrusively, which is great, but adding too many events is inefficient. Event delegation allows you to add less events to achieve the same result in many situations. The best way to illustrate this is with an example...

view plaincopy to clipboardprint?

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});


A simple function which turns cells in a table red when you click on them. Let's say that you've got a grid with 10 columns and 50 rows though, that's 500 events bound. Wouldn't it be neater if we could just attach a single event to the table and when the table is clicked have the event handler work out which cell was clicked before turning it red?

Well that's exactly what event delegation is and it's easy to implement...

view plaincopy to clipboardprint?

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});


'e' contains information about the event, including the target element that actually received the click. All we have to do is inspect it to see which cell was actually clicked. Much neater.

Event delegation has another benefit. Normally, When you bind a handler to a collection of elements it gets attached to those elements and those elements only. If you add new elements to the DOM which would have been matched by the selector then they don't have the event handler bound to them (are you following me?) then nothing will happen.

When using event delegation you can add as many matching elements to the DOM as you like after the event is bound and they work too.



13. Use classes to store state


This is the most basic way of storing information about a block of html. jQuery is great at manipulating elements based upon their classes, so if you need to store information about the state of an element then why not add an extra class to store it?

Here's an example. We want to create an expanding menu. When you click the button we want the panel to slideDown() if it's currently closed, or slideUp() if it's currently open. We'll start with the HTML

view plaincopy to clipboardprint?

click me

• Menu item 1


• Menu item 2


• Menu item 3

Very simple! We've just added an extra class to the wrapper div which serves no other purpose other than to tell us the state of the item. So all we need is a click event handler which performs slideUp() or slideDown() on the corresponding panel when the button is clicked.

view plaincopy to clipboardprint?

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});


That's a very simple example, but you can add extra classes for storing all sorts of information about an element or HTML fragment.

However, in all but simple cases it's probably better to use the next tip.



14. Even better, use jQuery's internal data() method to store state


It's not very well documented for some reason but jQuery has an internal data() method which can be used to store information in key/value pairs against any DOM element. Storing a piece of data is as simple as this...

view plaincopy to clipboardprint?

$('#myDiv').data('currentState', 'off');


We can amend the example from the previous tip. We'll use the same HTML (with the "expanded" class removed) and use the data() function instead.

view plaincopy to clipboardprint?

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});


I'm sure you'll agree this is much neater. For more information about data() and removeData(), see this page...

jQuery internals


15. Write your own selectors


jQuery has loads of built-in selectors for selecting elements by ID, class, tag, attribute and many more. But what do you do when you need to select elements based upon something else and jQuery doesn't have a selector?

Well, one answer would be to add classes to the elements from the start and use those to select them, but it turns out that it's not hard to extend jQuery to add new selectors.

The best way to demonstrate is with an example.

view plaincopy to clipboardprint?

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});


The first block of code creates a custom selector which finds any element that is more than 100 pixels tall. The second block just uses it to add a click handler to all those elements.

I won't go into any more detail here but you can imagine how powerful this is and if you search google for "custom jquery selector" you'll find loads of great examples.



16. Streamline your HTML and modify it once the page has loaded


The title might not make a lot of sense but this tip can potentially neaten up your code, reduce the weight and download time of your page and help your SEO. Take the following HTML for example...

view plaincopy to clipboardprint?

This is field number 1

This is an error message

This is field number 2

This is an error message

That's an example of how a form might be marked up, modified slightly for illustrative purposes. I'm sure you'll agree it's pretty ugly and if you had a long form you'd end up with a fairly long ugly page. It's be nicer if you could just put this in your HTML.

view plaincopy to clipboardprint?

This is field 1

This is field 2

This is field 3

This is field 4

This is field 5

All you have to do is a bit of jQuery manipulation to add all the ugly HTML back in. Like this...

view plaincopy to clipboardprint?

$(document).ready(function() {
$('.field').before('

');
$('.field').after('

This is an error message

');
});


It's not always advisable to do this, you'll get a bit of a flash as the page loads, but in certain situations where you've got a lot of repeated HTML it can really reduce your page weight and the SEO benefits of reducing all your repeated extraneous markup should be obvious.



17. Lazy load content for speed and SEO benefits


Another way to speed up your page loads and neaten up the HTML that search spiders see is to lazy load whole chunks of it using an AJAX request after the rest of the page has loaded. The user can get browsing right away and spiders only see the content you want them to index.

We've used this technique on our own site. Those purple buttons at the top of the page drop down 3 forms, directions and a google map, which was doubling the size of our pages. So, we just put all that HTML in a static page and use the load() function to load it in once the DOM was ready. Like this...

view plaincopy to clipboardprint?

$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});


I wouldn't use this everywhere. You have to consider the trade offs here. You're making extra requests to the server and portions of your page might not be available to the user right away, but used correctly it can be a great optimization technique.



18. Use jQuery's utility functions


jQuery isn't just about flash effects. The creator has exposed some really useful methods which fill a few gaps in JavaScript's repertoire.

http://docs.jquery.com/Utilities

In particular, browser support for certain common array functions is patchy (IE7 doesn't even have an indexOf() method!). Jquery has methods for iterating, filtering, cloning, merging and removing duplicates from Arrays.

Other common functions that are difficult in Javascript include getting the selected item in a drop down list. In plain old JavaScript you'd have to get the element using getElementByID, get the child elements as an array and iterate through them checking whether each one was selected or not. jQuery makes it easy...view plaincopy to clipboardprint? $('#selectList').val(); It's worth spending some time looking through the jQuery documentation on the main site and having a nose around some of the lesser known functions.19. Use noconflict to rename the jquery object when using other frameworksMost javascript frameworks make use of the $ symbol as a shorthand and this can cause clashes when trying to use more than one framework on the same page. Luckily there's a simple solution. The .noconflict() function gives control of the $ back and allows you to set your own variable name, like this...view plaincopy to clipboardprint? var $j = jQuery.noConflict(); $j('#myDiv').hide(); 20. How to tell when images have loadedThis is another one of those problems that doesn't seem to be as well documented as it should be (not when I went looking anyway) and it's a fairly common requirement when building photo galleries, carousels etc, but it's fairly easy.All you have to do is use the .load() method on an IMG element and put a callback function in it. The following example changes the "src" attribute of an image tag to load a new image and attaches a simple load function.view plaincopy to clipboardprint? $('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); }); You should find that the alert is called as soon as the image is loaded.21. Always use the latest versionjQuery is constantly improving and John Resig, it's creator, always seems to be in search of ways to improve performance.jQuery is currently on version 1.2.6 but John has already revealed that he's working on a new selector engine called Sizzle, which may apparently improve selector speeds in Firefox by up to 4x. So, it pays to keep up to date.22. How to check if an element existsYou don't need to check if an element exists on the page before you manipulate it because jQuery will will simply do nothing if you try to select something and it isn't in the DOM. But when you do need to check if anything has been selected, or how many items have been selected you can use the length property.view plaincopy to clipboardprint? if ($('#myDiv).length) { // your code } Simple, but not obvious.23. Add a JS class to your HTML attributeI learned this tip from Karl Swedberg whose excellent books I used to learn jQuery.He recently left a comment on one of my previous articles about this technique and the basics are as follows...Firstly, as soon as jQuery has loaded you use it to add a "JS" class to your HTML tag.view plaincopy to clipboardprint? $('HTML').addClass('JS'); Because that only happens when javascript is enabled you can use it to add CSS styles which only work if the user has JavaScript switched on, like this...view plaincopy to clipboardprint? .JS #myDiv{display:none;} So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content as it's not hidden. I'll be using this one a lot in the future.To read his full article click here.24. Return 'false' to prevent default behaviourThis should be an obvious one but maybe not. if you have a habit of doing this...view plaincopy to clipboardprint? Click me! ... and then attaching an event handler like this...view plaincopy to clipboardprint? $('popup').click(function(){ // Launch popup code }); ... it'll probably work fine until you use it on a long page, at which point you'll notice that the # is causing it to jump to the top of the page when your click event is triggered.All you have to do to prevent this default behaviour, or indeed any default behaviour on any event handler is to add "return false;" to your handler, like this...view plaincopy to clipboardprint? $('popup').click(function(){ // Launch popup code return false; }); 25. Shorthand for the ready eventA small tip this one but you can save a few characters by using shorthand for the $(document).ready function.Instead of this...view plaincopy to clipboardprint? $(document).ready(function (){ // your code }); You can do this...view plaincopy to clipboardprint? $(function (){ // your code });

Read more »