Le TwiBlog

The one with Twidi

Aller au contenu | Aller au menu | Aller à la recherche

vendredi 23 septembre 2005

Javascript : getElementsBy.... CSS selector !

Les connaisseurs sauront combien peuvent être utiles les deux fonctions que sont

  • getElementById : récupérer un élément du DOM par son ID
  • get ElementsByTagName : récupérer un tableau d'éléments définis par un tag

Et bien voici quelques chose de très utile : récupérer un tableau d'éléments par un sélecteur CSS !

Deux scripts pour ça :

Je n'évoquerai pas les nombreuses possibilités offertes par ces scripts, mais néanmoins sachez que des outils tel que "csshover.htc" sont développés dans le même esprit (csshover.htc possède d'ailleurs une fonction GetElementsBySelect)

Il devient facile avec ce genre d'outil de développer ses propres htc ou équivalent, qui répondront à un besoin précis, plutôt que charger à chaque fois les htc qui peuvent ralentir le chargement de la page en l'analysant au démarrage.

mercredi 21 septembre 2005

Utiliser les sélecteurs CSS pour ajouter des évènements javascript

Même si mon titre n'est pas forcément très clair, c'est un outil fabuleux que je viens de découvrir : Behaviour : Using CSS selectors to apply Javascript behaviours

Cet outil permet, en utilisant des sélecteurs css comme descripteur, d'ajouter des évènements javascript à tout objet contenu dans une page, sans avoir à modifier le code xhtml de la page.

Le plus simple est de voir l'exemple exposé sur le site de l'auteur : http://bennolan.com/behaviour/

vendredi 16 septembre 2005

Survol d'éléments css avec internet explorer

Dans le design web, quelque chose qui manque vraiment à internet explorer, c'est la gestion des "hover" sur autre chose que des liens.

"hover", c'est une pseudo-class qui s'utilise de la façon suivante :

#mon_element:hover { monc_code_css }

Le css indiqué sera alors appliqué à l'élément au survol de ce dernier.

L'absence de cette fonctionnalité dans internet explorer frustre notre créativité.

Or il existe une solution. Un fichier "htc", qui modifie le comportement d'internet explorer. On connaissait déjà le magnifique mais lourd "ie7" (qui n'a rien a voir avec internet explorer 7, mais l'auteur a du utiliser ce nom dans l'idée de proposer tout ce qu'il aimerait voir dans internet explorer 7) que l'on trouvera ici : http://dean.edwards.name/IE7/.

Mais là point besoin de charger tout ça, nous utiliseront le "csshover.htc" que nous propose le cite http://www.xs4all.nl/~peterned/csshover.html

Comment l'utiliser ? Très simplement... Il suffit de rajouter dans sa css

body { behavior: url(csshover.htc); }

(en n'oubliant pas de placer le htc dans le même répertoire que le css ;)

Seul défaut de ce procédé, la feuille de style ne validera plus, il peut être alors pertinent de placer cette déclaration dans un css à part, importé grace à @import.