Monthavril 2018

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

[Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris

Sources: How can I keep bootstrap popover alive while the popover is being hovered? et Live demo w/Plunker.

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

Mieux, avec deux fonctions

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

Si toi aussi tu travailles encore avec Bootstrap en 2018 (ou +), tu t’es forcément retrouvé face à ce problème qui existait dans la version 3 de Bootstrap et est toujours présent dans la version 4: la classe collapsed sur le lien ou le bouton qui va permettre d’afficher/masquer des éléments n’apparaît qu’après un premier affichage/masquage de ces dits éléments.

Fais le test sur les exemples qu’on retrouve dans les docs officielles : https://getbootstrap.com/docs/3.3/javascript/#collapse ou https://getbootstrap.com/docs/4.0/components/collapse/.

Il est d’ailleurs étonnant que personne ne leur ait jamais remonté ce bug… Peut-être parce que plus personne n’utilise Bootstrap en 2018 (ou +).

Solution #1

Pour solutionner notre problème, il suffit de mettre un setTimeout javaScript quelque part dans tes sources pour délayer l’ajout dans le DOM de la classe collapsed à l’affichage de la page. Oui: c’est sâle. Oui: c’est une vilaine câle en bois. Non: on n’aurait pas pu mettre la classe dans le code HTML car le code natif Bootstrap te la supprime illico. Oui: tu peux peut-être passer par les events proposés par l’api pour faire ça mieux, mais ça veut dire que tu ne peux pas utiliser les data-attributes pour initier ton collapse.

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

[javaScript] VideoJS – astuces et bonnes pratiques de mise en place

Centering the Big Ass Play Button in VideoJS

EDIT: ATTENTION, la méthode donnée dans ce lien n’est pas la bonne!!!

Il suffit, en effet d’ajouter la classe .vjs-big-play-centered sur l’élément HTML video.

Sous Edge la popin vidéo est écrasée

J’avais un height: 0px; pour les sélecteurs .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3. Edge (jusqu’à 17 exclus) n’a pas aimé.

[CSS] Masquer la scrollbar tout en permettant encore le scroll

Source: Hide scroll bar, but while still being able to scroll sur Stack Overflow

Sous Chrome:

…mais ne fonctionne pas sous Firefox ou Internet Explorer.

Solutions universelles

Voir aussi plus bas dans le cas d’une iFrame. Voir le billet original sur Stack Overflow pour des liens vers des jsFiddle d’example.

ou avec position: absolute;

Cas d’une iFrame

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑