jQuery – Effet smooth scroll (défilement fluide)

Comment lancer plusieurs fonctions JavaScript au chargement d'une page Lors de l'utilisation de plusieurs bibliothèques JavaScript sur une même page, il arrive que seule l'une d'entre elles fonctionne correctement. Cela est en général dû à un problème d'écrasement des gestionnaires d'événement : en effet, si l'attribut onload est défini plusieurs fois (soit sur l'objet window dans le code JavaScript, soit sur l'élément body dans le code (X)HTML), seule la dernière définition est prise en compte. Par exemple : Scroll vers une ancre interne (avec jquery) - Kadur Arnaud - Création site internet Angoulême Quand on veut se rendre sur une ancre interne avec un simple lien HTML c'est assez simple, il suffit de faire pointer l'attribut href du lien en question vers l'id de l'élément vers lequel on souhaite se rendre en le préfixant de # . Rien de bien sorcier mais bon avec un petit exemple c'est bien aussi : C'est sympatoche mais la transition est un peu brutale, ...puisqu'il n'y en a pas en fait ^^ Le but du petit script qui suit est de rendre le même service en ajoutant un petit effet de scroll plus ou moins rapide. Dans un premier temps il s'agit de ne lancer la fonction qu'aux seuls liens dont les attributs href commencent par le préfixe qui désigne ce genre de liaisons internes, le caractère #. En CSS c'est très simple et reconnu par tous les navigateurs. (source) Avec la librairie jQuery c'est la même chose, donc on a juste a rajouter l’événement Click() qui lancera la fonction au moment du clic sur les liens ayant un attribut href commençant par # Récupérer l'id de l'élément L'offset Top

jQuery : l’événement ! Enfin « les », événements. Je voulais un titre sensationnel. Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Le développement DOM/Javascript repose en grande partie sur les événements. jQuery propose deux manières de définir les événements : nous allons les analyser. Les « Event Helpers » Joli nom. Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Si aucun paramètre n’est passé, cette méthode déclenche l’événement. Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »). Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : Définir un événement Commençons par un exemple. L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction : $("a#test1").click(function(){ window.alert("Clic sur a#test1.");}); Exemple.

Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). Illustration pour le scroll Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. Illustration pour le positionnement de la souris En pratique Démonstration

mishoo/UglifyJS 10 of the Best jQuery Mobile Device Plugins The mobile web grows in importance every year. Mobile access currently accounts for one in five web visits — by the end of 2014 it will exceed one in four, so it’s never been more important to make sure your site or web app play nicely on the mobile web. Here are some excellent jQuery plugins that will help. 1. iosscripts A pair of touch-enabled, responsive jQuery content slider plugins – they come in both horizontal and vertical flavors. 2. Enables swiping and reordering lists of elements on touch screens, with no fuss. 3. jQuery Finger This plugin unifies click and touch events by removing the 300ms delay on touch devices. 4. A super lightweight script (1kb) to detect via Javascript events like ‘tap’ ‘dbltap’ ‘swipeup’ ‘swipedown’ ‘swipeleft’ ‘swiperight’ on any kind of device. 5. rFrame A responsive frame emulator to aid with mobile development. 6. This is a concept aimed at enabling the user to fill out a form as quickly and easily as possible on a mobile device. Source 7. 8. jQuery Navobile

An Introduction To DOM Events Useful JavaScript Libraries and jQuery Plugins For Web Developers Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load properly, or won’t be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. Quick Overview: Web Forms and Input Validation Little Time-Savers

Unheap - A tidy repository of jQuery plugins