CategoryjQuery

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

[jQuery] Performances: comment utiliser de multiples éléments mis en cache?

Source: jQuery, how to use multiple cached elements

emptyThings: 1.92041015625 ms
megamenu.js:127 emptyThings: 4.44091796875 ms
megamenu.js:127 emptyThings: 1.739990234375 ms
megamenu.js:127 emptyThings: 2.5419921875 ms
megamenu.js:127 emptyThings: 1.958740234375 ms
megamenu.js:127 emptyThings: 2.581787109375 ms
megamenu.js:127 emptyThings: 2.59912109375 ms
megamenu.js:127 emptyThings: 2.1240234375 ms
megamenu.js:127 emptyThings: 3.0361328125 ms
megamenu.js:127 emptyThings: 3.2548828125 ms

emptyThings: 1.552001953125 ms
megamenu.js:131 emptyThings: 4.814697265625 ms
megamenu.js:131 emptyThings: 2.326904296875 ms
megamenu.js:131 emptyThings: 2.762939453125 ms
megamenu.js:131 emptyThings: 3.281982421875 ms
megamenu.js:131 emptyThings: 1.970947265625 ms
megamenu.js:131 emptyThings: 2.184814453125 ms
megamenu.js:131 emptyThings: 3.62109375 ms
megamenu.js:131 emptyThings: 3.26123046875 ms
megamenu.js:131 emptyThings: 3.065673828125 ms

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

Cette méthode fait écho à tous les posts dans différents blogs et forums qui incitent à utiliser la méthode .unwrap() de jQuery. La méthode .contents() récupère absolument tout ce que contient l’élément parent qu’on souhaite supprimer alors qu'.unwrap() se montre plus sélective, ce qui peut entrainer quelques désagréments (perte de contenu, etc…).

Source: How to remove only the parent element and not its child elements in JavaScript?

HTML:

jQuery:

Résultat dans le DOM:

[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é

© 2021 devfrontend.info

Theme by Anders NorénUp ↑