begin process at 2008 05 17 02:41:53
1 173 899 membres
32 nouveaux aujourd'hui
13 973 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TEXTE DÉFILANT, DEUX EFFETS, COMPATIBLE FIREFOX & IE


Information sur la source

Catégorie :Effets Classé sous : defilant, texte, message Niveau : Débutant Date de création : 04/02/2007 Date de mise à jour : 15/11/2007 21:57:42 Vu / téléchargé: 18 256 / 1 415

Note :
9 / 10 - par 2 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note


Description

Un code simple permettant de faire défiler, un texte, un message, dans une page html.
Compatible Firefox et IE.

Source

  • <html>
  • <head><title>Message défilant</title>
  • <style type="text/css">
  • .span_text_deroulant{FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana;FONT-WEIGHT:bold;FONT-SIZE:10pt;width:478px;COLOR:#FFFF99;letter-spacing: 0em; word-spacing: 0em;vertical-align:bottom;cursor:default;}
  • </style>
  • <SCRIPT type="text/javascript">
  • // Message défilant en javascript
  • // Nocture @ 2007
  • // Affiche un message défilant dans une page HTML
  • // Script compatible IE (version 6 & +) et Firefox (version 1.5 & 2)
  • // Le message a faire défiler
  • var notre_msg="Codes-Sources : www.javascriptfr.com, c'est gratuit et très patique... .::. Ne ratez pas les TechDays 2007 . . . . . . . ";
  • // Deux effets possibles avec mem_msg
  • // Effet 1 = sans effet, défilement normal,
  • // il faut mettre un maximum d'espaces pour enlever l'effet du glissement
  • // var mem_msg=' '; // 90 espaces
  • // Effet 2 = au démarrage, glissement du texte puis défilement
  • var mem_msg=' '; // seulement 1 espace
  • var pos_char=0; // variable de mémorisation de position caractère
  • function msg_defilant() {
  • var vitesse_msg = 80; // règle la rapidité, diminue = plus rapide, augmente = plus lent
  • // vérif. si position caractère supérieur a la longueur de la chaine
  • //if (pos_char >= notre_msg.length) {pos_char=0}
  • mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
  • //pos_char++;
  • pos_char = (pos_char + 1) % notre_msg.length;
  • // on limite la largueur en terme de carateres
  • var msg_tmpo=mem_msg; // variable temporaire
  • mem_msg="";
  • mem_msg=msg_tmpo.substring(msg_tmpo.length-48,msg_tmpo.length); // 48 caractères
  • msg_tmpo="";
  • msg_tmpo = mem_msg.replace(/ /g, " "); // remplace les espaces par : " "
  • // Ajout d'un décalage d'un espace a gauche entre le texte et l'image
  • msg_tmpo=" " + msg_tmpo;
  • // Insertion du texte
  • var b_txt_deroulant=document.getElementById("modif_txt_deroulant");
  • b_txt_deroulant.innerHTML=msg_tmpo;
  • window.setTimeout("msg_defilant()",vitesse_msg); // Re-lance la fonction
  • }
  • {window.setTimeout("msg_defilant()",100);} // Activation du message défilant
  • </SCRIPT>
  • </head>
  • <body bgcolor="#80A4E8" link="#000099" vlink="#000099" alink="#cc0000" style="scrollbar-face-color:#97B9FF;scrollbar-3dlight-color:#000000;scrollbar-darkshadow-color:#000000;scollbar-highlight-color:#000000;scrollbar-shadow-color:#000000;">
  • <table align="center">
  • <tr>
  • <td style="WIDTH:480px;HEIGHT:16px;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;vertical-align:middle;cursor:default;">
  • <div style="position:absolute;width:480px;height:16px;background:url(bg_bandeau_txt_480.gif);background-repeat:no-repeat;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;cursor:default;"> </div> <span id="modif_txt_deroulant" class="span_text_deroulant"> </span>
  • </td>
  • </tr>
  • </table>
  • </body>
  • </html>
<html>
<head><title>Message défilant</title>
<style type="text/css">
.span_text_deroulant{FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana;FONT-WEIGHT:bold;FONT-SIZE:10pt;width:478px;COLOR:#FFFF99;letter-spacing: 0em; word-spacing: 0em;vertical-align:bottom;cursor:default;}
</style>
<SCRIPT type="text/javascript">
// Message défilant en javascript
// Nocture @ 2007
// Affiche un message défilant dans une page HTML
// Script compatible IE (version 6 & +) et Firefox (version 1.5 & 2)

// Le message a faire défiler
var notre_msg="Codes-Sources : www.javascriptfr.com, c'est gratuit et très patique...    .::.    Ne ratez pas les TechDays 2007 . . . . . . .   ";

// Deux effets possibles avec mem_msg
// Effet 1 = sans effet, défilement normal,
// il faut mettre un maximum d'espaces pour enlever l'effet du glissement
// var mem_msg='                                                                                          '; // 90 espaces
// Effet 2 = au démarrage, glissement du texte puis défilement
var mem_msg=' '; // seulement 1 espace
var pos_char=0; // variable de mémorisation de position caractère

function msg_defilant() {
	var vitesse_msg = 80; // règle la rapidité, diminue = plus rapide, augmente = plus lent
	// vérif. si position caractère supérieur a la longueur de la chaine
	//if (pos_char >= notre_msg.length) {pos_char=0}
	mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
  	//pos_char++;
	pos_char = (pos_char + 1) % notre_msg.length;
	// on limite la largueur en terme de carateres	
	var msg_tmpo=mem_msg; // variable temporaire
	mem_msg="";
	mem_msg=msg_tmpo.substring(msg_tmpo.length-48,msg_tmpo.length); // 48 caractères
	msg_tmpo="";
	msg_tmpo = mem_msg.replace(/ /g, " "); // remplace les espaces par : " "
	// Ajout d'un décalage d'un espace a gauche entre le texte et l'image
	msg_tmpo=" " + msg_tmpo; 
	// Insertion du texte
	var b_txt_deroulant=document.getElementById("modif_txt_deroulant");
	b_txt_deroulant.innerHTML=msg_tmpo;
	window.setTimeout("msg_defilant()",vitesse_msg); // Re-lance la fonction
}
{window.setTimeout("msg_defilant()",100);} // Activation du message défilant
</SCRIPT>
</head>
<body bgcolor="#80A4E8" link="#000099" vlink="#000099" alink="#cc0000" style="scrollbar-face-color:#97B9FF;scrollbar-3dlight-color:#000000;scrollbar-darkshadow-color:#000000;scollbar-highlight-color:#000000;scrollbar-shadow-color:#000000;">
<table align="center">
	<tr>
		<td style="WIDTH:480px;HEIGHT:16px;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;vertical-align:middle;cursor:default;">
			<div style="position:absolute;width:480px;height:16px;background:url(bg_bandeau_txt_480.gif);background-repeat:no-repeat;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;cursor:default;"> </div>     <span id="modif_txt_deroulant" class="span_text_deroulant">     </span>
		</td>
	</tr>
</table>
</body>
</html>

Conclusion

Code compatible, Internet Explorer et Firefox.
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

12 juillet 2007 18:36:37 :
Mise à jour suite au commentaire de nico1610. Correction de : LANGUAGE="JavaScript" par type="text/javascript" Suppression du name de la balise <span>
15 novembre 2007 21:57:43 :
Modification du if par un modulo
  • signaler à un administrateur
    Commentaire de macgile le 20/02/2007 19:12:30

    Super :) Enfin un code simple et parfaitement fonctionnel pour des banniéres défilantes.

    Car sur le net certain applique le proverbe
    "Pourquoi faire simple, quant-ont peux faire compliqué"

    bonne continuation,
    macgile

  • signaler à un administrateur
    Commentaire de macgile le 20/02/2007 19:15:37

    j'ajouterais, qu'un bon developpeur est celui qui
    fait en quelques lignes ce que d'autres font en mille lignes pour (peut-être) faire la demonstration de leur talent.

    Ce commentaire n'inplique que moi.

    macgile

  • signaler à un administrateur
    Commentaire de dingue2salsa le 20/03/2007 11:27:53

    Ne fonctionne pas bien sous IE , défile sur 2 ou 3 lignes qq'ub sait pourquoi ? merci

  • signaler à un administrateur
    Commentaire de Nocturne le 20/03/2007 18:25:55

    Normalement, il fonctionne sous IE, testé avec IE6.
    Si il défile sur 2 ou 3 lignes, c'est un problème de largeur, pour le vérifier, il faut diminuer le texte a faire defiler et modifier le limite en terme de carateres :
    mem_msg=msg_tmpo.substring(msg_tmpo.length-48,msg_tmpo.length); // 48 caractères

    Autrement il faut agrandir la largeur de la cellule du tableau.

    Il faut egalement verifier la police car ce texte defilant ne fonctionne qu'avec certaines polices (caracteres de meme largeur).
    FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana

    Voila qq pistes.

  • signaler à un administrateur
    Commentaire de dingue2salsa le 21/03/2007 09:05:32

    super sympa pour ta réponse , j'ai réglé le problème
    bon dev

  • signaler à un administrateur
    Commentaire de jcdhl le 27/03/2007 18:12:00

    Est-il possible de faire la même chose mais pour un défilement vertical ?

  • signaler à un administrateur
    Commentaire de veiga le 15/05/2007 13:17:27

    Bonjour,
    Je n'arrive pas à le faire fonctionner sous Firefox,je n'ai pas essayé avec I.E,je ne connais le javascript.je joins:
    # <html>
    # <head><title>Message défilant</title>
    # <style type="text/css">
    # .span_text_deroulant{FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana;FONT-WEIGHT:bold;FONT-SIZE:10pt;width:478px;COLOR:#FFFF99;letter-spacing: 0em; word-spacing: 0em;vertical-align:bottom;cursor:default;}
    # </style>
    # <SCRIPT LANGUAGE="JavaScript">
    # // Message défilant en javascript
    # // Nocture @ 2007
    # // Affiche un message défilant dans une page HTML
    # // Script compatible IE (version 6 & +) et Firefox (version 1.5 & 2)
    #
    # // Le message a faire défiler
    # var notre_msg="INFORMATIONS IMPORTANTES";
    #
    # // Deux effets possibles avec mem_msg
    # // Effet 1 = sans effet, défilement normal,
    # // il faut mettre un maximum d'espaces pour enlever l'effet du glissement
    # // var mem_msg=' '; // 90 espaces
    # // Effet 2 = au démarrage, glissement du texte puis défilement
    # var mem_msg=' '; // seulement 1 espace
    # var pos_char=0; // variable de mémorisation de position caractère
    #
    # function msg_defilant() {
    # var vitesse_msg = 80; // règle la rapidité, diminue = plus rapide, augmente = plus lent
    # // vérif. si position caractère supérieur a la longueur de la chaine
    # if (pos_char >= notre_msg.length) {pos_char=0}
    # mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
    # pos_char++;
    # // on limite la largueur en terme de carateres
    # var msg_tmpo=mem_msg; // variable temporaire
    # mem_msg="";
    # mem_msg=msg_tmpo.substring(msg_tmpo.length-28,msg_tmpo.length); // 48 caractères
    # msg_tmpo="";
    # msg_tmpo = mem_msg.replace(/ /g, "&nbsp;"); // remplace les espaces par : "&nbsp;"
    # // Ajout d'un décalage d'un espace a gauche entre le texte et l'image
    # msg_tmpo="&nbsp;" + msg_tmpo;
    # // Insertion du texte
    # var b_txt_deroulant=document.getElementById("modif_txt_deroulant");
    # b_txt_deroulant.innerHTML=msg_tmpo;
    # window.setTimeout("msg_defilant()",vitesse_msg); // Re-lance la fonction
    # }
    # {window.setTimeout("msg_defilant()",100);} // Activation du message défilant
    # </SCRIPT>
    # </head>
    # <body bgcolor="#80A4E8" link="#000099" vlink="#000099" alink="#cc0000" style="scrollbar-face-color:#97B9FF;scrollbar-3dlight-color:#000000;scrollbar-darkshadow-color:#000000;scollbar-highlight-color:#000000;scrollbar-shadow-color:#000000;">
    # <table align="center">
    # <tr>
    # <td style="WIDTH:480px;HEIGHT:16px;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;vertical-align:middle;cursor:default;">
    # <div style="position:absolute;width:480px;height:16px;background:url(bg_bandeau_txt_480.gif);background-repeat:no-repeat;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;cursor:default;">&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span name="modif_txt_deroulant" id="modif_txt_deroulant" class="span_text_deroulant">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    # </td>
    # </tr>
    # </table>
    # </body>
    # </html>

    J'ai modifié uniquement le messsage et le nombre de caractères,merci d'avance pour la réponse et @+

  • signaler à un administrateur
    Commentaire de Nocturne le 15/05/2007 18:34:21

    salut veiga,
    Je viens d essayer ta page, elle fonctionne chez moi avec IE6 et Firefox 2.
    Je ne sais pas quoi te dire, regarde dans les options de Firefox au cas ou.
    Bonne chance
    a+

  • signaler à un administrateur
    Commentaire de nico1610 le 12/07/2007 18:06:43

    il y a de grave erreur W3C qui n'endomage pas le code si on les corriges :
    >> la balise <script> avec l'attribut language est un attribut miscrosoft inventé par microsoft pour IE
    Il FAUT l'éviter et utiliser l'attribut suivant : <script type="text/javascript"> (...) </script>

    >> la balise <span> et une balise qui ne contiens pas l'attribut name réservé au formulaire !

    Enfin pour finir le javascript est bien fait, dommage que tu ne sois pas plus attentif a l'HTML et heureusement pour toi que les navigateurs internet sont conciliant sinon ton javascript ne pourrai pas marcher !

    Mais bon vu qu'on est sur Javascriptfr.com et non htmlfr.com :
    Note : 9/10

    Bonne chance pour la suite

  • signaler à un administrateur
    Commentaire de Nocturne le 12/07/2007 18:39:51

    Merci pour tes observations, c'est maintenant corrigé.
    a+

  • signaler à un administrateur
    Commentaire de nico1610 le 12/07/2007 18:50:56

    Merci à toi ;)
    @+

  • signaler à un administrateur
    Commentaire de JackNUMBER le 19/08/2007 18:29:42

    veiga > peut-être que tu n'as simplement pas enlever les # en débuts de lignes...

    et au fait, est-il possible d'arrèter le défilement; je veux dire que le texte ne s'affiche qu'une fois.

    merci, super script :P

  • signaler à un administrateur
    Commentaire de Anthed le 15/11/2007 11:49:02

    Quelques idées qui ne changent pas grand chose mais qui sont toujours bonnes à prendre :

    1. Tu peux remplacer :
    if (pos_char >= notre_msg.length) {pos_char=0}
    pos_char++;

    par:
    pos_char = (pos_char + 1) % notre_msg.length;

    -> modulo, c'est plus sympa que if ...

    2. Une fonction qui s'auto-appelle avec setTimeout peut être remplacé par un setInterval. En plus, ça permet aux différents appels d'être plus réguliers dans le cas où la fonction est un peu lourde. Si, par exemple, son temps d'exécution se situe entre 15 et 50 ms et que ton intervalle est de 100ms, les appels se feront entre 115 et 150ms alors qu'avec setInterval, ce sera bien toujours 100ms (attention toutefois de ne pas mettre un temps trop petit, si la fonction peut prendre plus de temps que l'intervalle, bonjour l'affichage ...)

    Enfin, pour répondre à JackNumber, il suffit d'introduire une variable globale en guise de compteur, de l'incrémenter à chaque passage dans la fonction et d'interrompre les appels à la fonction dès que le compteur atteint une certaine valeur (n * la longueur du texte pour le faire défiler n fois).

    Tchô.

  • signaler à un administrateur
    Commentaire de Nocturne le 15/11/2007 22:08:43

    Bonne remarque d'Anthed concernant la modification du if par un modulo: Modif effectué
    //if (pos_char >= notre_msg.length) {pos_char=0}
    mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
    //pos_char++;
    pos_char = (pos_char + 1) % notre_msg.length;

    Parcontre je reste sur l'utilisation de setTimeout car la fonction setInterval n'est pas reconnu par tous les navigateurs.

    Merci pour tes idées.

Ajouter un commentaire

Appels d'offres

Pub



CalendriCode

Mai 2008
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Téléchargements

Boutique

Boutique de goodies CodeS-SourceS