TEXTE DÉFILANT, DEUX EFFETS, COMPATIBLE FIREFOX & IE defilant, texte, message, Source N°41372

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

Auteur : Nocturne

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

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

Cliquez pour voir la capture en taille normale

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.

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Msg_Defilant
- bg_bandeau_txt_480.gif 281 octets
- txt_defilant.jpg 34 969 octets
index.htm 3 220 octets

Télécharger le zip

Historique

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

Sources du même auteur

Toutes les sources de Nocturne

Sources de la même categorie

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

Commentaires

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
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
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
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.
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
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 ?
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, " "); // 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 name="modif_txt_deroulant" id="modif_txt_deroulant" class="span_text_deroulant">     </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 @+
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+
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
Commentaire de Nocturne le 12/07/2007 18:39:51

Merci pour tes observations, c'est maintenant corrigé.
a+
Commentaire de nico1610 le 12/07/2007 18:50:56

Merci à toi ;)
@+
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
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ô.
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

Discussions en rapport avec ce code source

Texte defilant par pascpascalou

Erreurs sous IE... par Shenron42000

Probleme de texte defilant par foufidou

texte defilant avec image stable par gouglou

Selectionner du texte par yousfane

lire ligne formattée(html) et l'afficher par Bestdoud

petite question sur document.body.innerHTML par Bestdoud

probleme de formulaire - le message n'arrive jamais au destinataire par dante20007

dégradé d'opacité sur du texte par Flachy Joe

afficher / masquer du texte quand clis sur titre par xzonz