Création d'objet dynamique

Version imprimable

Salut a tous , je me vois confronté a un souçis,
je n'arrive pas a créer des objets dynamique de façon illimité, voici le cas de figure :

J'ai X div qui ont un id ( voir pas d'id ... ) et je souhaite implémenté une méthode sur chacun de ses divs pour les rendres "expansible"

mon problème se situe au niveau de la création de l'objet , car j'arrive a effectuer la permière action : les rétracters, mais comment garder l'objet actif sans créer de variable globale fixe ? j'ai essayé ceci mais ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
 
 
function scrollObject(MyObject){
 
	//récupération de l'objet
	this.ObjectToAnim = MyObject;
	//récupération de la taille de l'objet
	this.Width = MyObject.offsetWidth;
	//récupération de la hauteur de l'objet
	this.Height = MyObject.offsetHeight;
	this.MonTimer = null;
 
	this.bendLeft = function(){
 
		if(parseInt(this.ObjectToAnim.offsetWidth) > 10){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  - 5)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendLeft()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.width = 0 + "px";
			//this.ObjectToAnim.style.visibility = "hidden";
		}
	}
 
	this.bendRight = function(){
		this.ObjectToAnim.style.visibility = (this.ObjectToAnim.style.visibility != "visible") ? "visible":"";	
 
		if(parseInt(this.ObjectToAnim.style.width) < this.Width){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  + 5)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendRight()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.width = this.Width + "px";
			alert(this.ObjectToAnim.style.width);
		}
	}
 
 
}
 
 
function testBend(Objet,Direction){
 
	if("monObjetBase_"+Objet.id){
		eval("var monObjetBase_"+Objet.id+ "= new scrollObject(Objet)");
		monObjet = "monObjetBase_"+Objet.id ;
	}
	else{
		monObjet = "monObjetBase_"+Objet.id ;
	}
 
	if(Direction == "left"){
		monObjet.bendLeft();
	}
	else if(Direction == "right"){
 
		monObjet.bendRight();
	}
 
}
 
function bendFonctionnel(Objet,Direction){
 
	monObjet= new scrollObject(Objet);
 
	if(Direction == "left"){
		monObjet.bendLeft();
	}
	else if(Direction == "right"){
 
		monObjet.bendRight();
	}
}
 
 
 
</script>
<style type="text/css">
	#toto{
		width:500px;
	}
</style>
</head>
<body>
<div id="toto" style="height:200px;border:1px solid #666">toto</div>
<div id="titi" style="width:500px;height:200px;border:1px solid #666">titi</div>
<input type="button" value="toto gauche" onclick="testBend(document.getElementById('toto'),'left')" />
<input type="button" value="toto droite" onclick="testBend(document.getElementById('toto'),'right')" />
<input type="button" value="titi gauche" onclick="bendFonctionnel(document.getElementById('titi'),'left')" />
<input type="button" value="titi droite" onclick="bendFonctionnel(document.getElementById('titi'),'right')" />
</body>
</html>

je me retrouve avec l'erreur : "Erreur : monObjet.bendLeft is not a function"

j'ai illustré également le cas de figure ou cela fonctionne avec titi ...
mais sije veux réaggrandir ma div , je perd ses propriété puisque je réinstancie un nouvel objet :(

I need some help ...

Merci

L'erreur est normale puisque d'après ce code :

Code:

monObjet = "monObjetBase_"+Objet.id ;

la variable monObjet contient une chaîne de caractères et non un pointeur sur une autre variable. ;)

Essaye plutôt :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function testBend(Objet,Direction){ if("monObjetBase_"+Objet.id){ eval("var monObjetBase_"+Objet.id+ "= new scrollObject(Objet); var monObjet = monObjetBase_"+Objet.id); // monObjet = "monObjetBase_"+Objet.id ; } else{ // monObjet = "monObjetBase_"+Objet.id ; } if(Direction == "left"){ monObjet.bendLeft(); } else if(Direction == "right"){ monObjet.bendRight(); } }
avec comme NB :

Code:

if("monObjetBase_"+Objet.id)

Ce test est toujours positif, non ?

13/11/2007, 12h33
le_chomeur
Merci, problème à moitié résolut :)
Je pointe maintenant sur un objet et non plus sur une string ( chose que j'avais remarqué ^^ ) mais je reste sur une variable locale, car effectivement :
Code:

1 2 if("monObjetBase_"+Objet.id)
est toujours positif, je pense que je vais devoir utiliser une collection d'objet.

si tu as une autre proposition à me faire :)

Coordialement

Utiliser un tableau pour stocker les infos est tout à fait jouable, surtout si tu en fais un attribut statique de la classe scrollObject. Mais à mon avis, il y a plus simple en mémorisant directement la propriété qui t'intéresse dans l'objet lui-même et accessoirement en utilisant les fermetures :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function scrollObject(MyObject) {
	if( !MyObject.saveWidth ) MyObject.saveWidth = MyObject.offsetWidth;
	this.MonTimer = null;
	this.bendLeft = function() {
		var bended = MyObject;
		if( parseInt(bended.offsetWidth ) > 10) {
			bended.style.width = (parseInt(bended.offsetWidth)  - 5)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendLeft()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			bended.style.width = 0 + "px";
		}
	}
 
	this.bendRight = function() {
		var bended = MyObject;
		bended.style.visibility = (bended.style.visibility != "visible") ? "visible":"";
		if(parseInt(bended.style.width) < bended.saveWidth) {
			bended.style.width = (parseInt(bended.offsetWidth)  + 5)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendRight()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			bended.style.width = bended.saveWidth + "px";
			bended.saveWidth = null; 
		}
	}
}

A vérifier tout de même, je ne garantis pas les détails... :)

Non , cela ne marchais pas , car il me faut une collection d'objet a traiter pour pouvoir les réutilisers derrière, je passe donc par la création d'une collection :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
 
 
function scrollObject(MyObject){
	//affectation d'un id dynamique
	this.Id = "monObjetBase_"+MyObject.id;
	//récupération de l'objet
	this.ObjectToAnim = MyObject;
	//récupération de la taille de l'objet
	this.Width = MyObject.offsetWidth;
	//récupération de la hauteur de l'objet
	this.Height = MyObject.offsetHeight;
	this.MonTimer = null;
	this.MonTimer2 = null;
	this.MonTimer3 = null;
	this.MonTimer4 = null;
 
	this.bendLeft = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer2);
		}		
		if(parseInt(this.ObjectToAnim.offsetWidth) > 10){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  - 15)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendLeft()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.width = 0 + "px";
			//this.ObjectToAnim.style.visibility = "hidden";
		}
	}
 
	this.bendRight = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer);
		}
		this.ObjectToAnim.style.visibility = (this.ObjectToAnim.style.visibility != "visible") ? "visible":"";	
 
		if(parseInt(this.ObjectToAnim.style.width) < this.Width){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  + 15)+"px";
			var obj = this;
			this.MonTimer2 = setTimeout(function() {obj.bendRight()},10);					
		}
		else{
			clearTimeout(this.MonTimer2);
			this.ObjectToAnim.style.width = this.Width + "px";
		}
	}
 
	this.bendUp = function(){
		this.ObjectToAnim.style.visibility = (this.ObjectToAnim.style.visibility != "visible") ? "visible":"";	
 
		if(parseInt(this.ObjectToAnim.style.height) < this.Height){
			this.ObjectToAnim.style.height = (parseInt(this.ObjectToAnim.height)  + 15)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendUp()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.height = this.Height + "px";
		}
	}
 
	this.bendDown = function(){
 
		if(parseInt(this.ObjectToAnim.offsetHeight) > 10){
			this.ObjectToAnim.style.height = (parseInt(this.ObjectToAnim.offsetHeight)  - 15)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendDown()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.height = 0 + "px";
			//this.ObjectToAnim.style.visibility = "hidden";
		}
	}
 
 
}
 
//Variable globale contenant les divs expansible
var mesElements = new CreateCollection("ListeElements");
 
function testBend(Objet,Direction){
	var monObjet = mesElements.LoadElement("monObjetBase_"+Objet.id);
 
	if(monObjet == false){
		eval("var monObjetBase_"+Objet.id+ "= new scrollObject(Objet); var monObjet = monObjetBase_"+Objet.id);
		mesElements.Add(monObjet);
	}
 
	if(Direction == "left"){
		monObjet.bendLeft();
	}
	else if(Direction == "right"){
		monObjet.bendRight();
	}
 
}
 
 
 
//Collection de div expansible
function ListeElements(){
	//Méthode permettant d'ajouter un objet à la collection
    this.Add=function(obj)
    {
        this.push(obj);
    }
	//méthode permettant de charger un élément de la collection
	this.LoadElement = function(IdToLoad){
		if(this.length > 0){
			for(i=0;i<this.length;i++){
				if(this[i].Id == IdToLoad){
					return this[i];
				}
			}
			return false;
		}
		else{
			return false;
		}
	}
 
}
 
//Cette fonction permet de créer des collections d'objet de n'importe quel type
function CreateCollection(ClassName)    
{
    var obj=new Array();
    eval("var t=new "+ClassName+"()");
    for(_item in t)
        {
            eval("obj."+_item+"=t."+_item);
        }
    return obj;
}
 
</script>
<style type="text/css">
	#toto{
		width:500px;
	}
</style>
</head>
<body>
<div id="toto" style="height:200px;border:1px solid #666">toto</div>
<div id="titi" style="width:500px;height:200px;border:1px solid #666">titi</div>
<input type="button" value="toto gauche" onclick="testBend(document.getElementById('toto'),'left')" />
<input type="button" value="toto droite" onclick="testBend(document.getElementById('toto'),'right')" />
<input type="button" value="titi gauche" onclick="testBend(document.getElementById('titi'),'left')" />
<input type="button" value="titi droite" onclick="testBend(document.getElementById('titi'),'right')" />
</body>
</html>

en clickant rapidement sur toto gauche, pui sur titi gauche et en s'amusant , on voit bien que les objets sont bien indépendant les uns des autres :)

j'ai également ajouter une condition pour tuer le timer en cours ^^

merci de ton aide