NEIGE FIREFOX/IE

Commentaire de Zizouh le 10/12/2006 10:01:50

Bonjour,
Vraiment très bien ce script !
Je veux juste apporter une précision.
Pour ceux qui ont un site centré sur un ecran large : la neige ne tombe pas à droite de l'écran
exemple : sur www.septentrion-game.com
j'ai modifier:
ligne 24 : var i, doc_width = 1024, doc_height = 768; en var i, doc_width = 1680, doc_height = 1050;
ligne 46 : dx[i] = Math.floor(Math.random() * 1100)+20; en dx[i] = Math.floor(Math.random() * 2000)+20;
chez moi ça marche...
Encore merci à Wells

Commentaire de wizad le 11/12/2006 17:08:46

Pour la largeur de l'écran ne serait-il pas plutot possible de récupérer la valeur dynamiquen à partir de la config du client.

Commentaire de gabi124 le 15/12/2006 19:23:38

sa marche pas cette source quelqu'un pourrait m'aider

Commentaire de misslol06 le 17/12/2006 16:33:13

mille merci pour le script sympa juste pour moi débutante...impec, juste un tout petit soucis, moi c'est pas en largeur mais en hauteur, mes pages web font  1000sur 6000 de haut, que dois-je modifier et j'aimerai que la neige tombe plus et un peu plus vite, si on ne peut pas je laisse comme ça c'est trop mignon.....
misslol 44ans

Commentaire de barbapapaz le 17/12/2006 22:26:19

pour modifier la hauteur de tomber ça se passe à la ligne 93
    if (yp[i] < 850 && test>1)

la valeur 850 corresponds à la hauteur mets 6000 par contre il va te falloir mettre beaucoup de flocons pour couvrir toutes la page.

Sinon malgrés les modifs cité plus haut les flocon ne tombent pas souvent à droite chez moi

merci pour le script c'est le seul que j'ai trouvé marchant desuite sous ie et firefox

Commentaire de ifebo le 18/12/2006 10:46:41

Bonjour. Ceux et celles pour qui ça ne marche pas, je pense à Gaby124, devraient peut-être essayer de placer l'appel du JS externe en fin de page juste avant la balise </BODY> là ça doit marcher. lorsqu'il y a plusieurs js sur une page il faut changer leurs positions jusqu'à trouver celles ou ils fonctionnent tous.
Cette technique concerne surtout les gens comme moi qui ne s'y connaissent pas suffisemment pour pouvoir déterminer cette position rien qu'en regardant le script.

Commentaire de Mister Ki le 19/12/2006 17:47:55

Bonsoir,

Bravo pour ce site, et bravo à Wells pour ce script
installé en 5 mn il a fonctionné tout de suite.

L'effet avec une gif de neige empilé est très sympa !

Commentaire de misslol06 le 19/12/2006 20:33:46

coucou,

ben la neige font avant d'arrivée en bas de page    lol
j'ai fais la modif mais ça ne marche pas!!
tant pis

misslol

Commentaire de Wells le 20/12/2006 10:50:26

Je vais changer le nom des images sur mon site. Je fait ça car si vous ne modifiez pas votre script je vais avoir 50 sites qui pointe sur mes images et ça va écrouler ma bande passante. :)

Wells

Commentaire de FREMYCOMPANY le 21/12/2006 21:24:46

Voici une version du script améliorée qui tient compte de la taille réele du document, même une fois la neige "remontée" :

<<

function generateSnow() {
    var no = (window.ActiveXObject?75:200); // nombre de flocon
    var speed = 75; // Vitesse ou tombe les flocons
    var snowflake1 = "http://www.septentrion-game.com/IMAGE/noel/floc.gif"; // Nom de votre image
    var snowflake2 = "http://www.septentrion-game.com/IMAGE/noel/floc2.gif"; // Nom de votre image
    var snowflake3 = "http://www.septentrion-game.com/IMAGE/noel/floc3.gif"; // Nom de votre image
    var snowflake4 = "http://www.septentrion-game.com/IMAGE/noel/floc4.gif"; // Nom de votre image
    var nb=4;
      
    var ns4up = (document.layers) ? 1 : 0; // Version de netscape
    var ie4up = (document.all) ? 1 : 0; // Version d' Internet Exploreur
    var dx, xp, yp; // Coordonnées de positionnement
    var am, stx, sty; // amplitude and step variables
    var i, doc_width = 1024, doc_height = 768;
    if (ns4up)
      {
      doc_width = self.innerWidth;
      doc_height = self.innerHeight;
      }
    else if (ie4up)
      {
      doc_width = document.body.clientWidth;
      doc_height = document.body.clientHeight;
      }
      
    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    var i=0;
      
    for (i = 0; i < no; ++ i)
      {
      dx[i] = Math.floor(Math.random() * 1100)+20; // définition du coordonné
      if(dx[i]>doc_width-30) dx[i] = dx[i]-50;
      xp[i] = 5; // définition de la position
      am[i] = Math.random()*1;
      yp[i] = Math.random()*200-200;
      stx[i] = 0.02 + Math.random()/10; // set step variables
      sty[i] = 0.7 + Math.random(); // set step variables
      
      if (i == 0)
        {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
    document.write("absolute;opacity:1;filter:alpha(opacity=100); Z-INDEX: 50; VISIBILITY: ");
    document.write("visible; TOP: 5px; LEFT: 15px;\"><img style='width:4px;' src=\"");
    var typefloc = Math.floor(Math.random() * nb)+1;
    if(typefloc==1) document.write(snowflake1 + "\" border=\"0\"></div>");
        if(typefloc==2) document.write(snowflake2 + "\" border=\"0\"></div>");
    if(typefloc==3) document.write(snowflake3 + "\" border=\"0\"></div>");
        if(typefloc==4) document.write(snowflake4 + "\" border=\"0\"></div>");
    }
    else
    {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
        document.write("absolute;opacity:1;filter:alpha(opacity=100); Z-INDEX: 50; VISIBILITY: ");
        document.write("visible; TOP: 5px; LEFT: 15px;\"><img style='width:4px;' src=\"");
        var typefloc = Math.floor(Math.random() * nb)+1;
        if(typefloc==1) document.write(snowflake1 + "\" border=\"0\"></div>");
    if(typefloc==2) document.write(snowflake2 + "\" border=\"0\"></div>");
        if(typefloc==3) document.write(snowflake3 + "\" border=\"0\"></div>");
    if(typefloc==4) document.write(snowflake4 + "\" border=\"0\"></div>");
        }
      }
      
    function snowIE()
      { // Définition de l'animation pour Internet Exploreur
      doc_width = document.body.clientWidth;
      doc_height = document.body.clientHeight;
      for (i = 0; i < no; ++ i)
        {
        //deplacement vertical
        sty[i] = 0.2 + Math.random()*5;
        yp[i] += sty[i];
        
        //deplacement horizontal
        stx[i] = 0.08 + Math.random()/10;
        dx[i] += stx[i] + am[i]*Math.sin(dx[i]);
        
        test=Math.floor(Math.random()*(doc_height-(yp[i])));
        
        //tant que dans la page
      
        if (yp[i] < doc_height && test>1)
          {
          document.getElementById("dot"+i).style.top = Math.floor(yp[i])+"px";
          if (dx[i] < doc_width-5) document.getElementById("dot"+i).style.left = dx[i]+"px";
          }
        else //sinon on le remet en haut
          {
          yp[i]=0;
          dx[i] = 50 + Math.floor(Math.random() * doc_width)+5;
          }
        
        }
      setTimeout(snowIE, speed);
      }
      
    snowIE();
}
generateSnow();
setTimeout(function() {
    document.write=function(t) {
        document.getElementById("endPage").innerHTML+=t;
    }
},0)


>>

Commentaire de jsfabsolu le 23/12/2006 17:45:13

j'arrive pas à le faire marcher sur FF sur un fichier index_body.tpl de forum

Commentaire de c_raf le 25/11/2007 19:13:04

je n'arrive pas a le faire fonctionner sous IE7 .....

Commentaire de droopi68 le 15/12/2008 10:37:33

Merci pour ce script sympa, et merci à FREMYCOMPANY de l'avoir modifié, pour ma part il fonctionne correctement sous IE et FF,

j'ai collé le script modifié par FREMYCOMPANY dans un fichier Noel.js à la racine de mon site.

Dans ce fichier au niveau des lignes suivantes...
    var snowflake1 = "images/noel/floc.gif"; // Nom de votre image
    var snowflake2 = "images/noel/floc2.gif"; // Nom de votre image
    var snowflake3 = "images/noel/floc3.gif"; // Nom de votre image
    var snowflake4 = "images/noel/floc4.gif"; // Nom de votre image
j'ai indiqué le chemin vers les images (pour ma part: images/noel/..), c'est là ou je l'es ai collé !

Ensuite dans ma page html, juste avant </body> j'ai fais une insertion de la ligne suivante:
<script type="text/javascript" language="javascript" src="Noel.js"></script>

et c'est magique !! :o)

voilà j'espère que ces dernières indication pourrons être utiles à d'autres ;o)