Feux d'artifice ne marche pas sous FF

Résolu
kepon72 Messages postés 25 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 27 novembre 2011 - 10 févr. 2011 à 22:40
kepon72 Messages postés 25 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 27 novembre 2011 - 15 févr. 2011 à 18:11
Bonjour,
Voila j'ai trouver un code sur le net que j'aimerais mettre dans mon site or le problème est qu'une erreur de compatibilité à lieu mais aprés un pas à pas avec firebug je n'est rien trouver j'ai chercher les erreurs courrante d'incompatibilité entre IE et FF et rien ne marche.
Merci de m'aider.

Voici le code:

<html><head>
<title>javascripts pour site web</title>
<meta name="Description" content="des javascripts pour animer vos pages web">
<meta name="Robots" content="noindex,follow">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<layer name="a0" left="10" top="10" visibility="show" bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a1" left="10" top="10" visibility="show" bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a2" left="10" top="10" visibility="show" bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a3" left="10" top="10" visibility="show" bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a4" left="10" top="10" visibility="show" bgcolor="#00ff00" clip="0,0,1,1"></layer>
<layer name="a5" left="10" top="10" visibility="show" bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a6" left="10" top="10" visibility="show" bgcolor="#ff0000" clip="0,0,1,1"></layer>
<layer name="a7" left="10" top="10" visibility="show" bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a8" left="10" top="10" visibility="show" bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a9" left="10" top="10" visibility="show" bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a10" left="10" top="10" visibility="show" bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a11" left="10" top="10" visibility="show" bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a12" left="10" top="10" visibility="show" bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a13" left="10" top="10" visibility="show" bgcolor="#ff0000" clip="0,0,2,2"></layer>

































<script language="JavaScript">
var Clrs = new Array(9);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
Clrs[5] = 'ffff00';
Clrs[6] = '00ff00';
Clrs[7] = 'ffffff';
Clrs[8] = 'fffff0';
var sClrs = new Array(5);
sClrs[0] = 'ffa500';
sClrs[1] = '55ff66';
sClrs[2] = 'AC9DFC';
sClrs[3] = 'fff000';
sClrs[4] = 'fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function Fireworks() {
if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else if (document.layers) {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}
if (document.all) {
step = 5;
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
 }
}
else if (document.layers) {
step = 5;
for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers!
//var templayer = "a"+j;
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.layer.getElementById("a"+j).style.bgColor = initialStarColor;
if (currStep > 90)
document.layer.getElementById("a"+j).style.bgColor=Clrs[c];
document.layer.getElementById("a"+j).style.top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layer.getElementById("a"+j).style.left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
 }
}
currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];
if (document.all) {
Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
}
else if (document.layer) {
Dleft = window.innerWidth - 100;
Dtop = window.innerHeight - 100;
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
document.layer.getElementById("a"+j).style.top = Mtop;
document.layer.getElementById("a"+j).style.left = Mleft;
}
if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
 }
 }
}
Fireworks();
</script>

</html> 

10 réponses

@karamel Messages postés 1858 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 5 juillet 2024 153
15 févr. 2011 à 17:40
avant toute chose il faut avoir un editeur de texte de bon niveau comme notepad ++ celui que j'utilise car quand je selectionne un mot il met en vert tous les meme mot du script



ensuite il y a trois etapes

la premiere c'est d'eliminer tous ce qui est obsolète

la deuxieme c'est de gerer les différences entres navigateur

et la derniere c'est de faire en sorte que le script fonctionne en xhtml la aussi il y a des modifs a faire

si on prend l'exemple du premier script dès que j'ai vu la balise layer j'ai tout de suite compris que c'etait un vieux script qui fonctionnais pour ie et netscape
il faut savoir que le mode de fonctionnement de netscape a ete abandonné car apparement trop compliqué et seul est resté le mode de fonctionnement de ie qui a ete repris par tous les navigateur il y a quand meme des differences

donc j'ai d'abord retire tout le code qui concernais netscape les balise layer dans le html et pour le script quand je voyait

if (document.all) {
code
}
else if (document.layers) {
code
}


il ne restait plus que le code pour ie a savoir tout qui se trouvait dans if (document.all) document.all etant une propriete de internet explorer tout ce qui se trouve dans else if (document.layers) est donc a retirer car obsolete et vu qu'il n' a plus que le code pour ie les if (document.all) deviennent inutiles

il y aurra une exception dans ce que je vient de dire c'est a cette endroit

if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else if (document.layers) {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}


il faut le conserver mais le modifier en ne mettant que else

if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else{
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}



a ce moment on se retrouve pour la fonction avec ca

function Fireworks() {

if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else{
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}

step = 5;
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
 }

currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];

Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;

if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
 }
 }
}



il ne reste plus qu'a modifier les parties ou l'on rencontre cette syntaxe

starsDiv.all


dans ces parties on parcoure tous les elements qui se trouves dans le div principale et qui a comme id starsDiv et pour ce faire on va utiliser comme syntaxe

var elem=document.getElementById("starsDiv").getElementsByTagName("div")


qui fait la meme chose que

starsDiv.all


on modifiera aussi
document.all.starsDiv


par

document.getElementById("starsDiv")


a noter que ie comprend aussi cette syntaxes

ce qui donne


function Fireworks() {

var elem=document.getElementById("starsDiv").getElementsByTagName("div") notre ligne

if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else{
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}

step = 5;
for ( i = 0 ; i < elem.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
elem.style.backgroundColor=initialStarColor;
if (currStep > 90)
elem.style.backgroundColor=Clrs[c];
elem.style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
elem.style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
}

currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];

Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.getElementById("starsDiv").style.top = Mtop+document.body.scrollTop;
document.getElementById("starsDiv").style.left = Mleft+document.body.scrollLeft;

if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
}
}
}

on modifiera aussi
elem.style.background=Clrs[c];

par
elem.style.backgroundColor=Clrs[c];


ace stade le script fonctionne sur tous les navigateurs il ne reste plus qu'a le rendre compatible xhtml

pour ce faire on modifie en premier lieux la balise html

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

ensuite pour toutes les variales qui contiennes les couleur on leurs ajoute le signe dieze

Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
......


devient

Clrs[0] = '#ff0000';
Clrs[1] = '#00ff00';
Clrs[2] = '#000aff';
Clrs[3] = '#ff00ff';
Clrs[4] = '#ffa500';
......



et pour ces ligne on rajoute "px" pour pixel a la fin sinon ca ne marche pas

elem[i].style.top = (this.Mtop + this.yBase*Math.sin((this.currStep+i*5)/3)*Math.sin(550+this.currStep/100))+'px'
elem[i].style.left = (this.Mleft + this.yBase*Math.cos((this.currStep+i*5)/3)*Math.sin(550+this.currStep/100))+'px'


de meme pour ces lignes la avec une premiere ligne qui defini soit le body soit le head de la page afin de connaitre le scroll de la page methode qui est different entre navigateurs

var dde=(navigator.vendor) ? document.body : document.documentElement;
this.el.style.top = (this.Mtop+dde.scrollTop)+'px';
this.el.style.left = (this.Mleft+dde.scrollLeft)+'px';
3
Rejoignez-nous