Petit truc pour faire des slide-shows à la Whygee

 

(C) Yann GUIDON / whygee@f-cpu.org 08/2005 Some functions, behaviour as well as rendering might not work as expected, it was designed for Mozilla. The code was created for compactness, convenience, but not for compatibility and it's not a P0werP01nt imitation. Adding M$IE pseudo-compliance decupled the hacking factor !

Les seules touches qui fonctionnent sont : droite/bas, haut/gauche, home, end. La souris n'est pas traitée.

L'intéraction, la présentation et les fonctions sont minimales pour se concentrer uniquement sur les informations à communiquer.

L'idée du bidule est d'avoir plusieurs "pages" se recouvrant les unes les autres, pour ne pas ralentir l'affichage lors d'une transition. Au début j'ai utilisé zIndex mais là ça marche avec la propriété 'visibility'. Si du JavaScript est intégré, le temps de démarrage et d'exécution se ressent uniquement au chargement du document HTML, pas lors d'une transition.

Un truc pratique c'est la génération automatique du menu, ce qui évite d'avoir à maintenir les titres à la main (un peu à la LaTe_X). Le titre de chaque page est dans le champ id="titre" du div.

Le menu a même son scrollbar quand il devient trop long. La "page" (div) courante est sur fond bleu. Le focus dessus permet à ce div d'autoscroller si on utilise les flèches pour passer d'une page à l'autre.

Pour que le brouteur puisse générer le menu, les "pages" sont dans des <div>s à l'intérieur d'un autre <div>, ce qui facilite la recherche dans l'arbre DOM (on a au moins un nom d'id à chercher en premier). Tous les sous-<div>s sont ajoutés au menu dans l'ordre d'écriture du source.

Au début, tout allait bien : je codais clean et facile pour Moz et ça marchait impec'.

Puis des gens ont dit que ça foirait lamentablement sous M$IE (c'est normal, faut avouer). J'en ai déterré un et vu que les incompatibilités ne sont pas nombreuses. Mais elles sont super chiantes !!!

Sous Moz, c'est simple : on peut définir les dimensions d'une zone <div> avec left, right, top, bottom, width, height. M$IE ne reconnait pas bottom dans le CSS.

Ca pose un vrai problème d'interaction avec les scrollbars !!! Si un <div> dépasse par en bas, toute la fenêtre aura un scrollbar vertical et les touches haut/bas joueront dessus. gaaaaaahhhh !

Donc il faut forcer la taille des <div>s. Mais sans bottom c'est super galère car on ne connait pas la taille de la fenêtre ! En plus, bottom réagit automatiquement au redimensionnement (appui sur F11 par exemple). Alors que JavaScript ne fournit pas d'événement de redimensionnement de la fenêtre :-/

La solution utilisée ici est de redimensionner tous les <div>s au démarrage en lisant la propriété document.body.clientHeight mais celle-ci renvoit des dimensions différentes selon le brouteur !!

Donc encore un autre hack à la con : il faut "détecter" le brouteur pour adapter la valeur.

Le résultat de la cure de portabilité est pire qu'au début. En particulier il faut recharger la page si la taille de la fenêtre est changée. Cela m'a forcé à remettre le code de gestion des cookies pour ne pas avoir à retrouver manuellement la page qui était visualisée.

Sans parler du code lourd et pas beau ni concis. On ne me reprendra plus à faire du code portable !!!

texte ...
texte ...
texte ...
texte...PourVérifierLeFonctionnementDesScrollbars
texte ...
texte ...
texte ...
texte ...
texte ...
texte ...
texte ...

texte ...

texte ...

texte ...

plop

texte ...

texte ...

texte ...

texte ...

texte ...

texte ...

texte ...

plop

texte ...

texte ...

texte ...

texte ...

texte ...

the end !