Mettre le titre ici

Petit truc pour faire des slide-shows ďż˝ la Whygee

(C) Yann GUIDON / [email protected] 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 ...

plop

texte ...

plop

texte ...

the end !