DevBlog

Pour faire défiler un texte en XHTML, le W3C n’autorise pas la balise marquee (ce qui est assez logique sémentiquement : faire défiler un texte relève de la forme et non du fond).

Voici un petit script JS qui permet de faire défiler un texte de droite à gauche.

Code HTML :

<div id='marquee-wrapper'>
<span id='marquee'>
Mon texte à faire défiler
</span>
</div>

Code CSS :

#marquee-wrapper
{
position:relative;
width:100%;
overflow:hidden;
height:100%;
}

#marquee
{
position:absolute;
top:0px;
left:0px;
white-space : nowrap;
}

Et le code JS :

La fonction JS :

function marquee(idWrapper,idMarquee,vitesse)
/*
* idWrapper : l'identifiant du div autour du span contenant le texte à faire défiler
*	idMarquee : l'identifiant du span autour du texte
*	vitesse : nombre de millisecondes entre chaque déplacement de 1px
*/
{
var oIdWrapper=$('#'+idWrapper);
var oIdMarquee=$('#'+idMarquee);

var width=oIdMarquee.width();
var width2=oIdWrapper.width();

id_inst=setTimeout(function() {marquee(idWrapper,idMarquee,vitesse)},vitesse);

var l=parseInt(oIdMarquee.css('left'));
oIdMarquee.css({left:(l-1)+'px'});

if((-parseInt(oIdMarquee.css('left')))>=(width))
{
oIdMarquee.css({left:(width2)+'px'});
}
}

L’appel de la fonction :

$(window).load(
function(){
marquee('marquee-wrapper','marquee',10);
}
);