Partage

Pas de detection de valeur

Sujet résolu

15 août 2009 à 18:28:51

bonjour, je réalise un script spécial qui affiche des images ( 10 ), au début, 9 d'entre elles font 77px de large et un 257px de large on se moque de la quelle. Ensuite, quand la souris passe sur une des 9images réduites, celle ci grandit jusque 257px et l'autre se réduit a 77px.

Rien de compliqué sauf que jai un problème :

//Valeur minimale du bloc
var closermin = 77;

//Valeur maximale du bloc
var openermax = 257;

//Array qui contiendra les timers
var timer = [];

//Contient le tableau qui est actuellement agrandit
var actif = false;

//Contient l'objet en cours d'ouverture
var argument;

//Contient l'objet2 en cours d'ouverture
var argument2;


//Fonction basique qui raccourci le temps
function gebi(id) {
    return document.getElementById(id);
}


//Fonction permettant d'agrandir un bloc
function opener(id) {
    
    //On dit quie ce tableau est maintenant considèré comme grand
    actif = id;
    
    //On récupère les données du tableau
    argument = gebi(id);
    
    //Si le tableau est encore plus petit que le maximum
    if (parseFloat(argument.style.width) < openermax)
    {
        //On l'agrandit de 10px a chaque fois
        argument.style.width = (parseFloat(argument.style.width) + 10 ) + "px";
    }
    else {
        //Sinon on arrête le timer et voila.
        clearInterval(timer[id]);
    }
}

//Fonction qui rétrécit le grand tableau initialement ouvert
function closer(id) {
    
    //On récupère les données du tableau
    argument2 = gebi(id);
    
    //On vérifie si le tableau est encore p)lus grand que le minimum
    if (parseFloat(argument2.style.width) > closermin)
    {
        //On le réduit de 10px
        argument2.style.width = (parseFloat(argument2.style.width) - 10 ) + "px";
    }
    else {
    
        // Sinon on arrête le timer
        clearInterval(timer[id]);
    }
}

//Déclenche le mouvement des tableaux
function setTimer(id) {
    //Si le tableau qu'on veut agrandir l'est pas déjà, on continu
    if (actif != id)
    {
        //On nettoye le timer
        clearInterval(timer[id]);
        
        //Si actif ne vaut rien on ne fait rien
        if (actif != false)
        {
            //On range le précédent tableau
            timer[actif] = setInterval(function() {closer(actif); }, 10);
        }
        
        //On ouvre le nouveau tableau
        timer[id] = setInterval(function() {opener(id); }, 10);
    }
}


//Fonction de déclenchement d'events
function Evenement(id, evenement, fonction) {
    
    //On récupère les données
    docobj = gebi(id);
    
    //On vérifie le navigateur
    if (docobj.addEventListener){
        
        //Assignement du listener
        docobj.addEventListener(evenement, fonction, false);
    } 
    //Pour IE
    else if (docobj.attachEvent) {
        
        //Assignement du listener
        docobj.attachEvent("on"+evenement, fonction);
    }
}


//On lance les listeners sur les 10 tableaux
Evenement("img_0", "mouseover", function() { setTimer("img_0") });
Evenement("img_1", "mouseover", function() { setTimer("img_1") });
Evenement("img_2", "mouseover", function() { setTimer("img_2") });
Evenement("img_3", "mouseover", function() { setTimer("img_3") });
Evenement("img_4", "mouseover", function() { setTimer("img_4") });
Evenement("img_5", "mouseover", function() { setTimer("img_5") });
Evenement("img_6", "mouseover", function() { setTimer("img_6") });
Evenement("img_7", "mouseover", function() { setTimer("img_7") });
Evenement("img_8", "mouseover", function() { setTimer("img_8") });
Evenement("img_9", "mouseover", function() { setTimer("img_9") });


//On agrandit le premier tableau au chargement de la page.
window.onload = function() {
    timer['img_0'] = setInterval(function() {opener('img_0') }, 10);
}

argument = gebi(id); ne vaut rien... C'est surement une erreur toute bête mais j'ai cherchée et je sais qu'une erreur bête se trouve difficilement de soit même donc aidez moi svp ='(

Merci d'avance.

ps : le code html si besoin :

<!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>BrokenBrush - Accueil</title>
    <link rel="shortcut icon" href="favicon.png">
    <style type="text/css">
        body {
            margin : 0px;
            background-color : #e0dedf;
            background-image : url(test.jpg) ;
            background-repeat : repeat-x;
            background-position : top left;
        }
        
        #imgview {
            width : 1000px;
            height : 200px;
            margin : 210px auto 0px;
            overflow : hidden;
            text-align : center;
        }
        
        #imgview div {
            width : 77px;
            height : 200px;
            display : inline-block;
            margin : 0px -1px;
            background : black;
            overflow : hidden;
            /*text-indent : -100px;*/
        }
    </style>
</head>
<body>
    <div id="imgview">
        <div id="img_0" style="width : 77px;">
            <img src="galerie/image0.jpg" alt="image0" />
        </div>
        <div id="img_1">
            <img src="galerie/image1.jpg" alt="image1" />
        </div>
        <div id="img_2">
            <img src="galerie/image2.jpg" alt="image2" />
        </div>
        <div id="img_3">
            <img src="galerie/image3.jpg" alt="image3" />
        </div>
        <div id="img_4">
            <img src="galerie/image4.jpg" alt="image4" />
        </div>
        <div id="img_5">
            <img src="galerie/image5.jpg" alt="image5" />
        </div>
        <div id="img_6">
            <img src="galerie/image6.jpg" alt="image6" />
        </div>
        <div id="img_7">
            <img src="galerie/image7.jpg" alt="image7" />
        </div>
        <div id="img_8">
            <img src="galerie/image8.jpg" alt="image8" />
        </div>
        <div id="img_9">
            <img src="galerie/image9.jpg" alt="image9" />
        </div>
    </div>
    <script type="text/javascript" src="script/girlscript.js"></script>
</body>
</html>

Tillertan

15 août 2009 à 18:37:40

Au hasard, essaies ça:

timer[id] = setInterval((function(i) {
	return function() { opener(i); };
})(id), 10);

Kyu_

15 août 2009 à 18:40:53

si tu veux savoir, oui la fonction opener est bien lancée, j'ai testé en mettant un alert("test"); dedans et quand la fonction se lancait j'avais un alert de fait.

Lr problème est que quand je fais alert(argument.style.width); avant la ligne 36 eh bien il me met un alert vide...

Snif
merci de m'aider

Edit :
Maintenant que j'ai retiré le style="width : 77px" sur le img_0 dans le code html, celui ci ne veut plus se dérouler

alors que le style placé dans le <head></head> lui dit de se mettre aussi a 77px...
je comprends plus rien.... ,_,

Golmote

15 août 2009 à 18:47:53

Evite aussi de nommer ta fonction opener, sachant qu'il y a la propriété window.opener

Kyu_

15 août 2009 à 18:49:58

Ah d'accord, je le savais que je me ferais avoir là dessus, enfin rien ne change car rien ne bouge :
Voila le code remis a jour :

//Valeur minimale du bloc
var fermermin = 77;

//Valeur maximale du bloc
var ouvrirmax = 257;

//Combien augmente le tableau toutes les 10ms :
var valeurChange = 10;

//Array qui contiendra les timers
var timer = [];

//Contient le tableau qui est actuellement agrandit
var actif = "img_0";

//Contient l'objet en cours d'ouverture
var argument;

//Contient l'objet2 en cours d'ouverture
var argument2;


//Fonction basique qui raccourci le temps
function gebi(id) {
    return document.getElementById(id);
}


//Fonction permettant d'agrandir un bloc
function ouvrir(id) {
    
    //On dit quie ce tableau est maintenant considèré comme grand
    actif = id;
    
    //On récupère les données du tableau
    argument = gebi(id);
    
    //Si le tableau est encore plus petit que le maximum
    if (parseFloat(argument.style.width) < ouvrirmax)
    {
        //On l'agrandit de 10px a chaque fois
        argument.style.width = (parseFloat(argument.style.width) + valeurChange ) + "px";
    }
    else {
        //Sinon on arrête le timer et voila.
        clearInterval(timer[id]);
    }
}

//Fonction qui rétrécit le grand tableau initialement ouvert
function fermer(id2) {
    
    //On récupère les données du tableau
    argument2 = gebi(id2);
    
    //On vérifie si le tableau est encore p)lus grand que le minimum
    if (parseFloat(argument2.style.width) > fermermin)
    {
        //On le réduit de 10px
        argument2.style.width = (parseFloat(argument2.style.width) - valeurChange ) + "px";
    }
    else {
    
        // Sinon on arrête le timer
        clearInterval(timer[id2]);
    }
}

//Déclenche le mouvement des tableaux
function setTimer(id) {
    //Si le tableau qu'on veut agrandir l'est pas déjà, on continu
    if (actif != id)
    {
        //On nettoye le timer
        clearInterval(timer[id]);
        
        //Si actif ne vaut rien on ne fait rien
        if (actif != false)
        {
            //On nettoye ce timer aussi
            clearInterval(timer[actif]);
            
            //On range le précédent tableau
            timer[actif] = setInterval(function() {fermer(actif); }, 10);
        }
        
        //On ouvre le nouveau tableau
        timer[id] = setInterval(function() {ouvrir(id); }, 10);
    }
}


//Fonction de déclenchement d'events
function Evenement(id, evenement, fonction) {
    
    //On récupère les données
    docobj = gebi(id);
    
    //On vérifie le navigateur
    if (docobj.addEventListener){
        
        //Assignement du listener
        docobj.addEventListener(evenement, fonction, false);
    } 
    //Pour IE
    else if (docobj.attachEvent) {
        
        //Assignement du listener
        docobj.attachEvent("on"+evenement, fonction);
    }
}


//On lance les listeners sur les 10 tableaux
Evenement("img_0", "mouseover", function() { setTimer("img_0") });
Evenement("img_1", "mouseover", function() { setTimer("img_1") });
Evenement("img_2", "mouseover", function() { setTimer("img_2") });
Evenement("img_3", "mouseover", function() { setTimer("img_3") });
Evenement("img_4", "mouseover", function() { setTimer("img_4") });
Evenement("img_5", "mouseover", function() { setTimer("img_5") });
Evenement("img_6", "mouseover", function() { setTimer("img_6") });
Evenement("img_7", "mouseover", function() { setTimer("img_7") });
Evenement("img_8", "mouseover", function() { setTimer("img_8") });
Evenement("img_9", "mouseover", function() { setTimer("img_9") });


//On agrandit le premier tableau au chargement de la page.
window.onload = function() {
    for (i = 1; i<=9;i++) {
        document.getElementById('img_'+i).style.opacity = '0.4';
    }
}

<!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>BrokenBrush - Accueil</title>
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" title="Design" type="text/css" href="home.css" />
</head>
<body>
    <div id="imgview">
        <div id="img_0">
            <img src="galerie/image0.jpg" alt="image0" />
        </div>
        <div id="img_1">
            <img src="galerie/image1.jpg" alt="image1" />
        </div>
        <div id="img_2">
            <img src="galerie/image2.jpg" alt="image2" />
        </div>
        <div id="img_3">
            <img src="galerie/image3.jpg" alt="image3" />
        </div>
        <div id="img_4">
            <img src="galerie/image4.jpg" alt="image4" />
        </div>
        <div id="img_5">
            <img src="galerie/image5.jpg" alt="image5" />
        </div>
        <div id="img_6">
            <img src="galerie/image6.jpg" alt="image6" />
        </div>
        <div id="img_7">
            <img src="galerie/image7.jpg" alt="image7" />
        </div>
        <div id="img_8">
            <img src="galerie/image8.jpg" alt="image8" />
        </div>
        <div id="img_9">
            <img src="galerie/image9.jpg" alt="image9" />
        </div>
    </div>
    <script type="text/javascript" src="script/girlscript.js"></script>
</body>
</html>

EDIT :
si je met les divs img_x comme ça :

<div id="img_0" style="width : 257px;">
            <img src="galerie/image0.jpg" alt="image0" />
        </div>
        <div id="img_1" style="width : 77px;">
            <img src="galerie/image1.jpg" alt="image1" />
        </div>
        <div id="img_2" style="width : 77px;">
            <img src="galerie/image2.jpg" alt="image2" />
        </div>
        <div id="img_3" style="width : 77px;">
            <img src="galerie/image3.jpg" alt="image3" />
        </div>
        <div id="img_4" style="width : 77px;">
            <img src="galerie/image4.jpg" alt="image4" />
        </div>
        <div id="img_5" style="width : 77px;">
            <img src="galerie/image5.jpg" alt="image5" />
        </div>
        <div id="img_6" style="width : 77px;">
            <img src="galerie/image6.jpg" alt="image6" />
        </div>
        <div id="img_7" style="width : 77px;">
            <img src="galerie/image7.jpg" alt="image7" />
        </div>
        <div id="img_8" style="width : 77px;">
            <img src="galerie/image8.jpg" alt="image8" />
        </div>
        <div id="img_9" style="width : 77px;">
            <img src="galerie/image9.jpg" alt="image9" />
        </div>

Ca bug toujours mais au moins ça bouge, car sans les styles, le javascript ne fait rien bouger du tout :'(

Sinon, en mettant ces style="width : 77px" en lancant les fonctions une par une, elles marchent bien mais vu que dans le script elles se lancent en même temps ça fait des petits sauts.

Testez :
Lien

Tillertan

15 août 2009 à 19:43:09

Essaie le code que je t'ai donné à la place de la ligne 83 X_X

Kyu_

15 août 2009 à 19:48:02

Citation : Tiller

Essaie le code que je t'ai donné à la place de la ligne 83 X_X

J'ai testé j'ai mit ça :

function setTimer(id) {
    //Si le tableau qu'on veut agrandir l'est pas déjà, on continu
    if (actif != id)
    {
        //On nettoye le timer
        clearInterval(timer[id]);
        
        //Si actif ne vaut rien on ne fait rien
        if (actif != false)
        {
            //On nettoye ce timer aussi
            clearInterval(timer[actif]);
            
            //On range le précédent tableau
            timer[actif] = setInterval(function() {fermer(actif); }, 10);
        }
        
        //On ouvre le nouveau tableau
        timer[id] = setInterval((function(i) {
            return function() { ouvrir(i); };
            })(id), 10);

    }
}

J'ai uploadé le résultat pour te montrer :
Lien

Ca ne change rien :/

Tillertan

15 août 2009 à 20:08:40

Bon, je sais pas ou était le bug, mais à force de tripatouillé pour rendre le code plus joli, ça marche.

Donc voila une version qui marche =o

//Valeur minimale du bloc
var fermermin = 77;

//Valeur maximale du bloc
var ouvrirmax = 257;

//Combien augmente le tableau toutes les 10ms :
var valeurChange = 10;

//Array qui contiendra les timers
var timer = {};

//Contient le tableau qui est actuellement agrandit
var actif = "img_0";

var widths = {};


//Fonction basique qui raccourci le temps
function $(id) {
    return document.getElementById(id);
}


//Fonction permettant d'agrandir un bloc
function ouvrir(id) {
    //On dit quie ce tableau est maintenant considèré comme grand
    actif = id;
    
    //Si le tableau est encore plus petit que le maximum
    if (widths[id] < ouvrirmax)
    {
        //On l'agrandit de 10px a chaque fois
		widths[id] += valeurChange;
		$(id).style.width = widths[id] + "px";
		
		timer[id] = setTimeout(function() {
			ouvrir(id);
		}, 10);
    }
}

//Fonction qui rétrécit le grand tableau initialement ouvert
function fermer(id) {
    
    //On vérifie si le tableau est encore p)lus grand que le minimum
    if (widths[id] > fermermin)
    {
		widths[id] -= valeurChange;
		//On le réduit de 10px
		$(id).style.width = widths[id] + "px";
		
		timer[id] = setTimeout(function() {
			fermer(id);
		}, 10);
    }
}

//Déclenche le mouvement des tableaux
function setTimer(id) {
    //Si le tableau qu'on veut agrandir l'est pas déjà, on continu
    if (actif != id)
    {
        //On nettoye le timer
        clearTimeout(timer[id]);
        
        //Si actif ne vaut rien on ne fait rien
        if (actif != false)
        {
            //On nettoye ce timer aussi
            clearTimeout(timer[actif]);
			
	    widths[actif] = parseInt($(actif).style.width);
            fermer(actif);
        }
        
        //On ouvre le nouveau tableau
	widths[id] = parseInt($(id).style.width);
	ouvrir(id);
    }
}


//Fonction de déclenchement d'events
function Evenement(id, evenement, fonction) {
    
    //On récupère les données
    docobj = $(id);
    
    //On vérifie le navigateur
    if (docobj.addEventListener){
        
        //Assignement du listener
        docobj.addEventListener(evenement, fonction, false);
    } 
    //Pour IE
    else if (docobj.attachEvent) {
        
        //Assignement du listener
        docobj.attachEvent("on"+evenement, fonction);
    }
}


//On lance les listeners sur les 10 tableaux
Evenement("img_0", "mouseover", function() { setTimer("img_0"); });
Evenement("img_1", "mouseover", function() { setTimer("img_1"); });
Evenement("img_2", "mouseover", function() { setTimer("img_2"); });
Evenement("img_3", "mouseover", function() { setTimer("img_3"); });
Evenement("img_4", "mouseover", function() { setTimer("img_4"); });
Evenement("img_5", "mouseover", function() { setTimer("img_5"); });
Evenement("img_6", "mouseover", function() { setTimer("img_6"); });
Evenement("img_7", "mouseover", function() { setTimer("img_7"); });
Evenement("img_8", "mouseover", function() { setTimer("img_8"); });
Evenement("img_9", "mouseover", function() { setTimer("img_9"); });


//On agrandit le premier tableau au chargement de la page.
window.onload = function() {
    for (i = 1; i<=9;i++) {
        $('img_'+i).style.opacity = '0.4';
    }
}

Kyu_

15 août 2009 à 20:11:16

Woaaaaaaaaaaaah (sugeeeeeeeeeee)
C'est superbe merci !
J'aurais voulu savoir qu'est ce qui fait que c'était moche ? surement des problème de code mal organisé mais en quoi ?
J'aimerais comprendre pour ne pas refaire les mêmes erreurs ^^'

Merci beaucoup !

Tillertan

15 août 2009 à 20:15:34

Deja, le fait de déclarer les variables argument et arguement2 au début (Bon je les ai supprimé, mais on va faire comme si)

Quand tu n'utilises une variable que dans une fonction, tu la déclares dans la fonction. De cette manière, elle est détruite des que la fonction est fini, alors que si tu la déclares au début, elle est global et restera.

var id_actuel = 0; // Une variable global qui restera

function ouvrir(id) {
	id_actuel = id;
	
	var argument = $(id); // La variable ne sera valable que dans la fonction
	argument.style.width = 0;
}

function fermer(id) { // Pas besoin de mettre id2 ! Cette variable étant passer en paramètre est exclusive a la fonction, modifier sa valeur n'aura aucune influence sur l'autre fonction
	//...
}

Et les interval c'est pas génial, si on a le choix, préféré les timer =)

Ensuite, c'est mieux de stocké les width dans un objet, plutot que d'aller les rechercher à chaque boucle.

Et enfin, on n'utilise pas un array ( [] ) si on utilise des strings comme clés.
Un array est fait pour avoir des keys "logiques" 0 1 2 3...

var arr = [];
arr[0] = 0;
arr[1] = 1;
// Pareil que var arr = [0, 1];

// Pour des strings :
var obj = {};
obj['montruc'] = true;
obj.machose = false; // Les deux ecritures sont possibles

// Pareil que
var obj = {
	montruc: true,
	"machose": false // Les "" sont optionnels, c'est mieux avec
};

Kyu_

15 août 2009 à 20:17:42

ah ok

Je note et j'apprends

Par contre y'a pas un moyen de virer le style="width : 77px;" dans le html et que ça marche ?
Car cette propriété est déjà dans le CSS mais si je le met pas en style="", le script fonctionne pas...

Tillertan

15 août 2009 à 20:20:07

J'ai rajouté quelques trucs à la fin du post précédent =o

Et pour virer le truc, il faut utiliser offsetWidth :

//Valeur minimale du bloc
var fermermin = 77;

//Valeur maximale du bloc
var ouvrirmax = 257;

//Combien augmente le tableau toutes les 10ms :
var valeurChange = 10;

//Array qui contiendra les timers
var timer = {};

//Contient le tableau qui est actuellement agrandit
var actif = "img_0";

var widths = {};


//Fonction basique qui raccourci le temps
function $(id) {
    return document.getElementById(id);
}


//Fonction permettant d'agrandir un bloc
function ouvrir(id) {
    //On dit quie ce tableau est maintenant considèré comme grand
    actif = id;
    
    //Si le tableau est encore plus petit que le maximum
    if (widths[id] < ouvrirmax)
    {
        //On l'agrandit de 10px a chaque fois
		widths[id] += valeurChange;
		$(id).style.width = widths[id] + "px";
		
		timer[id] = setTimeout(function() {
			ouvrir(id);
		}, 10);
    }
}

//Fonction qui rétrécit le grand tableau initialement ouvert
function fermer(id) {
    
    //On vérifie si le tableau est encore p)lus grand que le minimum
    if (widths[id] > fermermin)
    {
		widths[id] -= valeurChange;
		//On le réduit de 10px
		$(id).style.width = widths[id] + "px";
		
		timer[id] = setTimeout(function() {
			fermer(id);
		}, 10);
    }
}

//Déclenche le mouvement des tableaux
function setTimer(id) {
    //Si le tableau qu'on veut agrandir l'est pas déjà, on continu
    if (actif != id)
    {
        //On nettoye le timer
        clearTimeout(timer[id]);
        
        //Si actif ne vaut rien on ne fait rien
        if (actif != false)
        {
            //On nettoye ce timer aussi
            clearTimeout(timer[actif]);
			
	    widths[actif] = parseInt($(actif).offsetWidth);
            fermer(actif);
        }
        
        //On ouvre le nouveau tableau
	widths[id] = parseInt($(id).offsetWidth);
	ouvrir(id);
    }
}


//Fonction de déclenchement d'events
function Evenement(id, evenement, fonction) {
    
    //On récupère les données
    docobj = $(id);
    
    //On vérifie le navigateur
    if (docobj.addEventListener){
        
        //Assignement du listener
        docobj.addEventListener(evenement, fonction, false);
    } 
    //Pour IE
    else if (docobj.attachEvent) {
        
        //Assignement du listener
        docobj.attachEvent("on"+evenement, fonction);
    }
}


//On lance les listeners sur les 10 tableaux
Evenement("img_0", "mouseover", function() { setTimer("img_0"); });
Evenement("img_1", "mouseover", function() { setTimer("img_1"); });
Evenement("img_2", "mouseover", function() { setTimer("img_2"); });
Evenement("img_3", "mouseover", function() { setTimer("img_3"); });
Evenement("img_4", "mouseover", function() { setTimer("img_4"); });
Evenement("img_5", "mouseover", function() { setTimer("img_5"); });
Evenement("img_6", "mouseover", function() { setTimer("img_6"); });
Evenement("img_7", "mouseover", function() { setTimer("img_7"); });
Evenement("img_8", "mouseover", function() { setTimer("img_8"); });
Evenement("img_9", "mouseover", function() { setTimer("img_9"); });


//On agrandit le premier tableau au chargement de la page.
window.onload = function() {
    for (i = 1; i<=9;i++) {
        $('img_'+i).style.opacity = '0.4';
    }
}

Edit: Désolé tu vas devoir refaire l'indentation xD
J'ai mélanger tes espaces avec des tabs :/

Kyu_

15 août 2009 à 20:24:36

Okayyyyyyy o_O

Merci, c'est bon à savoir, j'ai pensé a offsetWidth, mais je pensais que c'était pas le top d'utiliser ça :/
Merci