Mois : août 2015

[SASS] Un tableau comparatif responsive en pure HTML/SASS

Simulation : http://jsfiddle.net/frontenddeveloper/5u38aLbg/11/

Code HTML :

Mixin SASS:

[CSS][SASS] Styler des frères en fonction de leur ordre d’apparition dans le DOM avec les pseudo-classes nth-child et nth-last-child

Source : Styling elements based on sibling count

Version CSS

Deux possibilités (sachant que dans certains cas l’une conviendra mieux que l’autre) :

Mixin SASS

[jQuery] Accéder à un élément contenu dans une iframe depuis la page parente avec la méthode contents()

Attention : ne fonctionne pas si le contenu chargé dans l'iframe provient d’un domaine différent de celui de la page parente. Fonctionne notamment si vous cherchez à accéder à du contenu affiché dans une popin (plug-in jQuery Fancybox), une modal (boite de dialogue)…

Source : How to Access Elements in FancyBox iframe, mais voir aussi Access child iFrame DOM from parent page.

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

Attention : astuce valable pour Fancybox à partir de sa version: 2.1.5 (Fri, 14 Jun 2013).

Source : Need to add a surrounding div to fancybox or add a class to body when clicked

You can bind all your fancyboxes to the same selector so you won’t need to have a different script for each fancybox. You can add an extra class to your links to separate each fancybox like :

Then you can declare different API options of each fancybox in separated variables like :

…and use a single script with the common shared options AND using the afterLoad callback to apply each individual setting, depending on the class as well as adding the corresponding class to the fancybox overlay like

Notice we are adding classes either iphone_300 or iphone_420 to the fancybox overlay, which may have different styles within your own css stylesheet like

Simulation jsfiddle.net

when i put these in a rel=gallery, that when i click next it doesnt remove the previous addclass

Just add this as first line inside the afterLoad callback :

Simulation jsfiddle.net

[PHPTAL] Afficher sous condition un tag qui n’est pas fermé avec tal:omit-tag

Source : PHPTAL Manual – tal:omit-tag.

L’attribut tal:omit-tag, couplé à l’attribut tal:condition="", demande au parseur PHPTAL d’ignorer les tags d’ouverture et de fermeture des éléments. Son contenu enfant, quant à lui, sera toujours évalué. Le tag de fermeture sera automatiquement pris en compte.

Equivalent en PHP

[jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM

…en utilisant les méthodes .click, animate., .scrollTop et .offset.

Source : jQuery scroll to element et hyperlink – JQuery smooth scrolling when clicking an anchor link.

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

Source : Stack Overflow – jQuery watch div.
Simulation JS Fiddle.

Le plug-in

Le code HTML

Utiliser le plug-in

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM

Dans notre exemple, au clic sur une des options d’un élément HTML select :

[Bonnes pratiques] Conventions

  • Convention HTML/CSS/JS
  • Convention de langue (français/anglais)
  • Convention de syntaxe (espace/indentation)
  • Convention de commentaires (@TODO)
  • Convention de séparateur (trait d’union/underscore)
  • Convention de casse (minuscule/majuscule,camelCase)

[CSS] Sélection d’éléments, les sélecteurs avancés

Fonctionnent à partir d’IE7 :