jQuery UI Jquery Image Loader Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order. Multiple Image Loading First we create an HTML page which has list element with class “loading” which we’re going to define later in the CSS, the amount of the list element depend on how many images we need to put here, in this example i have 3 images. 1.<ul id="portfolio"> 2. 3. 4. 5. Next we add CSS for “loading” class which contain the spinner animated gif, as the loading animation. 1. 5. and here is the javascript, i already put some comments, which explain what the block codes do. 02. 05. var images = new Array(); 11. 13. var img = new Image(); 15. 17. 19. 20. 21. }).error(function () { 22. 23. }).attr('src', images[index]); you can see the preview of what we did so far here Create element programmaticaly 1. 02. 06. 12. 13. 14. 15. 17.
Eloquent Javascript (en français) 25 Useful jQuery Tooltip Scripts Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch. In this post we’ll present 25 different jQuery tooltip scripts. Looking for hosting?
Bien valider ses formulaires avec Javascript Petit rappel sur les formulaires Rappelons-nous d'abord de quoi est composé un formulaire : de champs de saisie, matérialisés par des balises input, select et textarea ; de boutons pour valider ou annuler / effacer le formulaire, respectivement <input type="submit" /> et <input type="reset" /> ; une balise form qui encadre le tout ; et éventuellement ce fameux script en Javascript qui va vérifier le contenu avant son envoi vers le serveur Web. Cet ensemble peut être complété par des balises label, fieldset, legend, etc. pour améliorer l'accessibilité et la structure d'un formulaire. Voila ce que cela pourrait donner : <form action="url_page_suivante" method="get" name="formSaisie"><p><label for="prenom">Saisissez votre prénom :</label><input type="text" name="prenom" id="prenom" /><input type="submit" value="Ok" /></p></form> Nous sommes dans l'hypothèse où notre page est conforme au XHTML 1.0 Transitionnal, et non Strict, pour faciliter la compréhension des exemples qui suivront. Ou encore
30 jQuery Accordion Menus, Tutorials And Best Examples Accordion menus are used widely in navigating, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed; you can really save some space and be able to show a lot of information using this technique. Yes, and, of course, such sliding content always is great from the design point of view aby giving your visitor unique experience while he is looking at the site. This article has been updated on 5/28/2012 Accordionza – jQuery Plugin Accordionza is a very flexible and lightweight jQuery (v1.4+) accordion plugin. Many features — Easily configure all effects and speed, pause on hover, autoplay and autorestart, collapsable captions and more.Keyboard navigation — Optionally enable the cursor keys to browse an accordion.Lightweight — The plugin takes only 3kB to load.Flexible — Three accordion styles are included. View Demo 1. Simple free jQuery accordion plugin. 2. jQuery UI Demo 2.1. View Demo 3. 3.1. View Demo 4. 5. jQuery Accordion Menu 8. 9. 10. 11. 12.
jQuery Tabs For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states. Conventional and simple markup Watch the jQuery tabs screencast – part 1 (flash version) (QuickTime version is approx. 25Mb, flash version is streaming) View demo and code used in screencast Typical tabbing structure, and the one used in the demo is usually marked up as follows: <div class="tabs"><! Here’s the jQuery used, though slightly adapted from this screencast: Real World example Watch the jQuery tabs screencast – part 2 (flash version) (QuickTime version is approx. 30Mb, flash version is streaming) View demo and code used in screencast Here’s the jQuery tab code used: Taking it further