Mois : septembre 2013

[JQuery] J’ai mis jQuery à jour et la fonction .live() ne fonctionne plus. Méthode de migration.

UPDATE : jquery-migrate – Migrate older jQuery code to jQuery 1.9+.

Sources : http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function | http://stackoverflow.com/questions/14703646/jquery-how-to-use-the-on-method-instead-of-live/14703668#14703668

A lire avant que vous n’entrepreniez un Rechercher et Remplacer automatique:

Pour une migration rapide sur un site en production, ne vous contentez pas d’un remplacement automatique du mot-clé live par on, car les paramètres des deux fonctions sont différents :

devrait devenir :

La présence du sélecteur est très importante! Si vous n’avez pas besoin de l’utiliser, déclarez le comme null.


Migration Example 1:

Avant :

Après, il faut déplacer l’élément enfant (a) sur le paramètre selector de la fonction .on() :


Migration Example 2:

Avant :

Après, il faut déplacer l’élément (.myButton) sur le paramètre selector de la fonction .on(), et cible l’élément parent le plus proche (de préférence un ID) :

Si vous ne savez pas quoi mettre comme élément parent, body fonctionne toujours :


Migration Example 3 :

Avant :

Après :

[jQuery] Conserver une DIV en haut de page lorsqu’on scrolle vers le bas et réinitialiser sa position lorsqu’on remonte dans la page

Comportement de la fonctionnalité :
Lorsqu’on scrolle vers le bas de page, une fois que notre DIV en question (il peut s’agit d’un menu, d’une barre de recherche, etc..) a atteint le haut de la page, il y reste fixé.
Lorsqu’on re-scrolle vers le haut de page, notre DIV retourne à sa position initiale (en dessous de certains éléments le cas échéant).

scroll_fixe

[jQuery] jQuery.noConflict() | Résoudre les conflits liés à l’utilisation de plusieurs plug-ins

Source : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Firebug vous crache des erreurs de type : TypeError : jQuery(...).toto is not a function ?
Vous avez un conflit entre deux ou plusieurs plug-ins.

Utiliser l’une des méthodes ci-dessous peut résoudre le problème :

Attention : avec les deux méthodes ci-dessous, vous n’aurez pas accès à d’autres librairies JS que jQuery !

[CSS] [Bootstrap] Correction d’un bug de la fonctionnalité Collapse sous la v3

Le bug a été officiellement corrigé par l’équipe de développement de Bootstrap. Rendez-vous sur leur page GitHub pour récupérer la dernière version.

La fonctionnalité Collapse de Bootstrap v3 peut-être utilisée dans le cadre d’un Design Responsive pour cacher, en mode de visualisation Mobile, une navigation ou un champ de recherche et afficher un bouton Voir/Masquer.

Dans une version Custom de Bootstrap v3 générée le 05/09/2013, un bug dans la CSS source empêche le masquage des éléments en mode Mobile. Pour remédier à ce souci (jusqu’à ce qu’il soit corrigé par l’équipe en charge de développer le framework), charger le code CSS ci-dessous immédiatement après bootstrap.css ou bootstrap.min.css :

Ce code provient d’une version antérieure des sources CSS de Bootstrap.