Aide pour correction d'un javascript matrix sous Firefox

Résolu
MatrixiaN Messages postés 8 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 28 septembre 2014 - Modifié par MatrixiaN le 25/09/2014 à 19:26
MatrixiaN Messages postés 8 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 28 septembre 2014 - 28 sept. 2014 à 05:34
Bonjour, je suis venu ici pour solliciter votre aide afin de corriger un script qui décorait mon site internet il y a une dizaine d'années et que j'adorais, il s'agissait d'une petite pluie de matrice (seulement composé de 1 et de 0) qui se calait à droite des pages et qui coulait tout doucement indéfinement.

Je me suis toujours débrouillé pour bidouiller le mysql, le php, le html, le design, mais je suis dans l'impasse totale pour ce qui est de corriger un javascript et le rendre compatible sous firefox. J'ai tenté Firebug mais ça ne m'a pas éclairé. J'ai essayé aussi de comprendre le langage et j'ai appris qu'il y a plein de choses qui merdouillaient, notamment avec les document.write contenu dans le code etc...

ce que je sais c'est qu'il peut certainement fonctionner mais qu'il est très très vieux et son codage doit être totalement infâme.

je voudrais donc trouver quelqu'un capable de le modifier de A à Z pour le rendre parfaitement fonctionnel avec les normes html d'aujourd'hui et compatible avec n'importe quel navigateur

Je tiens à préciser que j'en suis pas le créateur, et que je suis fan de l'effet donné par ce script, c'est le meilleur javascript de décoration que j'ai jamais trouvé (et pourtant j'en ai vu des tonnes qui envoyaient du lourd sur le net mais rien de tel que la simplicité)

il y a plein de scripts et d'effets matrix sur le net mais je les trouve tous inutiles et juste tape-à-l'oeil

Donc voilà, ça donne ça avec mon aperçu d'éditeur html (ça marche sous ie mais pas firefox)

page de démo (l'effet marche nikel sous ie) : http://matrixemxs.cluster007.ovh.net/matrix.php

2 gros screenshots :

http://matrixemxs.cluster007.ovh.net/gni.png
http://matrixemxs.cluster007.ovh.net/gni2.png

6 réponses

MatrixiaN Messages postés 8 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 28 septembre 2014
Modifié par MatrixiaN le 25/09/2014 à 19:28
VOICI MON CODE ORIGINEL QUI NE MARCHE PLUS SOUS FIREFOX MAIS TOUJOURS SUR IE (seulement maintenant, qui utilise ie ? :/ ) :


(à placer après la balise body, marche sous ie et n'importe quel aperçu d'éditeur html mais pas sous firefox)



<SCRIPT language=JavaScript>
if (document.all){
Cols=4;
Cl=20;
Cs=15;
Ts=14;
Tc='#008800';
Tc1='#00ff00';
MnS=6;
MxS=6;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,0);
document.write("<div id='Container' style='position:absolute;top:0;right:-"+Cs+"'>");
document.write("<div style='position:relative'>");
for(i=0; i < Cols; i++){
S[i]=I+=Cs;
document.write("<div id='A' style='position:absolute;top:0;font-family:comic sans ms;font-size:"
+Ts+"px;right:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
}
document.write("</div></div>");

for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS);
for(i=0; i < RC[j]; i++){
B[i]='';
C[i]=Math.round(Math.random()*1)+' ';
M[j]=B[0]+=C[i];
}
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
Y[i]+=Sp[i];

if (Y[i] > window.document.body.clientHeight){
for(i2=0; i2 < Cols; i2++){
RC[i2]=1+Math.round(Math.random()*Cl);
for(i3=0; i3 < RC[i2]; i3++){
B[i3]='';
C[i3]=Math.round(Math.random()*1)+' ';
C[Math.floor(Math.random()*i2)]=' '+' ';
M[i]=B[0]+=C[i3];
Y[i]=-Ts*M[i].length/1.5;
A[i].style.visibility='visible';
}
Sp[i]=Math.round(MnS+Math.random()*MxS);
}
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',20)
}
Cycle();
}
<!--Fin du Script-->
</SCRIPT>
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 25/09/2014 à 20:42
bonjour

retire la condition qui englobe tout le script

if (document.all){

}


et sur ces ligne rajoute px

Container.style.top=window.document.body.scrollTop;


A[i].style.top=Y[i];


Container.style.top=window.document.body.scrollTop+'px';


A[i].style.top=Y[i]+'px';



cours Forest cours !
0
MatrixiaN Messages postés 8 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 28 septembre 2014
Modifié par MatrixiaN le 25/09/2014 à 22:29
Bonjour kazma, tout d'abord merci pour ta réponse (j'essaye sur d'autres forums mais les retours ne sont pas forcément toujours ce que j'attends, c'est bel et bien l'origine du problème que je cherche à résoudre)

J'ai donc testé comme tu m'as dit en retirant la condition et en remplaçant les lignes que tu m'as indiqué mais la pluie n'apparait toujours pas sur firefox :/ Voilà une page avec le code en dur, pour qu'il n'y ait pas d'interférence avec d'autres scripts (tu peux regarder le code source) => http://matrixemxs.cluster007.ovh.net/matrixpur.php

J'en ai trouvé un qui lui ressemblait et qui fonctionne sous firefox mais il ne donne pas l'effet escompté et est buggé (lignes qui s'inversent, fenêtré, vitesse folle, apparition de scrollbar intempestive lors de la mise en place vers la droite etc...)
http://matrixemxs.cluster007.ovh.net/matrix4.htm

j'ai essayé de comprendre pourquoi il marchait sur firefox pour peut-être corriger mon javascript de base mais sans succès

(les 1 et les 0 me suffiraient comme déco, même si y'a pas de caractères chinois)
0
jordane45 Messages postés 38152 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 mai 2024 344
Modifié par jordane45 le 26/09/2014 à 21:42
Bonjour,

var Cols=4;
var Cl=20;
var Cs=15;
var Ts=14;
var Tc='#008800';
var Tc1='#00ff00';
var MnS=6;
var MxS=6;
var I=Cs;
var Sp=new Array();
var S=new Array();
var Y=new Array();
var C=new Array();
var M=new Array();
var B=new Array();
var RC=new Array();
var E=new Array();
var Tcc=new Array(0,0);
document.write("<div id='Container' style='position:absolute;top:0;right:-"+Cs+"'>");
document.write("<div style='position:relative'>");
for(i=0; i < Cols; i++){
 S[i]=I+=Cs;
 document.write("<div id='A_"+i+"' style='position:absolute;top:0;font-family:comic sans ms;font-size:"
 +Ts+"px;right:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
}
document.write("</div></div>");

for(j=0; j < Cols; j++){
 RC[j]=1+Math.round(Math.random()*Cl);  
 Y[j]=0;
 Sp[j]=Math.round(MnS+Math.random()*MxS); 
 for(i=0; i < RC[j]; i++){
   B[i]='';
   C[i]=Math.round(Math.random()*1)+' ';
   M[j]=B[0]+=C[i];
  }
}
 function Cycle(){
  var Container=document.getElementById('Container');
  Container.style.top=window.document.body.scrollTop;
  for (i=0; i < Cols; i++){
   var r = Math.floor(Math.random()*Tcc.length);
   E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
   Y[i]+=Sp[i];
    var A=document.getElementById('A_'+i);
   if (Y[i] > window.document.body.clientHeight){
    for(i2=0; i2 < Cols; i2++){
     RC[i2]=1+Math.round(Math.random()*Cl);  
     for(i3=0; i3 < RC[i2]; i3++){
        
      B[i3]='';
      C[i3]=Math.round(Math.random()*1)+' ';
      C[Math.floor(Math.random()*i2)]=' '+' ';
      M[i]=B[0]+=C[i3];
      Y[i]=-Ts*M[i].length/1.5;
      A.style.visibility='visible';
     }
     Sp[i]=Math.round(MnS+Math.random()*MxS);
    }
   }
   A.style.top=Y[i]+'px';
   A.innerHTML=M[i]+' '+E[i]+' ';
  }
  setTimeout('Cycle()',20)
 }
Cycle();


Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 27/09/2014 à 21:29
j'ai modifié le script en supprimant document.write qui fait tres moche



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


</head>
<body>
<script language=JavaScript>

Cols=4;
Cl=20;
Cs=20;
Ts=14;
Tc='#008800';
Tc1='#00ff00';
MnS=6;
MxS=6;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,0);

var elem=document.createElement('div');

elem.id='Container'
elem.setAttribute('style','position:absolute;width:30px;top:0px;right:-'+Cs+'px')

var elem2=document.createElement('div');
elem2.setAttribute('style','position:relative')

elem.appendChild(elem2);

for(i=0; i < Cols; i++){
S[i]=I+=Cs;

var elem3=document.createElement('div');
elem3.id='A'+i
elem3.setAttribute('style',"position:absolute;top:0px;font-family:comic sans ms;font-size:"+Ts+"px;right:"+S[i]+"px;width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden")
elem2.appendChild(elem3);
}

document.body.appendChild(elem);

for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);  
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS); 
for(i=0; i < RC[j]; i++){
 B[i]='';
 C[i]=Math.round(Math.random()*1)+' ';
 M[j]=B[0]+=C[i];
 }
}
function Cycle(){
Container.style.top=window.document.body.scrollTop+'px';
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';

Y[i]+=Sp[i];

if (Y[i] > window.document.body.clientHeight){
 for(i2=0; i2 < Cols; i2++){
 RC[i2]=1+Math.round(Math.random()*Cl);  
 for(i3=0; i3 < RC[i2]; i3++){
 B[i3]='';
 C[i3]=Math.round(Math.random()*1)+' ';
 C[Math.floor(Math.random()*i2)]=' '+' ';
 M[i]=B[0]+=C[i3];
 Y[i]=-Ts*M[i].length/1.5;

document.getElementById('A'+i).style.visibility='visible';
 }
 Sp[i]=Math.round(MnS+Math.random()*MxS);
 }
}
document.getElementById('A'+i).style.top=Y[i]+'px';
document.getElementById('A'+i).innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',20)
}
Cycle();

<!--Fin du Script-->
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>



cours Forest cours !
0
MatrixiaN Messages postés 8 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 28 septembre 2014
Modifié par MatrixiaN le 28/09/2014 à 05:49
kazma : Tu es UN DIEU !!!!

sérieux, merci et un grand grand bravo ! je suis sur le cul

Tu as pensé à tout, le fait qu'il soit calé à droite, avec quelques lignes, la vitesse est exactement celle qu'il faut, les lignes coulent uniquement vers le bas (youpiiii !!!), il fonctionne parfaitement sous firefox et surtout l'effet est parfait ! c'est en tout point ce que je voulais

la scrollbar principale de la page perd un peu la boule certes (sous ff) mais c'est déjà parfaitement exploitable et utilisable, j'essaierais de trouver une petite astuce au pire (i-frame ou autre s'il faut)

question toute bête : avant je mettais une simple balise b avant le début du script pour mettre les 1 et les 0 en gras, là je mets un code précis dans le javascript pour le mettre en bold ? mais je pense que j'ai juste à chercher sur mon ami google.

si tu as une soluce ou un tip pour inclure le javascript tout à droite (ou à droite mais un petit peu moins pour ne pas faire apparaitre la scrollbar du bas) sans l'effet de scrollbar fofolle sur le côté hésite pas.

on peut peut-être le "fenêtrer" directement dans la page sans avoir recours aux i-frames ou utiliser un tableau qui aurait cette fois une longueur et une largeur définie

encore merciiiiiiiiiiiiii (t'as une place de modo ou de tout ce que tu veux sur mon site quand tu veux ! mais je l'ai pas du tout fini et lancé officiellement encore )
0
Rejoignez-nous