Mois : février 2016

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Simulation jsFiddle.net

Source : make an input invisible but clickable through CSS?

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

[PHP] Les opérateurs de comparaison et les opérateurs logiques

Source : Manuel PHP : Opérateurs de comparaison et Manuel PHP : Les opérateurs logiques.

Faire (stores) c’est le raccourci de (stores == true) et faire (!stores) c’est le raccourci de (stores != true) ou (stores == false).

Si stores répond true OU noSearch répond true, tu auras no-background. Donc si stores répond false et noSearch répond true, tu auras no-background. Il suffit que l’un des deux réponde true.

En gros, quand tu mets le ! ça veut dire contraire, donc si tu mets !false ça fera true et le premier argument après le ? est exécuté si ce qu’il y a dans les parenthèses vaut true.

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

Source (partielle) : Bootstrap Close collapse on outside click snippet – Bootply.

Une partie de la solution a été trouvée en tapant les mots-clés suivants dans Google : bootstrap collapse affix close when click outside.

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Utile lorsque la zone ouverte contient des éléments d’action comme des liens, des cases à cocher, etc… On ne voudrait pas refermer la zone lorsque l’utilisateur est en-train de remplir un formulaire par exemple.

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

  1. .nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
  2. .navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

[jQuery] Utiliser la pseudo-classe CSS nth-child avec une valeur récupérée d’une variable

Source : Demo jsFiddle.net.

.myClass:nth-last-child(-n+4){} nous donne en jQuery :

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

Source : Démo jsFiddle.net.

L’intérêt d’utiliser les méthodes .filter() ou .slice() réside dans le fait qu’elles sont totalement indépendantes des concepts HTML et CSS d’imbrication ou d’héritage parents > enfants.
En effet, si on utilisait les pseudo-sélecteurs :nth-child ou :nth-of-type, on ciblerait les deux derniers <li> de chaque <ul>.Or ce que nous recherchons ici, c’est cibler les 2 derniers éléments de .container qui possèdent la classe .list-item. Et ce peu importe leur place dans l’arbre généalogique du container.

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

[jQuery] Les opérateurs de comparaison

Source : Apprendre jQuery > Les conditions > Les opérateurs de comparaison.

On commence par créer une variable qui récupère une valeur correspondant au nombre de <li> enfants immédiats contenus dans ul.comment-list :

Opérateur d’égalité

Compare deux valeurs et vérifie leur égalité. Si la valeur de la variable reviewCount est strictement égale à 1, alors ajoute la classe hello.

Opérateurs Désignation Effet Exemple Résultat
== opérateur d’égalité Compare deux valeurs et vérifie leur égalité x == 3 Retourne True si X est égal à 3, sinon False
!= opérateur de différence Vérifie qu’une variable est différente d’une valeur x != 3 Retourne 1 si X est différent de 3, sinon 0
=== opérateur d’identité Vérifie l’identité de valeur et de type de deux valeurs a === b Retourne True si a est égal à b et est de même type, sinon False
!== opérateur de non identité Vérifie la non identité de valeur et de type de deux valeurs, c’est-à-dire si les deux valeurs n’ont pas la même valeur ou bien sont de types différents. a !== b Retourne True si a est différent de b ou bien est de type différent, sinon False
> opérateur de supériorité stricte Vérifie qu’une variable est strictement supérieure à une valeur x > 3 Retourne True si X est supérieur à 3, sinon False
>= opérateur de supériorité Vérifie qu’une variable est supérieure ou égale à une valeur x >= 3 Retourne True si X est supérieur ou égal à 3, sinon False
< opérateur d’infériorité stricte Vérifie qu’une variable est strictement inférieure à une valeur x < 3 Retourne True si X est inférieur à 3, sinon False
<= opérateur d’infériorité Vérifie qu’une variable est inférieure ou égale à une valeur x <= 3 Retourne True si X est inférieur ou égale à 3, sinon False