Pages dynamiques : entrez-y de plein pied !

Ce qui est actuellement (et sans doute pour toujours) impossible à obtenir de façon parfaite avec les "pop-up" ou les tableaux (l'alignement précis) est parfaitement réalisable ! ..... à condition de s'allier les services de JavaScript.
Tant pis pour les intégristes et paranoïaques de la sécurité (heureusement rares !) qui désactivent les langages de script lorsqu'ils surfent sur les vagues d'Internet : ils ratent l'occasion d'afficher des pages dynamiques grâce à des moyens simples et très légers à mettre en place. Sans faire appel à des artifices sophistiqués et particulièrement gourmands en temps de téléchargement (je pense ici, notamment, aux "applets" et autres animations "Flash"), il est désormais possible d'animer des pages de façon satisfaisante en s'en tenant aux 3 langages de base que tout bon concepteur de site devrait apprendre : Html, Css et JavaScript. Il feront alors du DHTML, le HTML dynamique !

Voici une de ces applications qui intéressera, sans doute, bon nombre de concepteurs :





Brrrrrrr !

C'est le vide sidéral dans ce bloc ... !


tete
Pour bien comprendre :
  • Cet ensemble est identique à celui utilisé dans l'exposé à propos des calques
    et de l'introduction aux pages dynamiques : vous pourrez y trouver les règles.
  • Les blocs situés à gauche contiennent, ici aussi, une série de liens.
  • Lorsque vous les activerez, ils se superposeront exactement au bloc dans lequel vous lisez ce texte. Celui-ci l'est d'ailleurs déjà ...
  • Attention : contrairement à l'utilisation des "pop-up" vues dans un exposé précédent, elles ne s'élimineront pas mutuellement lors de l'activation du lien mais se superposeront ! Rappelez-vous qu'il s'agit de calques et non de fenêtres indépendantes : celles du "dessous" ne viendront pas se replacer au-dessus des autres car elles prennent l'ordre dans lequel elles sont écrites (en code source, évidemment). #1
  • Il faut donc les "effacer", en quelque sorte, à partir des liens situés à gauche. Les fichiers musicaux s'annihileront toutefois mutuellement lors du chargement !
Mauvaise surprise pour ceux qui n'utilisent pas le navigateur Internet  Explorer, à partir de la version 5 ... ! Tous les calques destinés à être affichés  à droite se sont empilés (dans l'ordre d'écriture !) comme un tas de crèpes !  Et il faut les effacer successivement pour pouvoir découvrir leur contenu ...      Micro$oft, quant à lui, obéit rigoureusement aux commandes du JavaScript  utilisé pour ces évènements. Bogue ou pas bogue ?
Il faut bien savoir qu'un calque est, par définition, superposable à un autre document ... Mozilla est donc dans le vrai et il s'agit d'une anomalie de IE : voyez en fin de cet exposé pour éviter cet inconvénient. #2

Contrairement aux "pop-up", le document ou l'objet appelé reste visible  lorsque l'ascenseur est activé et ne comporte pas de barre de titre, ce qui est  plus esthétique. Il peut comporter des éléments internes ou externes de  même que des liens vers des objets externes.
Cela permet d'envisager de nombreux domaines d'application !
Restent quelques petits inconvénients pour obtenir un résultat idéal :
  • Il faut fermer chacun des calques après l'avoir vu, sans quoi il restera "sous" la pile des calques affichés ultérieurement   #1
  • Il est actuellement impossible d'utiliser d'autres évènements issus de JavaScript telle une temporisation pour fermeture automatique ou un lien vers une page externe pour l'intégrer au calque actif.
  • Le dimensionnement de WMP est impossible : le calque affiche imperturbablement les commandes inférieures du lecteur, même si l'on n'en écrit pas les attributs !
Pour le reste, le résultat est intéressant car il permet ce qui, jusqu'à  présent, était parfaitement impossible, même avec des cellules dans une  table. Il ne manque que la souplesse de l'ordre d'affichage pour être parfait.
La pointe de Squewel en Ploumanach
juke-box     juke-box     juke-box

fermer la fenêtre

Pour Mozilla, le "plug-in" de lecture son doit être chargé

juke-box     juke-box     juke-box

fermer la fenêtre

Pour Mozilla, le "plug-in" de lecture son doit être chargé

juke-box     juke-box     juke-box

fermer la fenêtre

Pour Mozilla, le "plug-in" de lecture son doit etre chargé


Vous constatez que vous pouvez les dimensionner ... et par conséquent les positionner où vous voulez !

Ici, à gauche de la fenêtre choisie dès le départ pour l'affichage des blocs.

Rien ne vous empêche de les afficher tous les deux ...
Enfin, dernière démonstration : ici, le calque sous-dimensionné s'installe au centre de la fenêtre, ce qui permet d'entrevoir la possibilité de construction complexe de calques superposés ... Astuce intéressante : vous constatez que ce calque est trop petit pour afficher la totalité du texte. J'y ai tout simplement ajouté la règle overflow : auto afin d'appeler une barre de défilement. Dans le cas contraire, le texte aurait été tronqué ... Petit inconvénient : l'esthétique du bloc en prend un coup : ce n'est pas joli-joli ...
Et si vous le désirez, rien ne vous empêche d'installer des liens extérieurs :

Appel 1     Fermeture          Appel 2     Fermeture          Appel 3      Fermeture

Voyons maintenant comment obtenir ce résultat. Tout d'abord, installez le script suivant dans le <HEAD> (balises d'en-tête) de la page :

<script type="text/javascript"><!--
function affiche(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="visible";
} else if (document.all) {
document.all[id].style.visibility="visible";
} else if (document.layers) {
document.layers[id].visibility="visible";
} }
function efface(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="hidden";
} else if (document.all) {
document.all[id].style.visibility="hidden";
} else if (document.layers) {
document.layers[id].visibility="hidden";
} }
//--></script>

Ce script est censé permettre d'afficher ou "éteindre" des blocs de données ou d'éléments par (presque) tous les navigateurs, ce qui explique les 3 conditions possibles reprises dans les fonctions. Celles-ci sont simples : au nombre de deux, elles affichent (variable visible) ou effacent (variable hidden), selon le lien activé.
Ce dernier sera écrit comme suit :

<div id=identité_du_calque>
<a href="javascript:affiche('nom_du_bloc')" class=nom_de_classe>Afficher</a>
<a href="javascript:efface('nom_du_bloc')" class=nom_de_classe>Effacer</a>
</div>

Ces différents liens pointent vers les calques que vous aurez installé (écrit) à l'intérieur du calque principal (identifié ici sous le nom mensemble : voir exposé précédent) en réglant leur styles par la (les) lignes suivantes :

#identité_du_calque {position:absolute; top:0px; left:330px; width:425px; height:230px; background:black}

Attention : Le calque principal est déclaré en position:relative afin d'installer le bloc dans le flux de l'écriture normale de la page. Les différents calques intégrés dans la partie gauche (ceux comportant les liens) sont déclarés de la même façon. Rien ne vous empêche, évidemment, de les régler en position:absolute : les cotes destinées à les imbriquer sont dès lors à écrire très précisément. Quant aux différents blocs de données et d'éléments qui seront appelés par les liens et affichés à droite, ils seront réglés en position:absolute non par rapport aux bords de la page mais par rapport aux bords du calque parent. La règle reprise ci-dessus correspond au calque affiché à l'ouverture de cette page.

#1   Si l'utilisation d'un lien traditionnel pour afficher les blocs pose problème, il est toutefois possible de pallier à cet inconvénient. Il suffit pour cela d'utiliser une double commande que vous connaissez bien maintenant (si vous avez suivi l'ensemble de la rubrique ...) : l'évènement au survol du curseur de la souris sur un lien. Il faudra alors modifier quelque peu la ligne faisant appel au bloc à afficher et l'écrire de la manière suivante :

<a href="#" onmouseover="javascript:affiche('nom_du_bloc')"
onmouseout="javascript:efface('nom_du_bloc')"> Survolez ! </a>

... en ajoutant éventuellement un nom de classe pour modifier la couleur du lien au survol du curseur.
Essayez donc en utilisant ce faux lien : Survolez ici !     mais ne cliquez pas !
Naturellement, pour cette démonstration, j'ai inversé l'ordre d'affichage/effacement du bloc.

#2   Si Internet Explorer n'affiche pas automatiquement (en les empilant) les différents calques prévus dans la fenêtre, il s'agit d'un bogue. En effet, logiquement, ils devraient être tous affichés, empilés les uns sur les autres ! C'est d'ailleurs la réaction de Mozilla. Il faut donc qu'ils soient invisibles lors du chargement de la page.Pour obtenir ce résultat, il existe deux possibilités : soit utiliser le JavaScript et faire un ajout dans la balise <BODY> comme ceci :

<body onload="javascript:efface('calque1');efface('calque2');efface('calque3'); ...etc... ">

... soit ajouter une règle de style à chacun des calques destinés à être affichés, comme cela :

visibility:hidden

Voici donc de nouvelles perspectives pour améliorer votre site. A vos claviers !


retour