Forum d'entraide PHPFrance

Pour répondre à la demande d'alexbad:
Je poste ici une fonction de texte défilant en JavaScript & CSS,
compatible XHTML Strict

!

Cette solution en JavaScript à été codé par Mr N. de developpez.net.
Pour ma par j'ai juste simplifié l'écriture et supprimé 2 variables inutiles
du JavaScript, effectué l'externalisation de l'ensemble de la fonction et
l'optimisation du CSS

!

*.js

Code : Tout sélectionner

var defile;// l'element a deplacer 
var psinit = 580; // position horizontale de depart 
var pscrnt = psinit; 		
function texteDefile() { 
   if (!defile) defile = document.getElementById('defile'); 
   if (defile) { 
      if(pscrnt < ( - defile.offsetWidth) ){ 
         pscrnt = psinit; 
                } else { 
         pscrnt+= -1; // pixel par deplacement 
      } 
      defile.style.left = pscrnt+"px"; 
   } 
} 
setInterval("texteDefile()",20); // delai de deplacement

*.css

Code : Tout sélectionner

#cadrpg { width:600px; margin:0 auto; border:0; overflow:hidden;} 
#newshr { position:relative; width:580px; height:20px; overflow:hidden;  
          color:inherit; background:#FFFFFF url(news.gif); border:1px inset white; } 
#defile { position:absolute; margin-top:1px; background-color:transparent; }

(X)HTML

<div id="cadrpg"> 

 <div id="newshr">
  <a style="width:190px" id="defile" href="index.php">
  Voila un tres joli texte defilant</a>
 </div>

</div>

Pour le texte défilant on peut utiliser n'importe quel conteneur:
<a style="width:190px" id="defile" href="index.php"> ou
<div style="width:190px" id="defile"> ou
<span style="width:190px" id="defile"> ...

Encore un Grand Merci à Mr N. pour la fonction de base

!

Bravo pour ce code qui permet un défilement fluide tout en étant compatible XHTML strict.

J'ai amélioré un peu le code javascript pour permettre un arrêt du défilement onmouseover et le reprendre onmouseout.

Et pour un paramètrage aisé du code

j'ai développé une interface graphique. Vous pouvez composer votre "défilant" en direct et récupérer le code utile avec ce module.

En fait, il serait plus juste de parler d'objets défilants car on peut également faire défiler des images, des images cliquables, des liens...

EDIT du 13 janvier 2010 :

Mise à jour majeure (plusieurs objets défilants dans une même page, boucle continue avec espacement de retour paramétrable, aller-retour en option, pose paramétrable avant le départ, alimentation automatique depuis un tableau d'images etc.) plus d'infos ici.

L'interface graphique ainsi que plusieurs exemples sont toujours disponibles.

Et le petit bug mentionné par Jerome218 deux messages plus bas - la dernière ligne de son message - a été corrigé.

EDIT du 21 décembre 2010 :

Dernière mise à jour importante et toujours à la même adresse : la version 1.5 permet de choisir entre défilement horizontal ou vertical.
Par ailleurs, des fonctions de navigation ont été ajoutées pour un plus grand confort d'utilisation.

EDIT du 2 janvier 2011 :

L'interface graphique qui permet de composer un défilant sans rien avoir à programmer a été mise à jour pour proposer le défilement horizontal ou vertical.

EDIT du 28 janvier 2011 :

Mise à jour version 2.1 : on peut maintenant rentrer librement du texte et des images sans avoir à renseigner la dimension du défilant dans les paramètres de la fonction.

L'interface graphique a été complétée avec plus de fonctionnalités et d'exemples.

Un grand merci.

Simple, efficace, compatible aves les standars !

Et merci aussi pour l'interface de génération elle aussi très pratique

Merci pour ce super code...
j'ai un peu modifié le script pour le rendre dynamqiue en php
Un petit probleme toutefois... régulierement une partie du message est invisible... et en jouant de la sélection je devine qu'il est caché dans une seconde ligne de texte...
Si vous avez une idée de ce qui se produit et comment je pourrais gérer ce...
pour info, je donne une taille de 1000px au div #conteneur_defil et je calcule la taille #cadre_defil à 8 fois la longueur de mon texte.
La seule façon de gérer à été de réduire la taille du texte à 10px. donc si quelqun a une autre piste

Encore une petite question... lorsque je survol à la souris le texte s'arrete bien... mais onmouseout, il repart tres vite.
plutot embetant.
la encore, merci de votre aide

Si tu fais des essais successifs avec l'interface ci-dessus, tu verras que #conteneur_defil et #cadre_defil ont toujours la même dimension et correspondent uniquement à la largeur de la fenêtre d'affichage.

C'est la largeur de #defile qui doit être calculée et égale à la longueur de ton défilant (image + texte).
Si trop court : ton défilant est tronqué. Si trop long : il mettra + longtemps à se réafficher lors du deuxième passage.

Le but de ton code php, outre le fait d'alimenter le contenu du défilant, doit donc être de calculer la longueur de ton défilant pour le passer en paramètre de largeur à #defile. C'est ce que réalise cette interface.

Pour ta dernière question, c'est un bug erratique que j'ai déjà rencontré en phase de test mais qui se produit très rarement en utilisation normale.

Merci de ta réponse précise et rapide...

Bonjour
Je souhaite afficher un message qui peut être différent dans le temps et donc de longueur variable, comment calculer les bons éléments pour ne pas être perturbé par un message tronqué ou bien dont la partie espace est bien trop longue.
Comment gérer le code pour qu'également lorsque le dernier cacactère de la chaine disparait à gauche , le premier cacactère du message apparaisse dès lors à droite du bandeau.
Un grand merci pour votre réponse.

Je cherchais à faire défiler verticalement des produits dans un menu pour un site de vente en ligne (qui n'est pas fini donc que je ne nomerai pas ^^) tout en restant dans les règles du xhtml strict.

J'ai donc modifié la fonction postée par Lareine (et améliorée par AB), si ça peut servir à quelqu'un

.js :

Code : Tout sélectionner

var menu_defile;//l'élement a déplacer
var pscrnt = 0;//position verticale de départ
function texteDefile()
{
	if (typeof this.sens == 'undefined')
		this.sens = -1;
	if(!menu_defile)
		menu_defile = document.getElementById('menu_defile');
	if((pscrnt < -menu_defile.offsetHeight) || (pscrnt > 0))
		this.sens *= -1;
	pscrnt += this.sens * 1;//sens * nb de pixel par déplacement
	menu_defile.style.top = pscrnt+"px";
}
var timer = setInterval("texteDefile()", 50);//délai de deplacement

xhtml :

Code : Tout sélectionner

<div class="menu_deroulant" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval('texteDefile()', 50)">
	<span id="menu_defile">
bla bla bla
bla bla
bla bla bla
	</span>
</div>

.css

Code : Tout sélectionner

.menu_deroulant
{
	height: 15em;
	text-align: center;
	overflow: hidden;
	position: relative;
}

#menu_defile
{
	position: relative;
}

J'ai rajouté une fonctionalité : quand tout a défilé, ça fait marche arrière jusqu'au début et recommence (voir this.sens).

Voilà, et merci Lareine, comme je ne programme habituellement pas en javascript je commençais à désespérer de trouver la solution sans marquee :s

edit : j'ai viré 5/6 lignes qui ne servaient plus à à rien...

@monica33

Pour ceux qui veulent ne faire défiler que du texte en mode horizontal avec cette fonction, il existe une astuce simple : il suffit d'insérer le texte avec des espaces insécables et de supprimer l'attribut de largeur de "defile". Cela vous permettra de faire défiler n'importe quelle longueur de texte sans avoir à renseigner la largeur du texte défilant.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
var defile;// l'element a deplacer
var psinit = 280; // position horizontale de depart, doit être égale ou inférieure à la zone d'affichage définie dans #cadrpg et #newshr
var pscrnt = psinit;       
function texteDefile() {
   if (!defile) defile = document.getElementById('defile');
   if (defile) {
      if(pscrnt < ( - defile.offsetWidth) ){
         pscrnt = psinit;
                } else {
         pscrnt+= -1; // pixel par deplacement
      }
      defile.style.left = pscrnt+"px";
   }
}
setInterval("texteDefile()",20); // delai de deplacement 
</script>
<style type="text/css">
#cadrpg { 
width:280px; /*largeur de la zone d'affichage*/
margin:0 auto; 
border:0; 
}
#newshr {
position:relative; 
width:280px; /*largeur de la zone d'affichage*/
height:23px; /*hauteur de la zone d'affichage*/
overflow:hidden; 
color:inherit; 
background:#FFFFFF;  
border:1px solid  #CCCCCC; 
}
#defile { 
position:absolute; 
background:#FFFFFF;
}
</style>
</head>

<body>
<div id="cadrpg"> 
 <div id="newshr">
  <p id="defile">
  Voilà&nbsp;un&nbsp;très&nbsp;joli&nbsp;texte&nbsp;defilant.&nbsp;&nbsp;Vous&nbsp;pouvez&nbsp;entrer&nbsp;autant&nbsp;de&nbsp;texte&nbsp;que&nbsp;vous&nbsp;voulez&nbsp;tant&nbsp;que&nbsp;votre&nbsp;texte&nbsp;ne&nbsp;comprend&nbsp;pas&nbsp;d'espaces&nbsp;sécables.
  </p>
 </div>
</div>
</body>
</html>

Ce code fonctionnerait également pour une image (quelque soit sa taille) mais pas pour plusieurs images ni pour du texte + images. C'est pour ces derniers cas plus difficiles à traiter que j'ai développé cette interface.

Note : si vous voulez alimenter ce défilant avec du texte en php il vous suffit de faire

$message = str_replace(' ','&nbsp;',$message);

et

Code : Tout sélectionner

<body>
<div id="cadrpg"> 
 <div id="newshr">
  <p id="defile">
  <?php echo $message ?>
  </p>
 </div>
</div>
</body>

Bonjour à tous,

Petite question qui va vous sembler toute bête je pense :

Ou et comment est appelé le .js ?
Ou alors si j'ai rien compris qu'est-ce que je fais du .js ?

Merci, A+

Il s'agit d'un javascript externe à la page html il faut donc l'appeler par :

<script type="text/javascript" src="chemin/fichier.js"></script>

entre <head> et</head>

Yes, merci Truc (ou Machin, enfin qui que tu sois

).

J'ai une autre question, est-ce que ça marche si à la place du "blablabla.........." je veux afficher des news en PHP/MySQL ?

Merci

Bien sur regarde le message de AB

Si tu as des questions plus technique pour la suite il est préférable que tu les poses dans le forum "Débuter en PHP".

Ah OK.
Merci encore.
A+

Bonjour,

s'il nest pas trop tard, commant fait on pour calculer la largeur d'un texte

merci

Forum d'entraide PHPFrance

Texte Défilant Javascript et CSS compatible XHTML Stritct ;)

Texte Défilant Javascript et CSS compatible XHTML Stritct ;)

Texte et/ou photos défilants mode horizontal ou vertical

super script

largeur de texte