Helper CSS

Effets « lightbox » CSS & Javascript sans framework

Effets lightbox sans framework — L’ouverture de nouvelles fenêtres popup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS  et comportant, une fois n’est pas coutume, du Javascript intrusif pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

Helper CSS

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.

Helper CSS

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 classeli.sfHover). →

Helper CSS

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.

Helper CSS

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";
}
Helper CSS

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.