Geckozone

bonjour chers collègues,

voilà, je veux faire comme les grands et ne plus développer qu'en XHTML ( transitional pour l'instant quand même ... )
Je souhaite intégrer un texte déroulant, dont voici le code ( c'est un fichier html tout prêt )

------------------------------------------------

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>

<head>
<title>test scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	body { text-align: left; font-size: 16px; margin: 2ex; color: #000000; background-color:#88DD88; font-family: verdana, sans, arial, helvetica, sans-serif;}
	.scroll { font-size:14px; font-family:Arial; color:#FFFFFF;}
</style>
</head>

<body>

<script language="JavaScript1.2" type="text/javascript">
<!--
scroll_largeur = 200;
scroll_hauteur = 90;
scroll_bgcolor = '';
scroll_pause_seconde = 2;
scroll_mode =1;
scroll_actuel = 0;

scroll_article = new Array;

scroll_article[0]="<strong>Mon premier paragraphe<\/strong><br \/>xxxxxxxxxxxxxxxx xxxxx x xxxx xxxxx xxxxxxxxxx xxxxxxx ...<br \/>";
scroll_article[1]="<strong>Mon deuxième paragraphe<\/strong><br \/>yyyyy yyyyy y yyyyyyyyyy yy yyyyyyyyy yyyy yyyyyyy yy yyyyyyyy...<br \/>";
scroll_article[2]="<strong>Mon troisième paragraphe<\/strong><br \/>zzzzzzz zzzzzzz zz zzzzzzzz zzz zzzzzzzzz z zzzzzzzz z ...<br \/>";

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

function scroll_start()	{
 if(scroll_mode == 1){
  scroller_haut = "s_articles_1";
  scroller_bas = "s_articles_2";
  scroll_mode = 0;
 }else{
  scroller_bas = "s_articles_1";
  scroller_haut = "s_articles_2";
  scroll_mode = 1;
 }
 scroll_nb_message = scroll_article.length-1;
 if(scroll_actuel == scroll_nb_message){
  scroll_suivant = 0;
 }else{
  scroll_suivant = scroll_actuel+1;
 }
 if(document.getElementById)
  document.getElementById(scroller_bas).innerHTML = scroll_article[scroll_suivant];
 scroll_top = 0;
 if(document.getElementById)
  setTimeout("scroll_action()",scroll_pause_seconde*1000)
}

function scroll_action(){
 scroll_top -= 1;
 document.getElementById(scroller_haut).style.top = scroll_top;
 document.getElementById(scroller_bas).style.top = scroll_top+scroll_hauteur;
 if((scroll_top+scroll_hauteur) > 0){
  setTimeout("scroll_action()",10)
 }else{
  scroll_stop()
 }
}

function scroll_stop(){
 scroll_actuel = scroll_suivant;
 scroll_start()
}
	
d('<div id="scroll_relativ" style="position:relative;width:'+scroll_largeur+';height:'+scroll_hauteur+';background-color:'+scroll_bgcolor+'">');
d('<div id="scroll_cadre" style="position:absolute;width:'+(scroll_largeur-8)+';height:'+(scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(scroll_largeur-8)+' '+(scroll_hauteur-8)+' 0)">');
d('<div id="s_articles_1" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:0;" class="scroll">'+scroll_article[0]+'<\/div>');
d('<div id="s_articles_2" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:'+scroll_hauteur+';" class="scroll">'+scroll_article[1]+'<\/div>');
d('<\/div><\/div>');
window.onload = scroll_start;
-->
</script>

</body>
</html>

--------------------------------------------------------------------------------

Notez que le code VALIDE en XHTML 1.0 trans.
Dans Moz ( Firebird 6.0.1 ) ça affiche un charabia incompréhensible.
Dans IE 5.5 ( bon OK c'est un mauvais exemple ;-) ) ça marche au poil

Et maintenant le plus fort: supprimez le doctype, et Mozilla l'affiche parfaitement !!! Alors que le document est censé être valide !

une idée ?

M'a l'air bien compliqué tout ça... <troll>tu peux pas utiliser marquee?</troll>

Il faudrait voir si ta console JavaScript n'affiche pas d'erreurs.

Mais sinon pour que ce soit lisible et débuggable, tu devrais complètement séparer ton script de ton contenu de la manière suivante:

- mettre les fonctions (à part la fonction d qui ne sert à rien) dans un tag script dans head et non dans body.
- remplacer les variables largeur, hauteur, et en général tout ce qui est dans tes attributs style par une vraie utilisation des CSS
- remplacer la série d'appels à "d" (qui ne fait rien d'autre que des document.write!) par le code html tout simplement.

En ce qui concerne tes "scroll_article[machin]", si tu as besoin de les modifier, au lieu de les définir dans le script, tu peux les mettre directement dans le code html et y accéder via le DOM (en remplaçant le tableau par une fonction qui parcourt les div et qui récupère leur contenu par exemple)

Et puis surtout ça te permettra d'avoir un contenu lisible même quand javascript est désactivé.

Ce source ne pose apparemment aucun pb ni avec Mozilla 1.4 FR ni avec Firebird 0.6.1 sur XP. Assurément, aucun charabia.

Il en pose ici, et c'est pas vraiment etonnant.
Passons sur le innerHTML, sur le document.write et autres trucs horribles, ce qui fait tout deconner, c'est que tu utilises des tailles sans unités.
genre top:4 ... 4 quoi... choux ? carottes ? elephants ? le navigateur ne sait pas. cette bouse de IE considere que c'est des px, mais mozilla, mis en mode strict a cause du doctype xhtml, considere que c'est du charabia, et mozilla a raison.

Suffit donc, a chaque fois que dans ton CSS ou ton js, tu utilises des tailles, tu mettes "px" derriere. Apres ca marche impec.

effectivement, je sais pas trop où j'avais la tête au moment où j'ai pondu cette infamie ( dans le ...knuut... sans doute )
merci bcp pour vos éclaircissements, surtout Mat, la prochaine fois j'essaierai de plus coder comme un goret dès le début

et d'appliquer les conseils de Benoit aussi

Je sais pas si ca vous gene, mais moi si

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>

<head>
<title>test scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { text-align: left; font-size: 16px; margin: 2ex; color: #000000; background-color:#88DD88; font-family: verdana, sans, arial, helvetica, sans-serif;}
.scroll { font-size:14px; font-family:Arial; color:#FFFFFF;}
</style>
</head>

<body>

<script language="JavaScript1.2" type="text/javascript">
<!--
scroll_largeur = 200;
scroll_hauteur = 90;
scroll_bgcolor = '';
scroll_pause_seconde = 2;
scroll_mode =1;
scroll_actuel = 0;

scroll_article = new Array;

scroll_article[0]="<strong>Mon premier paragraphe<\/strong><br \/>xxxxxxxxxxxxxxxx xxxxx x xxxx xxxxx xxxxxxxxxx xxxxxxx ...<br \/>";
scroll_article[1]="<strong>Mon deuxième paragraphe<\/strong><br \/>yyyyy yyyyy y yyyyyyyyyy yy yyyyyyyyy yyyy yyyyyyy yy yyyyyyyy...<br \/>";
scroll_article[2]="<strong>Mon troisième paragraphe<\/strong><br \/>zzzzzzz zzzzzzz zz zzzzzzzz zzz zzzzzzzzz z zzzzzzzz z ...<br \/>";

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

function scroll_start() {
if(scroll_mode == 1){
scroller_haut = "s_articles_1";
scroller_bas = "s_articles_2";
scroll_mode = 0;
}else{
scroller_bas = "s_articles_1";
scroller_haut = "s_articles_2";
scroll_mode = 1;
}
scroll_nb_message = scroll_article.length-1;
if(scroll_actuel == scroll_nb_message){
scroll_suivant = 0;
}else{
scroll_suivant = scroll_actuel+1;
}
if(document.getElementById)
document.getElementById(scroller_bas).innerHTML = scroll_article[scroll_suivant];
scroll_top = 0;
if(document.getElementById)
setTimeout("scroll_action()",scroll_pause_seconde*1000)
}

function scroll_action(){
scroll_top -= 1;
document.getElementById(scroller_haut).style.top = scroll_top;
document.getElementById(scroller_bas).style.top = scroll_top+scroll_hauteur;
if((scroll_top+scroll_hauteur) > 0){
setTimeout("scroll_action()",10)
}else{
scroll_stop()
}
}

function scroll_stop(){
scroll_actuel = scroll_suivant;
scroll_start()
}

d('<div id="scroll_relativ" style="position:relative;width:'+scroll_largeur+';height:'+scroll_hauteur+';background-color:'+scroll_bgcolor+'">');
d('<div id="scroll_cadre" style="position:absolute;width:'+(scroll_largeur-8)+';height:'+(scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(scroll_largeur-8)+' '+(scroll_hauteur-8)+' 0)">');
d('<div id="s_articles_1" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:0;" class="scroll">'+scroll_article[0]+'<\/div>');
d('<div id="s_articles_2" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:'+scroll_hauteur+';" class="scroll">'+scroll_article[1]+'<\/div>');
d('<\/div><\/div>');
window.onload = scroll_start;
-->
</script>

</body>
</html>

Pour le reste, je verrais après

les internautes qui n'ont pas javascript, ou qui l'ont désactivé, ne verront rien. (13% des internautes sont dans ce cas de figure d'après les dernières statistiques)

13%.. c'est quelle source ? Ca fait beaucoup je trouve ! Enfin, c'est pas négligeable. Ceux qui désactivent le JavaScript volontairement sont paranos et mal informés je pense.. Le JS est très pratique s'il n'est pas utilisé pour des co*****es (images qui suivent le curseur, détection barbare du navigateur..).

Tu as aussi des entreprises où le javascript est désactivé par le service informatique pour des raisons de sécurité, si ta boîte fait ça et qu'elle emploie 100.000 personnes ça chiffre vite

Ouais forcément

En parlant de désactivation de JS, mon IE a pété les plombs et (j'ai vérifié dans les params de sécurité) il n'exécute pas une seule ligne de JavaScript !
Sous XP SP1a, la "désinstallation" d'IE ajoute l'atribut fichier caché au programme iexplore.exe et le considère comme désactivé (depuis le SP1). Bravo Bill ! Pas moyen pour moi de réinstaller IE donc

Snap a écrit :Ouais forcément
En parlant de désactivation de JS, mon IE a pété les plombs et (j'ai vérifié dans les params de sécurité) il n'exécute pas une seule ligne de JavaScript !
Sous XP SP1a, la "désinstallation" d'IE ajoute l'atribut fichier caché au programme iexplore.exe et le considère comme désactivé (depuis le SP1). Bravo Bill ! Pas moyen pour moi de réinstaller IE donc

Pour réinstaller IE ou les autres bordel de windows comme outlock etc: http://www.generation-nt.com/index.php? ... uces&id=90

Puis après pour télécharger IE: http://www.generation-nt.com/index.php? ... uces&id=65

Snap a écrit :13%.. c'est quelle source ? Ca fait beaucoup je trouve ! Enfin, c'est pas négligeable. .

Selon cette source par ex : http://www.w3schools.com/browsers/browsers_stats.asp

la bonne source !!

J'ai eu du mal à trouver ce lien quand même, c saoûlant de pas le trouver quand tu veux faire du prosélytisme...

Geckozone

doctype XHTML et Mozilla

doctype XHTML et Mozilla

:)