CategoryjQuery

Astuces jquery pour développeurs front-end / intégrateurs html.

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

Solution: stevenwanderski/bxslider-4: links in sliders aren’t working – Error in the latest version of Chrome (73.0.3683.75).

I might have found a reliable fix for this. The problem happens in Chrome because it doesn’t fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn’t fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

to this:

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

[jQuery] Exploiter $.noConflict(true); pour utiliser plusieurs versions de jQuery dans une même page

Source: Can I use multiple versions of jQuery on the same page?. Utiliser de multiples versions de jQuery dans une même page.

A l’utilisation, à la place de $('#selector').function();, vous utiliseriez jQuery_1_3_2('#selector').function(); ou jQuery_1_1_3('#selector').function();

[jQuery] Empêcher le composant dropdown de Bootstrap 3 de se refermer lorsqu’on clique à l’intérieur de celui-ci

Placer une classe .dontCloseDropdown sur chaque élément cliquable présent dans le Dropdown qui ne doit pas refermer ce dernier.

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

Sources:

[jQuery] Vider des champs de formulaire de manière dynamique

Dans cet exemple, on vide tous les champs de formulaire enfant de l’élément qui a la classe .form-group.hidden

[jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)

conditionize2.js

A flexible jQuery plugin for conditional actions (like showing and hiding elements, triggering events or whatever else you need) based on values of one or many fields. This is an improved version of conditionize.js jQuery plugin. Unlike the previous version, conditionize2.js is not restricted to only show and hide actions. But for simpler migration from conditionize.js to conditionize2.js, show/hide is the default behaviour.

A lot of EXAMPLES available here.

dependsOn

A jQuery plugin to facilitate the handling of form field dependencies. Demo.

[jQuery] Vérifier si au moins une checkbox est cochée

Source: jQuery see if any or no checkboxes are selected

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté


Code commenté

[jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target

Sources:

Description du problème

J’ai le markup HTML suivant:

…et je souhaite récupérer l’ID de l’élément enfant qui est cliqué lorsque je clique sur l’ensemble de la zone #p. Mais c’est systématiquement l’ID #p qui m’est remonté.

Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué

Note importante: ne pas tenter de passer this ou thisobj à la place de event en paramètre de la fonction. Le libellé du paramètre est important et doit rester event à cet endroit là. Plus d’info ici: Difference between this and event.target.

Cas plus complexe où la fonction est déclenchée via un attribut onClick dans la source HTML…

…et où une classe précise doit être mise à l’écart.

[jQuery] similarElements.js – Un plugin pour gérer la mise à jour dynamique de plusieurs éléments aux actions similaires dans une même page

Démo sur jsFiddle.net et code source de la demo ici.

Sources du plug-in similarelements.js sous Git.

L’idée de départ est de pouvoir piloter de manière dynamique un certain nombre d’éléments de la page qui déclenchent une même action. L’action sera déclenchée une seule fois, mais tous les éléments pourront être mis à jour. On peut exécuter de manière séparée du code pour l’élément activé et les éléments similaires non-activés qui doivent quand-même faire l’objet d’une mise à jour.

Utilisation du plug-in

Source du plug-in


ATTENTION: en dessous de cette ligne, mes notes sur le projet en cours. Si vous souhaitez utiliser ce plug-in en production, utilisez la source git et référez-vous aux notes au-dessus de cette ligne. Merci.

ATTENTION: code expérimental. Ce code fonctionne très bien mais ne peut pas forcément être réutilisé comme un plugin mais plutôt comme un pattern…

Pour être vraiment utile et ré-utilisable à la volée, ce plugin devrait donner la possibilité d’exécuter du code externe à sa source lors de son initialisation un peu comme dans enquire JS qui permet d’exécuter du code si certaines conditions prévues par le plugin (match, unmatch, setup, deferSetup, destroy) sont remplies.

Dans le cas de silimarElements.js, les conditions seraient triggeredElement, nonTriggeredElement, mais je dois encore creuser ça…

Utilisation

Dans l’exemple, j’agis sur plusieurs boutons tous présents dans la même page et qui effectuent tous la même action. Cependant, l’action prévue au click ne sera exécutée qu’une fois mais les libellés des autres boutons proposant la même action auront aussi besoin d’être mis à jour.

Ce plugin se veut (une fois terminé) assez souple pour pouvoir gérer autre chose que des boutons ou des événements click. N’importe quel event jQuery peut être utilisé en argument.

L’idée de départ est de pouvoir piloter de manière dynamique un certain nombre d’éléments de la page qui déclenchent une même action. L’action sera déclenchée une seule fois, mais tous les éléments pourront être mis à jour.

L’argument scopeWithinDOM est probablement amené à disparaître car il pourra être défini à l’initialisation du plug-in, en dehors de son code source.

Code source de la demo

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑