CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 06 01:55:19

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

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

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

Information sur la source

Note :

9,00 / 10

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é :36 947 / 2 130

Auteur : Nocturne

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (17)

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

Les Membres Club peuvent 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

WEB-STAT VISITES VER.01

TROIS FLÈCHES POUR TROIS LIENS DE COULEURS - LINK, VISITED, ...

Toutes les sources de Nocturne

Sources de la même categorie

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

EFFET DE TEXTE EN CSS3 par kazma

COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36

AFFICHE DE 1 A PLEIN DE MESSAGES DANS LA BARRE DE STATUT DU ... par kangourouxxx

Commentaires et avis

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.

Commentaire de eve13 le 24/11/2008 15:35:45

Bonjour,
Le code marche parfaitement en local, mais dès que je passe le tout en ligne cela ne marche plus, pourtant je transfert bien tous les fichiers...
Quelqu'un aurait-il une explication ?
Merci d'avance

Commentaire de kesakoo le 02/01/2010 00:30:45

Bonjour Nocturne,
j'ai parcouru le code rapidement, en faissant des recherches pour savoir comment mon code avec setInterval soit conpatible avec les naviguateurs. Et, un point sur ton code ma surpris. Je precise que je m'y connais pas assez bien en JS. Toute fois, les lignes 42 et 43 m'ont interpellées...
41 # [...]
42 # }
43 # {window.setTimeout("msg_defilant()",100);}
44 # [...]
Je ne doutes pas que le script fonctionne.

Il y a deux crochés qui se suivent }{ .

Peut-me donner des explications, sur cette façon de coder en javascript ?
D'habitude je m'atendrais a quelque chose entre un croché fermant ('}') et un autre ouvrant ('{').

Merci de me repondre...
Tom

Commentaire de lewhechris le 23/06/2011 18:47:24

le code marche super bien,c sympa.mais ya t'il un moyen de le faie défiler sur toute la largeur de la page en allant de gauche à droite.j'ai beau tout essayer mais il marche pas!!

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Texte defilant [ par pascpascalou ] bonjour , je suis a la recherche d'un texte defilant pouvant contenir des photos pour mon site www.taekwondo-herblay.com et j'aimerais trouver ce java Erreurs sous IE... [ par Shenron42000 ] Salut, Voila, j'ai un script qui s'execute parfaitement sous FF et IE... il marche nikel sauf que IE me signal touours que ma page contient des erreu Probleme de texte defilant [ par foufidou ] bonjour tou le monde,j'essai de fair une teste defilant sur mes page fait en aspx (ASP .net), j'ai ajouter un script : (merci VictorWani) <MARQUEE texte defilant vertical en continu sans espace [ par catlaur ] Bonjour,Tout d'abord je tiens à vous remercier pour ce que vous faites.J'ai un script de texte défilant vertical avec marquee mais il y a un espace de texte defilant avec image stable [ par gouglou ] salut tout le monde,j'ai un probleme sur les news (le texte +image)d'un site.je veux que mon texte soit defilant mais l'image soit stable ,jusqu'à ce Selectionner du texte [ par yousfane ] Salutj'ai besoin d'une fonction javascript qui permet de selectionner le text d'un div comme si on le selectionne avec la souriset merci de vos repons lire ligne formattée(html) et l'afficher [ par Bestdoud ] Bonjour,je cherche une fonction qui me retourne la première ligne d'un fichier txt et dont le contenu est formaté en htmlce fichier se trouve au même petite question sur document.body.innerHTML [ par Bestdoud ] Bonjour,j'utilise la focntion document.body.innerHTML pour ajouter du texte dans ma page. et je me suis aperçu qu' à chaque ajout, la page était comme probleme de formulaire - le message n'arrive jamais au destinataire [ par dante20007 ] salut , je voudrais mettre un formulaire sur mon site qui, envoie un commentaire à mon adresse mail, mais lorsque je fais "envoyer", je ne reçois jama dégradé d'opacité sur du texte [ par Flachy Joe ] Bonjour, ô porteur de connaissance !Voila donc ma question :Est il possible d' (et de quelle manière peut on) appliquer un dégradé sur du texte de faç

Nos sponsors

Derniers Blogs

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011