Texte défilant

Bonjour à tous,

J'ai un script javascript dont le but est de faire défilé du texte.
Tout marche bien sous Fireofx mais sous IE le texte dépasse de son conteneur.
Il semblerait que le problème vienne du fait que IE gère mal la propriété CSS "overflow: hidden;".

Voici le code :

<script language="javascript" type="text/javascript">

var t;//on declare le timer
function bBouge()
{
var texte_defilant=document.getElementById('texte_defilant');//ion recupere la balise qui a pour id "texte_defilant"

var pxLeft=texte_defilant.style.left.replace('px','');//on recupere le chiffre ( sans le px a la fin )

var taille_texte=texte_defilant.offsetWidth;//offsetWidth c'est la taille du div.

var screenW=document.getElementById('slogan').offsetWidth;//taille de la balise <div> qui contient le msg defilant

if(pxLeft==0-taille_texte)//si les pixels sont arrivés par rapport au bord gauche a la taille du texte ( donnera donc une position negative, du genre -100 )

pxLeft=screenW;//on remet le texte a la fin ( tout a droite )

else
pxLeft--;//on baisse les pixels ( ce qui provoque le decalage vers la gauche)

texte_defilant.style.left=pxLeft+"px";//on attribue la nouvelle position au texte

t=setTimeout('bBouge();',25);//toute les 0.010 secondes on rappele la fonction a l'infini ( recursivement )

}

onload=function(){

document.getElementById('texte_defilant').style.left=document.getElementById('slogan').offsetWidth+'px';

t=setTimeout('bBouge();',25);

}
</script>

Le morceau de code correspondant au texte défilant :

<div id="slogan" onmouseover="clearTimeout(t);" onmouseout="bBouge()">
<span id="texte_defilant">
Utiliser le <a class="a2" href="pack.php">pack graphique</a> vous permet d'afficher toutes les pages du site plus rapidement ; en <a class="a2" href="pack.php">savoir plus</a>.
</span>
</div>
[code]

Le CSS correspondant :
[code]
#slogan {
height: 20px;
width: 738px;
margin: 3px 3px 5px 3px;
background-color: #7791A2;
border: 1px solid #5A5D57;
line-height: 12px;
text-indent: 5px;
overflow: hidden;
}
#texte_defilant{
position: relative;
}

Pour ceux qui aurait besoin d'une visualisation, voici à quoi ressemble le site : Pragmatus.
La page n'est pas à jour, elle ne contient pas les code ci-dessus mais c'est juste pour ceux qui veulent une visualisation.

Je suis preneur de toute forme de solutions. J
'avais déjà poster dans le forum XHTML pour un cas similaire, est ce qu'il est possible de modifier mon code Javascript pour résoudre mon prolème ?

Merci.
Modifié par LoK (15 Jun 2005 - 08:55)

LoK a écrit :
Bonjour à tous,

le but est de faire défilé du texte.

Il y a la balise <marquee> qui fonctionne sur la plupart des browsers récents.

Quel est l'interet de ce texte défilant réellement? Normallement ce genre de technique est utilisé pour afficher des des infos plus longues que le conteneur en economisant de la place, mais dans ton cas le texte est plus court que le bandeau, donc à part donner un côté kitsch et legèrement (!) beauf je vois pas du tout à quoi ça peut servir.

Salut Lok

je viens d'essayer ton code mais le résultat sous IE comme sous FF est sans appel : ça marche sans problème Est-ce que tu pourrais être un petit plus précis sur la nature de ton problème ?

LoK a écrit :

La balise <marquee> n'est pas une balise standart de la W3C, je préférai, dans la mesure du possible, ne pas l'utiliser.

En fait c'est pas pour rien qu'elle ne fait pas partie des specs, d'une part elle est proprio mais aussi c'est une balise exaspérante pour pas mal de monde
Donc plutôt que de se soucier de la validité de la chose, je me soucierais de l'utilité et de ce qu'en pensent les gens

Mais bon... c'est un point de vue.

Je te cite Jakon Nielsen (http://www.useit.com), le pape de l'ergonomie sur internet :

a écrit :
... contient du texte défilant. Le texte animé empêche les visiteurs de se concentrer sur les autres éléments de la page; par ailleurs, ce mode d'affichage est aussi peu plaisant qu'inéfficace. Le contenu défilant ne s'immobilise que quelques instants, de sorte que les visiteurs doivent se dépêcher d'en prendre connaissance avant qu'il ne disparaisse. Paradoxalement, la plupart des visiteurs auront tendance à ignorer cette zone malgré l'animation pourtant censée la faire ressortir... En effet l'expérience qu'ont généralement les utilisateurs des animations est qu'elles sont inintéressantes et que leur traitement nécessite plus d'efforts, de sorte qu'ils préfèrent les ééviter.

Je pense que je le laisserai et ferai un sondage sur mon site pour savoir si les utilisateurs le lisent ou pas et si le texte défilant les genent ou pas et j'agirais en conséquences.

Olivier a écrit :


elle est proprio .

Pas tant que ça. Testez sur vos navigateurs favoris :
http://www.w3.org/WAI/ER/IG/ert/test73A.htm

Il doit y avoir un moyen de rendre l'info accessible , ça vaut p'tête mieux qu'un js de 100 liqnes.
Ok, c'est pas standard et ça agresse le visiteur, mais comme lok souhaite cette animation et qu'il ne maitrise pas javascript, je proposait la moins mauvaise des méthodes. marquee a pas mal de paramètres et peut être éxécutée une seule fois pour limiter la gène.
Modifié par chmel (17 Jun 2005 - 20:08)

À rajouter dans vos userContent.css

/* Stop those <marquee> tags! */
marquee {
   -moz-binding: none !important;
   display: block;
   height: auto !important;
}

Un bon <marquee> est un <marquee> mort !
Modifié par Stephan (18 Jun 2005 - 00:48)

a écrit :

À rajouter dans vos userContent.css cligne

/* Stop those <marquee> tags! */
marquee {
-moz-binding: none !important;
display: block;
height: auto !important;
}

Un bon <marquee> est un <marquee> mort !

Aparement tout le mode à l'air contre les textes défilants, je pense que je vais réflechir à ca.
Mais du coup je sait pas où mettre mes petites informations importantes !