Étiquette : multiple

[Javascript] Attacher plusieurs événements à un même listener

Source: Multiple Events to a Listener with JavaScript. Code source sous GitHub.

A noter que Chris Fernandini de gomakethings.com déclare encore l’option passive à false à la fin de la déclaration de son EventListener. En savoir plus sur les passive events listeners.

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

Source: Prevent jQuery events from firing multiple times

Le problème

Avec cette déclaration, la fonction cachedMenu à exécuter au clic sur un lien enfants de #cdDropdown dans le DOM était exécutée plusieurs fois (6 fois) à chacun de mes clics. La multiplication des exécutions était exponentielle car en m’amusant à cliquer environ 12 à 15 fois sur des liens, la console de debug a loggué pas moins de 11045 exécutions de ma fonction!!!

La solution

Avant d’activer un événement avec la méthode jQuery .on(), il faut tout simplement le désactiver avec la méthode .off().

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

CSS

jQuery

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

[jQuery] Combiner plusieurs déclarations dans une même méthode .attr

A noter : les attributs qui contiennent des tirets (caractère « -« ) doivent être mis entre guillemets.

[jQuery] Combiner plusieurs déclarations dans une seule méthode .removeAttr

Source : Combing multiple .removeAttr() statements.

Version linéaire (la méthode .removeAttr est appelée pour chaque déclaration)

Version optimisée

[CSS] Une bordure en deux teintes en CSS 3

Source : Two-Tone Borders with CSS3.

Pour une bordure top

On ajoute la valeur inset à box-shadow.

Pour une bordure bottom

Autres ressources (avec plus d’exemples) : https://css-tricks.com/snippets/css/multiple-borders/, http://stackoverflow.com/questions/19463904/css-double-border-with-different-color, http://www.impressivewebs.com/multiple-borders-css/.