Réaliser un journal déroulant

Vous désirez ajouter une note professionnelle à votre site ?

Vous désirez attirer l'attention du visiteur d'une manière différente ?

Vous voulez afficher une page sans ascenseur mais offrant malgré tout un maximum d'information ?

Alors, cet évènement est pour vous !

Il fait appel à la commande de "scrolling" d'un javascript dont la plus grande partie sera destinée à détecter les différents navigateurs utilisés sur la "grande toile".

Pour réaliser ce journal, vous avez essentiellement deux possibilités : soit l'installer dans la page en cours en y intégrant le script, soit faire une page qui ne contiendra QUE le journal. Dans le premier cas ... vous ne gagnerez pas de place et obligerez le visiteur à attendre la fin du défilement pour aller plus loin dans son exploration de votre site. Dans le second, pour pourrez placer celui-ci (le journal ... pas le visiteur !) où bon vous semblera. Attention : je force un peu la main aux utilisateurs de Netscape dans mon exemple : j'ai installé le journal dans un IFRAME ... mais vous verrez les différentes possibilités plus loin. Si vous tenez absolument à utiliser ce navigateur ... il y a des parades, heureusement !

Mais voyons d'abord la partie essentielle du script, à installer entre les balises <HEAD> :

 

<script type="text/javascript"><!--

var timerID = null;

var autoScrollOn = 1;

var scrollY = 0;

var maxY=888;

bName = navigator.appName;

bVer = parseInt(navigator.appVersion);

if (bName == "Netscape" && bVer >= 3) ver = "n3";

else if (bName == "Netscape" && bVer == 2) ver = "n2";

else if (bName == "Microsoft Internet Explorer" && bVer == 3) ver = "e3";

else if (bName == "" && bVer == "") ver = "e3";

else if (bName == "Microsoft Internet Explorer" && bVer == 4) ver = "e4";

else ver = "e3";

function ouvre(){

self.focus();

}

function defiltexte() {

if (ver !="e3"){

if ( navigator.userAgent.indexOf("Mozilla/2.0") == -1 && autoScrollOn ) {

this.scroll(0, 1*scrollY);

if ( scrollY > maxY ) {

scrollY = 0;

this.scroll(0, 0);

} else {

scrollY++;

}

timerID = setTimeout("defiltexte()", 39);

}

}

}

// --></script>

Une fois n'est pas coutume, je n'entrerai pas dans les détails d'écriture : il s'agit ici de "classiques" dans le domaine des fonctions et de leurs appellations dans Javascript. Elles peuvent faire appel à quelques réglages, essentiellement au niveau du rafraîchissement (rémise à zéro) et de la vitesse de défilement.

la temporisation entre le début d'affichage et le rafraîchissement de page est réglée par la valeur bleue.

le réglage de vitesse est repris en rouge dans le script. Plus le chiffre est élevé et plus ... la vitesse est lente.

j'ai laissé ces réglages tels qu'ils sont paramétrés dans mon exemple : cela vous donnera une idée ...

Il est utile de savoir que la vitesse de rafraîchissement dépendra de plusieurs facteurs : temps de chargement de la page, dimensions de la fenêtre choisie (IFRAME, pop-up ... ou page complète) et longueur du texte : à vous de tâtonner : il n'y a, dans ce cas, pas de valeurs précises ...

Il vous reste alors à ajouter, dans la balise d'ouverture du corps de la page :

<BODY BGCOLOR="couleur" onload="defiltexte();" onblur="ouvre()">

et refermer cette balise après vos réglages (couleurs, fond, etc ...).

J'attire votre attention sur onload : cette commande décrite dans un autre exposé vous laisse deviner que l'évènement peut être appelé par onclick également : à vous de choisir ...

Vous réaliserez une première page qui "accueillera" une seconde page contenant :

les deux parties du script de même que le texte à faire défiler.

Vous aurez alors essentiellement trois possibilités :

l'appel d'une fenêtre pop-up qui viendra se "coller" sur la page affichée lors de l'activation d'un lien

l'utilisation de la balise IFRAME (celle que j'utilise dans ce script) qui exclut d'office Netscape

l'appel de cette page défilante dans le cadre ... d'une page de cadres.

A vous de jouer !