Mois : juillet 2015

[SASS] Incrémenter une classe et choisir la variable suivante dans une liste avec @each

31/07/2015 /

Source : SASS – Increment a class and choose the next variable in a list

[SASS] [Mixin] Générer des triangles (arrows)

31/07/2015 /

Mixin SASS inspiré de ce générateur en ligne : CSS triangle generator. Simulation sur http://jsfiddle.net/j1qjrauv/7/.

Note : Un mixin beaucoup plus costaud pour faire la même chose : CSS Tricks – CSS Triangle Mixin, A Sass Mixin for CSS Triangles.

[HTML] Les commentaires conditionnels sous IE

29/07/2015 /

Source : How To Create an IE-Only Stylesheet, Conditional comments.

En complément : Browserhacks – An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

Ajouter une classe à l’élément body pour IE uniquement

[CSS ou JavaScript] Une version responsive de l’API Google Maps

28/07/2015 /

Source : How to make Responsive Google Map with Google Map API, How to Make Google Maps Embeds Responsive.

Google Maps API responsive en full-CSS

Google Maps API responsive en JavaScript

[CSS] hack @font-face – les bonnes pratiques

24/07/2015 /

Source : Font Face Best Practices Guide for 2013

Billet créé suite à des problèmes d’affichage des polices sous iPhone 5 et autres supports iOS utilisant un navigateur webkit.

Note : il est préférable de consigner le code ci-dessous dans des feuilles de style plutôt qu’imbriqué dans une balise <style type="text/css" /> dans du code HTML.

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

23/07/2015 /

Existe-t’il un moyen d’annuler (à l’image de la méthode unbind) les effets sur des éléments du DOM d’un plug-in jQuery après son initialisation ?

Il n’existe malheureusement pas de méthode jQuery permettant d’annuler les effets d’un plug-in déjà initialisé, car ce dernier doit exécuter du code spécifique pour nettoyer les manipulations de DOM qu’il a entrainé. Nativement, jQuery ne peut anticiper ce que chaque plug-in va faire.

La méthode destroy

Avant de vous lancer dans des développements compliqués, vérifiez que le plug-in jQuery que vous souhaitez activer/désactiver ne bénéficie pas d’une méthode destroy. C’est par exemple le cas pour Superfish ou jQuery UI.

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

(pas testé) addEventListener et nettoyage avec removeEventListener

Encapsuler le plug-in dans une fonction

Encapsuler le plug-in dans une fonction et l’initialiser uniquement lorsque la largeur du viewport correspond à un certain breakpoint. Lorsqu’on sort du breakpoint prédéfini, on recharge la page à l’aide de document.location = document.location; et le plug-in n’est plus initialisé.

Avantages et inconvénients

  • + Nous n’avons ni à ré-écrire des parties du code natif du plug-in, ni à maintenir du code que nous aurions écrit spécifiquement pour pallier aux manipulations de DOM générées par l’initialisation du plug-in.
  • + Gain de temps énorme en terme de développement.
  • – On recharge la page lorsqu’on change de breakpoint. Si l’utilisateur était en-train de remplir un formulaire à ce moment là, les informations sont perdues.

Nullifier le plug-in

(pas testé) destroy a function in javascript (jquery) – nullify the function

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

(pas testé – suggéré dans un fil de discussion stack overflow sans donner d’exemple de code…) One solution may be to cache a pre-plugin .clone() of the element(s) that you could revert back to if/when needed (assuming the plugin doesn’t have « undo » capability).

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes bind et unbind)

Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind) .

Reinitializing NivoSlider after simulating destroy

Ok the best way is to forget about all the destroying thing and replace the silder with it’s initial state. suppose the initial state of silder is:

Then the best way to do the destroying and initializing at one step is to do something like:

Quelques ressources d’intérêt sur le sujet :

[jQuery] Ajouter plusieurs attributs à un élément HTML

22/07/2015 /

Source : getting error adding multiple attributes using .attr()

Lorsque le nom de l’attribut contient des caractères –, il faut utiliser des guillemets.

[CSS][jQuery] Supprimer tous les éléments vides ou qui contiennent uniquement un espace insécable  

20/07/2015 /

Supprimer tous les éléments vides à l’aide de la pseudo-classe CSS :empty

Note : Avant de mettre en place un nettoyage du DOM via JS, préférer une solution full-CSS avec la pseudo-classe :empty.
Source : :empty sur CSS Tricks.

Fonctionnera avec le markup HTML suivant

Ne fonctionnera pas avec le markup HTML suivant

Pour les cas qui ne fonctionnent pas, supprimer les éléments vides qui contiennent un espace insécable à l’aide de jQuery

Source : Remove elements with only a   space using jQuery

Le fragment de code suivant trouve l’ensemble des <div /> qui sont vides et les supprime du DOM.

[CSS] Cross-browser inline-block

20/07/2015 /

Source : Cross Browser Inline-Block, Cross Browser Support for inline-block Styling.

[CSS] Une bordure en deux teintes en CSS 3

17/07/2015 /

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/.