Neige sur forum, que sur les côtés

[Fred1208]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.forseps.org

Description du problème

Bonjour.

J'utilise le script suivant :

Code:

<script type="text/javascript">


snow_img = "http://i68.servimg.com/u/f68/15/15/36/09/snow210.png";

snow_no = 15;

if (typeof(window.pageYOffset) == "number")
{
   snow_browser_width = window.innerWidth;
   snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
   snow_browser_width = document.body.offsetWidth;
   snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
   snow_browser_width = document.documentElement.offsetWidth;
   snow_browser_height = document.documentElement.offsetHeight;
}
else
{
   snow_browser_width = 500;
   snow_browser_height = 500;   
}

snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];

for (i = 0; i < snow_no; i++)
{
   snow_dx[i] = 0;
   snow_xp[i] = Math.random()*(snow_browser_width-50);
   snow_yp[i] = Math.random()*snow_browser_height;
   snow_am[i] = Math.random()*20;
   snow_stx[i] = 0.02 + Math.random()/10;
   snow_sty[i] = 0.7 + Math.random();
   if (i > 0) document.write("<\div id="snow_flake"+ i +"" style="position:absolute;z-index:"+i+""><\img src=""+snow_img+"" border="0"><\/div>"); else document.write("<\div id="snow_flake0" style="position:absolute;z-index:0"><a href="http://peters1.dk/tools/snow.php" target="_blank"><\img src=""+snow_img+"" border="0"></a><\/div>");
}

function SnowStart()
{
   for (i = 0; i < snow_no; i++)
   {
      snow_yp[i] += snow_sty[i];
      if (snow_yp[i] > snow_browser_height-50)
      {
         snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
         snow_yp[i] = 0;
         snow_stx[i] = 0.02 + Math.random()/10;
         snow_sty[i] = 0.7 + Math.random();
      }
      snow_dx[i] += snow_stx[i];
      document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
      document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
   }
   snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();
</script>

Quand je crée une page HTML avec ça, cela marche.
Si j'essaie de créer un code javascript avec ce code, cela ne fonctionne pas, je ne sais pas pourquoi.

Je voudrais me servir de ce code mais qu'il ne neige pas sur l'emplacement où on écrit les messages.
J'ai su faire il y a un moment en créant un z-ndex dans le javascript.

Sur le CSS :

#content{
position: relative;
z-index: 2;
}

Dans le java script
z-index: 1

ça marchait très bien.

Si quelqu'un a une idée pour que ce code fonctionne comme ça...

Merci d'avance.

Fred

[Fred1208]

Le lien de la page html (avec 25 flocons : www.forseps.org/h10-neige

[Invité]

Bonjour,

Il faudrait enlever la balise ouvrante et fermante et mettre le code comme ceci:

Code:

snow_img = "http://i68.servimg.com/u/f68/15/15/36/09/snow210.png";
 
snow_no = 15;
 
if (typeof(window.pageYOffset) == "number")
{
  snow_browser_width = window.innerWidth;
  snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
  snow_browser_width = document.body.offsetWidth;
  snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
  snow_browser_width = document.documentElement.offsetWidth;
  snow_browser_height = document.documentElement.offsetHeight;
}
else
{
  snow_browser_width = 500;
  snow_browser_height = 500; 
}
 
snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];
 
for (i = 0; i < snow_no; i++)
{
  snow_dx[i] = 0;
  snow_xp[i] = Math.random()*(snow_browser_width-50);
  snow_yp[i] = Math.random()*snow_browser_height;
  snow_am[i] = Math.random()*20;
  snow_stx[i] = 0.02 + Math.random()/10;
  snow_sty[i] = 0.7 + Math.random();
  if (i > 0) document.write("<\div id="snow_flake"+ i +"" style="position:absolute;z-index:"+i+""><\img src=""+snow_img+"" border="0"><\/div>"); else document.write("<\div id="snow_flake0" style="position:absolute;z-index:0"><a href="http://peters1.dk/tools/snow.php" target="_blank"><\img src=""+snow_img+"" border="0"></a><\/div>");
}
 
function SnowStart()
{
  for (i = 0; i < snow_no; i++)
  {
      snow_yp[i] += snow_sty[i];
      if (snow_yp[i] > snow_browser_height-50)
      {
        snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
        snow_yp[i] = 0;
        snow_stx[i] = 0.02 + Math.random()/10;
        snow_sty[i] = 0.7 + Math.random();
      }
      snow_dx[i] += snow_stx[i];
      document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
      document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
  }
  snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();

Pour le z-index voici:

Code:

#main-content {
  z-index: 16 !important;
  position: relative !important;
}

Cordialement.

[Fred1208]

Bonjour, merci de la réponse.

J'ai copié le code dans un javascript comme ça, cela ne fonctionne pas..:-)

[Invité]

Bonjour,

Bizarre , sinon je propose ce code là (tiré de ce sujet):

Code:

/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////
 
// N´OUBLIEZ PAS: De changez le chemin vers  l´image snow.png
snow_img = "http://i68.servimg.com/u/f68/15/15/36/09/snow210.png";
 
// BONUS: Vous pouvez facilement regler le nombre de flocons que vous voulez sur chaque page...
snow_no = 15;
 
if (typeof(window.pageYOffset) == "number")
{
  snow_browser_width = window.innerWidth;
  snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
  snow_browser_width = document.body.offsetWidth;
  snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
  snow_browser_width = document.documentElement.offsetWidth;
  snow_browser_height = document.documentElement.offsetHeight;
}
else
{
  snow_browser_width = 500;
  snow_browser_height = 500; 
}
 
snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];
 
for (i = 0; i < snow_no; i++)
{
  snow_dx[i] = 0;
  snow_xp[i] = Math.random()*(snow_browser_width-50);
  snow_yp[i] = Math.random()*snow_browser_height;
  snow_am[i] = Math.random()*20;
  snow_stx[i] = 0.02 + Math.random()/10;
  snow_sty[i] = 0.7 + Math.random();
  if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php\" target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}
 
function SnowStart()
{
  for (i = 0; i < snow_no; i++)
  {
      snow_yp[i] += snow_sty[i];
      if (snow_yp[i] > snow_browser_height-50)
      {
        snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
        snow_yp[i] = 0;
        snow_stx[i] = 0.02 + Math.random()/10;
        snow_sty[i] = 0.7 + Math.random();
      }
      snow_dx[i] += snow_stx[i];
      document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
      document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
  }
  snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();

Même code,même effet mais fonctionne

:Noel:

[Fred1208]

Bonjour,

Bon, je progresse, votre code marche.

Par contre quand j'utilise l’ascenseur pour aller voir ce qui se passe plus bas, la neige s'arrête toujours de tomber au même endroit. Je ne sais pas si je me fais bien comprendre, merci de jeter un oeil sur le site : www.forseps.org

[Invité]

Bonjour, (retard désolé)

Bonjour,

Bizarre , sinon je propose ce code là (tiré de ce sujet):

Cliquez sur le lien c'est expliqué plus bas:

- https://forum.forumactif.com/t382665-script-flocons-de-neige#3222089

[Fred1208]

Bonjour, ne soyez pas désolé, c'est très gentil à vous de me répondre.

Merci beaucoup !! j'ai passé je ne sais combien de temps à essayer pleins de trucs, évidemment je n'avais pas essayé ça.

Encore une question (dès que vous en avez marre, vous me le dites

Je remarque que les flocons ne recommencent à tomber que quand les premiers arrivent en bas de la page.
On pourrait les faire tomber en continu ? Je ne sais pas si c'est possible.

Parce que si je définis 100 flocons, que j'utilise l'ascenseur, ils suivent jusqu'en bas, mais si je remonte avant qu'ils aient atteint le bas, le haut est vide de flocons.
Bon, au bout d'un moment c'est OK puisque les flocons finissent par arriver en bas de page.

www.forseps.org



Dernier truc (je jure , il neige toujours sur la partie des messages, pourtant j'avais mis ça dans le css (ai mis 100 flocons):

Code:

#main-content {
  z-index: 101 !important;
  position: relative !important;
}


Vous auriez une idée?
Merci beaucoup encore une fois pour votre aide,

Bon dimanche,

Fred

[Fred1208]

J'ai trouvé pour le code css, il faut mettre seulement

Code:

#content {
  z-index: 101 !important;
  position: relative !important;
}

[Fred1208]

Sinon, pour la neige, je laisse comme ça, donc résolu