Javascript: Mémorisation de l'état initial

Fermé
flashdumpf - Modifié par flashdumpf le 11/05/2010 à 22:30
flashdumpf Messages postés 17 Date d'inscription lundi 5 janvier 2009 Statut Membre Dernière intervention 14 mai 2010 - 14 mai 2010 à 11:12
Bonjour,

j'ai une page HTML contenant plusieurs DIV portant la même classe. Toutes ont une largeur différente. J'ai une fonction javascript qui liste toutes les DIV portant cette classe dans un tableau.

J'aimerai mémoriser la largeur initiale de chaque DIV quelque part sachant que chaque largeur va être modifiée par la suite. J'aimerai ensuite que chaque fois que je fais un mouseover sur une DIV, que le programme m'affiche la largeur initiale.

J'ai pensé stocker chaque largeur dans un autre tableau, mais je ne vois pas comment je peux retrouvé la valeur. En gros il faut que je trouve le moyen de lier l'élément avec sa largeur initiale.

Une Idée?

Merci

3 réponses

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
Modifié par adns le 12/05/2010 à 12:18
bonjour

pourquoi ne pas ajouter à chacun de tes div un nouvel attribut ?

exemple


<div id="test" width="80px" largeurOrigine="80"> 

</div> 

<script>
var l = document.getElementById('test').largeurOrigine;
alert(l);
</script>



Adns
Hacker Vaillant Rien D'Impossible !!!
Le Monde du partage Remplacera le partage du monde
Mac ou PC ?? o_O Question Stupide puisque MAC est un PC....
B2D Team © | Work In Progress
0
flashdumpf Messages postés 17 Date d'inscription lundi 5 janvier 2009 Statut Membre Dernière intervention 14 mai 2010 1
13 mai 2010 à 14:26
Ca n'est pas pratique car la largeur de la DIV dépend du texte qu'il y a dedans
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
12 mai 2010 à 13:34
Je ne pense pas qu'inventé ses propres attributs soit la solution, mais ce n'est que mon avis.

Perso, je te conseil l'utilisation d'un second tableau.
Ainsi, la largeur originale du div dans tableau[3] sera dans largeur_init[3] (par exemple).
var largeur_init = Array();
for(i = 0 ; i < tableau.length ; i++) {
    largeur_init[i] = (typeof(tableau[i].innerWidth) == 'number') ? tableau[i].innerWidth : tablea[i].clientWidth;
}
alert('Largeur du 2ème div : ' + largeur_init[1]);
0
flashdumpf Messages postés 17 Date d'inscription lundi 5 janvier 2009 Statut Membre Dernière intervention 14 mai 2010 1
13 mai 2010 à 14:25
Je veux bien, mais comment je fais le lien avec le mouseover... Il faut que la largeur initiale s'affiche quand je survol l'élément , mais je ne sais pas à quelle position elle se trouve dans le tableau.
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
13 mai 2010 à 15:26
var largeur_init = Array();
for(i = 0 ; i < tableau.length ; i++) {
    largeur_init[i] = (typeof(tableau[i].innerWidth) == 'number') ? tableau[i].innerWidth : tablea[i].clientWidth;

    tableau[i].onmouseover = function() {
        // Fonction qui affiche la largeur ( largeur_init[i] )
    };
}
0
flashdumpf Messages postés 17 Date d'inscription lundi 5 janvier 2009 Statut Membre Dernière intervention 14 mai 2010 1
13 mai 2010 à 19:31
Sauf que ça ne marche pas car la valeur du i lors du mouseover sera toujours égal à tableau.length+1...
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
13 mai 2010 à 19:46
Non car on utilise i dans la boucle elle-même.
0
flashdumpf Messages postés 17 Date d'inscription lundi 5 janvier 2009 Statut Membre Dernière intervention 14 mai 2010 1
14 mai 2010 à 11:12
Voici un bout de code simplifié. J'ai fais le test pour 2 DIV en remplaçant le alert(sizes[i]) par alert(i) et je t'assure qu'il m'affiche i=2 et pas le i correspondant à la DIV..

window.onload = function(){
	boxes=getElementsByClass('classname', null ,'div');
	sizes=new Array();
	for (i=0; i<boxes.length; i++) {
		sizes[i]=boxes[i].clientWidth;
		boxes[i].onmouseover = function() { alert(sizes[i]); };
	}
}
0