Boite defilante en javascript = bug sur design css

yannouk · 22 Mars 2004

Voici un js que j'utilise sur drimmo et qui fonctionne a merveille. Quand je veux l'utiliser sur le design css que je prepare, ca defile, MAIS: en position depart, tous les textes sont superposés, et le texte qui monte au dessus de la case passe dessus et reste donc visible. malheureusement j connais rien en js...et vous?

Code:

<script language="JavaScript1.2">
ejs_scroll_largeur = 110;
ejs_scroll_hauteur = 130;
ejs_scroll_bgcolor = '#FFFDF0';
/* Mettre ici le chemin de l'image de fond */
ejs_scroll_background = "";
/* Mettre ici le temps en secondes */
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='<a href="#"><strong><u><font size=2>menu infos</font></u></strong><br><br>Nouveau menu avec des informations sur l\'assurance, les credits ou prets, ainsi qu\'une rubrique juridique</a>';
ejs_scroll_message[1]='<a href="#"><strong><u><font size=2>FeedBack</font></u></strong><br><br>N\'hésitez pas à nous donner votre avis sur Drimmo, afin de nous permettre d\améliorer notre service</a>';
ejs_scroll_message[2]='<a href="#"><strong><u><font size=2>Ajoutez une annonce à vos favoris</font></u></strong><br><br>L\'équipe de drimmo vous souhaite une heureuse année 2004!!!</a>';
ejs_scroll_message[3]='<a href="clubannonces.php"><strong><u><font size=2>Nouvelle offre ClubAnnonces</font></u></strong><br><br>ClubAnnonces vous propose désormais une offre Internet + presse papier en publiant vos annonces sur France-soir</a>';

function d(texte)
	{
	document.write(texte);
	}

d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" class=txtpetit>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" class=txtpetit>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
	{
	if(ejs_scroll_mode == 1)
		{
		ejs_scroller_haut = "ejs_scroller_1";
		ejs_scroller_bas = "ejs_scroller_2";
		ejs_scroll_mode = 0;
		}
	else
		{
		ejs_scroller_bas = "ejs_scroller_1";
		ejs_scroller_haut = "ejs_scroller_2";
		ejs_scroll_mode = 1;
		}
	ejs_scroll_nb_message = ejs_scroll_message.length-1;
	if(ejs_scroll_actuel == ejs_scroll_nb_message)
		ejs_scroll_suivant = 0;
	else
		ejs_scroll_suivant = ejs_scroll_actuel+1;
	if(document.getElementById)
		document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
	ejs_scroll_top = 0;
	if(document.getElementById)
		setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
	}

function ejs_scroll_action()
	{
	ejs_scroll_top -= 1;
	document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
	document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
	if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
		setTimeout("ejs_scroll_action()",40)
	else
		ejs_scroll_stop()
	}

function ejs_scroll_stop()
	{
	ejs_scroll_actuel = ejs_scroll_suivant;
	ejs_scroll_start()
	}

window.onload = ejs_scroll_start;
</script>

yannouk · 22 Mars 2004

Je viens de trouver d'ou venait le probleme, et c'est assez surprenant:

LE DOCTYPE !!!!!!!!!!!!!!!!!!!!!!!

j'utilisais ca:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

si je mets rien, ca fonctionne...

c'est vraiment utile le doctype?
A+++

kriscus · 22 Mars 2004

yannouk a dit:
c'est vraiment utile le doctype?

Bien sûr que c'est utile, c'est même très important. C'est ce qui permet à ton navigateur de choisir quel mode de rendu utiliser pour le document. Sans doctype, point de validation.

Un petit tour sur http://openweb.eu.org s'impose

yannouk · 22 Mars 2004

je connais openweb...mais je veux dire:

si je respecte les standards, c'est pas pour afficher leur logo en gros et me gargariser...non, c'est juste pour les nombreux avantages que ca offre. Donc la validation w3c, je m'en contrefous.
est-ce que le doctype change reellement la facon dont la page est interprétée par les navigateurs? (mis a part le coup du calcul des largeurs, differents etre le w3c et le modele microsoft)

kriscus · 22 Mars 2004

yannouk a dit:
est-ce que le doctype change reellement la facon dont la page est interprétée par les navigateurs?

Oui ça change. Comment la navigateur va-t-il savoir s'il faut qu'il interprète la page en HTML 2.1 ou en XHTML 1.0 si rien ne lui dit ? En l'absence de doctype il lit le document en mode natif, soit à l'ancienne (c'est à dire non conforme).

yannouk · 22 Mars 2004

et ce mode natif, ca empeche la page d'etre lue dans les navigateurs non graphiques, dans les navigateurs recents, dans les navigateurs anciens.....? ou pas?
pkoi avec moz, opera et ie6, rien n'a changé

BadProcESs · 22 Mars 2004

Si, l'affichage de ton js

C'est bien la preuve qu'avec ou sans doctype, ce n'est plus du tout la même chose.

Monique · 22 Mars 2004

Bonjour yannouk,

Je ne m'y connais pas assez en JavaScript pour l'affirmer, mais il est fort possible que ce soit ton script qui ne soit pas valide http://openweb.eu.org/articles/html_au_xhtml/

Autres liens :
- http://selfhtml.selfhtml.com.fr/html/xhtml/differences.htm#script_style
- http://mozilla.tlk.fr/doc03.php
- http://www.mozilla.tlk.fr/doc05.php

As-tu essayé en plaçant ton script en fichier externe ?

Amicalement,
Monique

yannouk · 23 Mars 2004

oui, j'ai essayé ca ne change rien. Je me suis resolu a placer le script dans une iframe, mais j'aurais aimé eviter