css-template-layout est la transcription Javascript du module CSS Template Layout Module. Ce mécanisme prévu par CSS3 permet de faire une grille de mise en page indépendante de la position des éléments dans le flux, sous la forme de déclarations CSS. Lire le reste de cet article »
09/01/10
Astuces (Snippets) pratiques pour Javascript et jQuery
Voici une collection de près de 40 bouts de code pour faciliter vos développements en Javascript ou jQuery : rechercher une chaine de caractère dans n’importe quel élément HTML, vérifier si un élément existe avant de l’utiliser, sélectionner/de-sélectionner une série de cases à cocher, déplacer une option d’une liste à l’autre, etc. Via Taggle.
03/01/10
Animations CSS3 et équivalents en jQuery
Je ne suis pas encore fan de l’introduction des fonctions d’animation dans CSS3 et je préfère compter sur les frameworks Javascript qui prennent actuellement en compte un plus large éventail de navigateur. L’article CSS3 animations and their jQuery equivalents passe en revue une demi-douzaine d’effets introduits dans CSS3 et fourni le code Javascript pour obtenir le même résultat en jQuery. Jetez un oeil sur la page regroupant les effets en action.
21/12/09
Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6
Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément `li` pour émuler la pseudo-classe `:hover` pour Internet Explorer qui ne l’applique que sur les ancres `a`, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur `li:hover` avec la classe`li.sfHover`). Lire le reste de cet article »
16/12/09
Sélectionner les éléments par leur classe avec getElementsByClassName
Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML. Lire le reste de cet article »
15/12/09
jQuery image zoom effect
Image jQuery – Cet effet réalisé avec quelques lignes de jQuery (et un soupçon de CSS) applique un léger effet de zoom sur une image tout en affichant sa description au survol de la souris sur le conteneur. Voir la démonstration.
14/12/09
Emuler la propriété max-width pour IE6
maxWidthFixForIE6.js — Les expressions Javascript de Microsoft sont énormément utilisée pour pallier l’absence de support de telle ou telle fonctionnalité par pour IE6 en particulier ou Internet Explorer en général alors que leur utilisation grève les performances déjà inquiètantes du dernier de la classe. Il vaut mieux faire appel à du bon vieux Javascript !
window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
var container = document.getElementById("container");
container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}
08/12/09
Balance Columns — Équilibrer des colonnes avec Javascript
balance_columns — ce script astucieux et non instrusif vous permettra d’équilibrer des colonnes entre elles (contenu et barre latérale, par exemple). Les identifiants des blocs à équilibrer se placent dans l’en-tête du script et ce dernier se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.
25/11/09
Changement de design «on the fly» avec jQuery
Je vous recommande ce tutoriel clair et didactique qui reprend pas à pas les étapes permettant de permuter deux maquettes sur un clic. L’idée est de changer une classe CSS à la volée et d’arranger le design en fonction des éléments que l’on veut voir apparaitre ou non. Dans un cas, on aura une liste avec une miniature et une description, dans l’autre, les images seront plus grandes et le texte aura disparu.