appel de fonction

Sujet résolu

23 juillet 2010 à 1:08:20

Bonsoir à tous,
j'ai trouvé un script qui permet de faire un fondu de couleur de background d'une div:

function fadeColors(id,startColor,stopColor,nbTrans,delay) {
 
    var elm = document.getElementById(id) || document.getElementById("fadingDiv" ); // l element qui doit etre dégradé
    var delay = delay || 100; // en millisecondes c ets le temps qui passe entre chaque execution. a diminuer si la fluidité n est pas au rendez vous
    var nbTrans = nbTrans || 20; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
    var startColor = startColor || [255,255,255]; // remplacer par les chiffres qui vont bien
    var stopColor = stopColor || [99,0,0]; // pareil
 
    // maintenant il faut calculer le delta de chaque couleur
    var rDelta = Math.floor((stopColor[0]-startColor[0])/nbTrans);
    var gDelta = Math.floor((stopColor[1]-startColor[1])/nbTrans);
    var bDelta = Math.floor((stopColor[2]-startColor[2])/nbTrans);
 
    // on cree les variables ou vont etre stockees les couleurs temporaires
    var rTemp = startColor[0];
    var gTemp = startColor[1];
    var bTemp = startColor[2];
 
    // un petit setInterval pour que la fonction se repete d elle meme
    var interval = setInterval(function() {
        rTemp += rDelta;
        gTemp += gDelta;
        bTemp += bDelta;
        elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";
        if (rTemp<0 || gTemp<0 || bTemp<0|| rTemp>255 || gTemp>255 || bTemp>255 ) {
            clearInterval(interval);
            elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";;
        }
    },delay);
        
}

Pour lancer ce script j'ai fait une div ayant pour id "plop" qui contient du texte et j'ai modifié la balise body comme ceci:

<body onload="javascript:fadeColors(plop);">

j'ai également remplacé id(dans la fonction) par plop(ma div)
Pour ceux qui veulent voir le sujet d'origine c'est par ici.

Malheureusement malgré mes multiples tentatives, il ne se passe absolument rien!!
Si quelqu'un pouvait m'aider ce serait super!

Anonyme

23 juillet 2010 à 9:11:18

vire le onload de ton body et ajoutes

window.onload = function () {
  fadeColors('plop');
};

à la fin de ton fichier javascript. Si tu fais pas le JS intègre le bien au moins.

maskou

23 juillet 2010 à 10:33:28

Salut,
J'avais déjà essayé en faisant comme ça mais il ni a rien qui bouge!!
voici le code que j'ai intégré a ma page:

function fadeColors(id,startColor,stopColor,nbTrans,delay) {
 
    var elm = document.getElementById(plop) ; // l element qui doit etre dégradé
    var delay = delay || 100; // en millisecondes c ets le temps qui passe entre chaque execution. a diminuer si la fluidité n est pas au rendez vous
    var nbTrans = nbTrans || 20; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
    var startColor = startColor || [0,0,0]; // remplacer par les chiffres qui vont bien
    var stopColor = stopColor || [204,0,0]; // pareil
 
    // maintenant il faut calculer le delta de chaque couleur
    var rDelta = Math.floor((stopColor[0]-startColor[0])/nbTrans);
    var gDelta = Math.floor((stopColor[1]-startColor[1])/nbTrans);
    var bDelta = Math.floor((stopColor[2]-startColor[2])/nbTrans);
 
    // on cree les variables ou vont etre stockees les couleurs temporaires
    var rTemp = startColor[0];
    var gTemp = startColor[1];
    var bTemp = startColor[2];
 
    // un petit setInterval pour que la fonction se repete d elle meme
    var interval = setInterval(function() {
        rTemp += rDelta;
        gTemp += gDelta;
        bTemp += bDelta;
        elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";
        if (rTemp<0 || gTemp<0 || bTemp<0|| rTemp>255 || gTemp>255 || bTemp>255 ) {
            clearInterval(interval);
            elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";;
        }
    },delay);
window.onload = function () {
  fadeColors('plop');
};

j'ai tout essayé mais rien ne change de couleur.
Quelqu'un a une idée?

Anonyme

23 juillet 2010 à 10:50:19

donnes toute ta page html, ou un lien vers la page en ligne.

maskou

23 juillet 2010 à 11:03:54

Voila toute ma page 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" xml:lang="fr" >
    <head>
       <title>!=</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" type="text/css" href="design.css" />
<script type="text/javascript">   
function fadeColors(id,startColor,stopColor,nbTrans,delay) {
 
    var elm = document.getElementById(id) ; // l element qui doit etre dégradé
    var delay = delay || 100; // en millisecondes c ets le temps qui passe entre chaque execution. a diminuer si la fluidité n est pas au rendez vous
    var nbTrans = nbTrans || 20; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
    var startColor = startColor || [0,0,0]; // remplacer par les chiffres qui vont bien
    var stopColor = stopColor || [204,0,0]; // pareil
 
    // maintenant il faut calculer le delta de chaque couleur
    var rDelta = Math.floor((stopColor[0]-startColor[0])/nbTrans);
    var gDelta = Math.floor((stopColor[1]-startColor[1])/nbTrans);
    var bDelta = Math.floor((stopColor[2]-startColor[2])/nbTrans);
 
    // on cree les variables ou vont etre stockees les couleurs temporaires
    var rTemp = startColor[0];
    var gTemp = startColor[1];
    var bTemp = startColor[2];
 
    // un petit setInterval pour que la fonction se repete d elle meme
    var interval = setInterval(function() {
        rTemp += rDelta;
        gTemp += gDelta;
        bTemp += bDelta;
        elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";
        if (rTemp<0 || gTemp<0 || bTemp<0|| rTemp>255 || gTemp>255 || bTemp>255 ) {
            clearInterval(interval);
            elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";;
        }
    },delay);
window.onload = function () {
  fadeColors('plop');
};	
</script>	   
</head>
<body>
<div id="plop">
blabla<br/>blabla<br/>blabla
</div>	
<form action="login.php" method='post' id = "form">
<center>
    <input type="text" name="usr" maxlength="250"><br/>
    <input type="password"name="psw" maxlength="10" "><br/>
</center>	
</form>
  </body>
   </html>

Dans design.css il n'y que la couleur du background, rien d'important.
J'au aussi essayé en mettant le script dan le body, ça change rien.

medACK

23 juillet 2010 à 11:54:37

Salut,

La déclaration de ta fonction comporte 5 paramètres, mais quand tu fais l'appel tu ne donnes qu'un seul, donc normal que ça marche pas.

Je t'invite à revoir le cour sur les fonctions.

Anonyme

23 juillet 2010 à 12:10:19

t'as mal copié collé, il te manque un } avant ton window.onload.

@medACK : regarde dans le code, si c'est pas renseigné on il y a des valeurs par défaut.

maskou

23 juillet 2010 à 12:12:58

Salut,
j'ai également essayé d'appeler la fonction en indiquant les 5 paramètres mais rien ne ce passe, de plus, le mec qui a écrit ce script appelle la fonction en indiquant seulement 3 paramètres:

fadeColors("fadingDiv2",[46,241,32],[255,32,28]);

Pour ma part j'ai appelé la fonction comme ceci:

fadeColors('plop', [0,0,0], [204,0,0]);

et aussi

fadeColors('plop', [0,0,0], [204,0,0],  20, 100);

J'ai aussi essayé avec des doubles quotes.
Mais vous l'aurez deviné, il ne ce passe toujours rien...
Je commence à être à court d'idées.
Si quelqu'un a une piste je suis preneur!!

Anonyme

23 juillet 2010 à 12:16:32

j'ai la solution, lis le post que t'as sauté en ajoutant ta réponse.

maskou

23 juillet 2010 à 12:25:22

YOUHOU!!
Cool ça marche merci beaucoup à vous tous.