DevParadise - Message défilant en javascript.

Programmation > JavaScript

Recherche :

Actualité Système Salon Concours Outils Programmation Devparadise Programmation HTML .Net JavaScript VBScript ASP PHP Visual Basic Perl Java Active X SQL XML WAP Delphi Graphisme Flash Web Design Promotion Référencement Publicité Valeur de votre site Outils Systèmes Windows Unix Linux Benchmark Hardware Réseaux locaux Droit Sécurité

Message défilant en javascript.

Auteur : Yvan VANWYNSBERGHE

Comment afficher un message défilant dans votre page HTML ? Script compatible IE (version 4 et +) et Netscape (version 4.X et 6).

Vous pouvez télécharger le code en cliquant ici .

Pour afficher un message défilant dans une page, il faut déclarer :

- Un javascript qui se charge de positionner le message et de le faire défiler,

- L'appel de la fonction javascript dans le tag <BODY>,

- Une ancre qui définit la position du message dans la page HTML,

- Un DIV qui contient le message à afficher.

Dans un premier temps, il faut déclarez entre les balises <HEAD> et </HEAD> le javascript suivant :

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

var ns4 = (document.layers)? true:false;   //NS 4

var ie4 = (document.all)? true:false;   //IE 4

var dom = (document.getElementById)? true:false;   //DOM

//Paramètres à définir

var DivWidth = 500; //Largeur du DIV contenant le message

var ScrollSpeed = 10; //Largeur du DIV contenant le message

//Déclaration des variables globales

var DivLeft = 0;   //Position du Div par rapport au côté gauche

var DivTop = 0;   //Position du Div par rapport au haut de la page

var MessageWidth = 0;   //Largeur du Message

var first = true;   //Indication de démarrage du défilement

var StartPos = 0;   //Position de départ du DIV contenant le message

var EndPos = 0;   //Position finale du DIV contenant le message

var MyPos = 0;   //Position courante du DIV contenant le message

var DivClipLeft = 0;   //Début de la partie visible du DIV

var DivClipRight = 0;   //Fin de la partie visible du DIV

function ScrollInit(ID_Anchor,Name_Anchor,ID_Div)
//Fonction faisant l'initialisation du DIV contenant le message
//et le lancement du défilement du message
    {
    if (dom)
        {
        pos = document.getElementById(ID_Anchor);
        MessageWidth = document.getElementById(ID_Div).offsetWidth;
        DivLeft = getLeft(pos);
        DivTop = getTop(pos);
        StartPos = DivLeft + DivWidth;
        EndPos = DivLeft - MessageWidth;
        MyPos = StartPos;
        document.getElementById(ID_Div).style.top = DivTop;

        }
    else if (ie4)
        {
        pos = document.all[ID_Anchor];
        MessageWidth = document.all[ID_Div].clientWidth;
        DivLeft = getLeft(pos);
        DivTop = getTop(pos);
        StartPos = DivLeft + DivWidth;
        EndPos = DivLeft - MessageWidth;
        MyPos = StartPos;
        document.all[ID_Div].style.posTop = DivTop;
        }
    else if (ns4)
        {
        pos = document.anchors[Name_Anchor];
        MessageWidth = document.layers[ID_Div].clip.width;
        DivLeft = pos.x;
        DivTop = pos.y;
        StartPos = DivLeft + DivWidth;
        EndPos = DivLeft - MessageWidth;
        MyPos = StartPos;
        document.layers[ID_Div].pageY = DivTop;
        }
    setInterval("Scrolling('"+ID_Div+"')", ScrollSpeed);
    }

function getLeft(MyObject)
//Fonction permettant de connaître la position d'un objet
//par rapport au bord gauche de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
    {
    if (MyObject.offsetParent)
        return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
    else
        return (MyObject.offsetLeft);
    }

function getTop(MyObject)
//Fonction permettant de connaître la position d'un objet
//par rapport au bord haut de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
    {
    if (MyObject.offsetParent)
        return (MyObject.offsetTop + getTop(MyObject.offsetParent));
    else
        return (MyObject.offsetTop);
    }

Vous pouvez voir vers le début de ce javascript, qu'il est nécessaire de fixer 2 paramètres :

- DivWidth (la largeur d'affichage du message en pixel),

- ScrollSpeed (la vitesse de défilement).

Ensuite, il faut déclarer dans le tag <BODY> l'appel à la fonction qui lance l'affichage du message défilant :

<BODY OnLoad="ScrollInit('ScrollPos','ScrollPos','MyScroll')">

Après, dans votre page HTML, à l'endroit où vous voulez que le message s'affiche, vous devez déclarer l'ancre :

<A id="ScrollPos" name="ScrollPos"> </A>

Enfin, dans votre page HTML avant le tag </BODY>, il faut déclarer le DIV contenant le message :

<DIV id="MonDiv" style="position:absolute;visibility:visible;">
Votre message ...
</DIV>

C'est terminé. Si vous lancez votre page dans un navigateur IE 4 et +, ou NS 4 et +, vous obtenez votre message défilant.

A lire aussi sur Devparadise.com :

Sauvegarder les pièces jointes des messages d'un dossier Outlook

Faire défiler verticalement un contenu dans une boîte en javascript.

Interdire le clic droit de la souris

Création d'animations en javascript.

Comment bien utiliser le javascript pour faire des effets dans une page HTML

A télécharger aussi sur Devparadise.com :

Source: Sauvegarder les pièces jointes des messages d’un dossier Outlook

Bibliothèque javascript pour créer des boîte à contenu défilant

Protéger les images de votre site

Sources pour créer des pop ups

Philboard 1.0


© 1997-2005 tous droits réservés Devparadise.com Les logos, et marques déposées sont la propriété de leurs détenteurs respectifs. Devparadise.com s'est engagé à respecter la confidentialité des données personnelles régies par la loi 78-17 du 6 janvier 1978. Déclaration C.N.I.L. n° 621623