Feux d'artifice ne marche pas sous FFRésolu

Question

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: javascripts pour site web

@karamel · Accepted Answer

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 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';

@karamel · Answer

document.layer sa n'existe plus depuis un moment voit comme ca javascripts pour site web

kepon72 · Answer

Merci beaucoup sa marche !

@karamel · Answer

pour un plus belle effet je me suis ammuser a ameliorer le scipt javascripts pour site web

kepon72 · Answer

Merci encore ! c'est encore mieux !

kepon72 · Answer

Je viens de trouver un nouvelle possibilités: lorsque l'on clique sur la page un petit feux d'artifice à lieu or le problème est le même il y à incompatibilité avec FF malgré mes changements que j'ai fait avec vos conseils...

Voici le code original:



javascripts pour site web

var ver  = navigator.appVersion;
var dom  = document.getElementById ? 1 : 0;
var ie5  = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n  = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
function mouseDown(e) {
if (sparksOn) {
var mousex = (n) ? e.pageX : event.x+document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y+document.body.scrollTop;
if (!sparksAflyin) {
for (var k = 0; k  (document.body.offsetWidth+document.body.scrollLeft))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top  = tempy;');
}
if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top  = tempy;');
}
j++;
    setTimeout("moveTo("+i+","+j+","+mousex+","+mousey+")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks  = 0;
   }
}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "visible";');
}
function HIDE(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "hide";');
}
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);





  
  


.


.



.


.


.


.


.


.


.


.








Et le code aprés mes modifications:


 
  javascripts pour site web
  

var ver  = navigator.appVersion;
var dom  = document.getElementById ? 1 : 0;
var n  = document.getElementById("sDiv");
var anim = document.getElementById("anim_");
var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;

function initMouseEvents() 
{
document.onmousedown = mouseDown; 
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}

function mouseDown(e) 
{
if (sparksOn) 
{
var mousex = (n) ? e.pageX : event.x + document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y + document.body.scrollTop;
if (!sparksAflyin) 
{
for (var k = 0; k  (document.body.offsetWidth+document.body.scrollLeft))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
document.n'+i+'.style.left = tempx;
document.n'+i+'.style.top  = tempy;
}
j++;
setTimeout("moveTo("+i+","+j+","+mousex+","+mousey+")",50)
}
else 
{
HIDE("n'+i+'");
totalSparks++;
}
if (totalSparks == 10) 
{
sparksAflyin = 0;
totalSparks  = 0;
}
}

function SHOW(divName)
{
if (document.all)
document.all.'+divName+'.style.visibility = "visible";
}

function HIDE(divName)
{
if (document.all)
edocument.all.'+divName+'.style.visibility = "hidden";
}

anim_0_x = new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y = new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x = new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y = new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x = new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y = new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x = new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y = new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x = new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y = new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x = new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y = new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x = new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y = new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x = new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y = new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x = new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y = new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x = new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y = new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);



 
  
  


.


.


.


.


.


.


.


.


.


.

@karamel · Answer

ce script aussi est tres ancien avec son lot d’incompatibilité comme (document.captureEvents) et (layer) qui n'existe plus et il faut aussi le rendre compatible avec xhtml le voila en état de marche javascripts pour site web

kepon72 · Answer

Merci beaucoup ! :) 
En fait j'ai toute une collection de script ancien mais qui son plutôt sympathique mais qui ne sont malheureusement pas (encore) compatible avec FF ou IE dans leurs dernières versions j'aimerais donc savoir quelles sont les erreurs d'incompatibilités les plus répandue afin que je puisse tous les corrigés j'ai quelque connaissance en JavaScript mais elles restent de bases, et j'aimerais beaucoup les approfondir.

Merci encore.

kepon72 · Answer

Quelqu'un peut-il m'aiguiller ou non ? Je veux juste savoir avec les codes que j'ai donner les principales erreurs et leurs solutions, je me débrouillerais moi-même pour la correction 
Merci d'avance.

kepon72 · Answer

Je te remercie beaucoup kazma c'est précisément la réponse que j'attendais.
Merci encore

Feux d'artifice ne marche pas sous FF

10 réponses

Votre réponse

Discussions similaires