'Position:absolute' perdu

Version imprimable

Bonjour à tous et bonne année !

J'ai un probleme sur une succession de code javascript, et peut être que certains d'entres vous peuvent m'aider.

J'explique, je tente de faire un dev du style PostIt en php/Xajax, et je me confronte à un probleme de javascript.
Ce probleme n'est pas du à Xajax car je l'ai reproduit sans les fonctions Xajax.

En fait, lorsque je change la visibility de certains éléments, le perds aussi l'attribut 'position:Absolute'

Le probleme, c'est que tout est ok en IE et que rien ne va plus en FF (2.0.0.1).

voici le code (j'y ai eppuré Xajax & le code HTML inutile) :

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
<!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>TEST</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				<script type="text/javascript" >
				/*
	Réalisé par oli.
	<a href="http://blog.oli-web.com" target="_blank">http://blog.oli-web.com</a>
*/
 
var isDragging = false;
var objectToDrag;
var obj;
var ecartX;
var ecartY;
var curX;
var curY;
 
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
 
function getPositionCurseur(e){
	//ie
	if(document.all){
		curX = event.clientX;
		curY = event.clientY;
	}
 
	//netscape 4
	if(document.layers){
		curX = e.pageX;
		curY = e.pageY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = e.clientX;
		curY = e.clientY;
	}
}
 
function beginDrag(p_obj, e , p_size , width , height){
	isDragging = true;
	objectToDrag = p_obj;
 
	//Ajout pour SIZE
	if ( p_size )
	{
	objectToSize = p_size;
	objectToDragWidth = width-12;
	objectToDragHeight = height-12;
	}
	else
	{
		objectToSize = '';
	}
 
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e,p_size) {
	var newPosX;
	var newPosY;
	if(isDragging == true){
 
		getPositionCurseur(e);
		newPosX = curX - ecartX;
		newPosY = curY - ecartY;
		// AJOUT POUR SIZE
 
		if ( p_size ) 
		{
			newPosSizeX = newPosX + objectToDragWidth;
			newPosSizeY = newPosY + objectToDragHeight;
			objectToSize.style.left = newPosSizeX + 'px';
			objectToSize.style.top = newPosSizeY + 'px';
		}
 
 
		objectToDrag.style.left = newPosX + 'px';
		objectToDrag.style.top = newPosY + 'px';
 
	}
 
}
 
function endDrag(){
	isDragging = false;
}
				</script>
		</head>
        <body id=body>
				<hr>
 
<div id=stk9  style='position: absolute;background: White;width: 199px;height: 110px;'  onmousedown="beginDrag(this, event ,  size9, 199 , 110 );this.style.border='1px solid red';" onmousemove='drag(event, size9);' onmouseup='this.style.border="none";endDrag()'>
<div style='font-weight: bold;text-align: center;padding-top: 1px;border: 1px solid black;background: White;'>
<table cellpadding=0 cellspacing=0 width=100% border=0>
	<tr>
		<td align=center>
			TEST
			<img id=cache9 src='IMG/cache.gif' style='visibility:visible' onClick="
			montre9.setAttribute( 'style' , 'visibility:visible;');
			cache9.setAttribute( 'style' , 'visibility:hidden;');
			montre9.style.visibility='visible';
			cache9.style.visibility='hidden';
			cur_size = document.getElementById('size9');
			cur_size.setAttribute( 'style' , 'visibility:hidden;');
			size9.style.visibility='hidden';
			cur_stk = document.getElementById('stk9');
			cur_stk.setAttribute( 'style' , 'background:none;width: 199px;height: 110px;position:absolute;');
			cur_stk.style.background='none';
			cur_contenu = document.getElementById('contenu9');
			cur_contenu.setAttribute( 'style' , 'visibility:hidden;');
			cur_contenu.style.visibility='hidden';
			">
			<img id=montre9 src='IMG/montre.gif' style='visibility:hidden' onClick="
			montre9.setAttribute( 'STYLE' , 'visibility:hidden;');
			cache9.setAttribute( 'STYLE' , 'visibility:visible;');
			montre9.style.visibility='hidden';
			cache9.style.visibility='visible';
			document.getElementById(size9).setAttribute( 'STYLE' , 'visibility:visible;');
			size9.style.visibility='visible';
			document.getElementById(stk9).setAttribute( 'STYLE' , 'background:White;')
			stk9.style.background='White';
			contenu9.style.visibility='visible';
			document.getElementById(contenu9).setAttribute( 'STYLE' , 'visibility:visible;');
			">
		</td>
		<td align=right>
			<img src='IMG/delete.gif' >
			<img src='IMG/modification.gif' >
		</td>
	</tr>
</table>
</div>
<div id=contenu9  style='padding:5px;background: White;' style='visibility:visible'>
okok
</div>
 
</div>
<img style='position: absolute' style='visibility:visible' id=size9 src='IMG/size.gif'  onmouseover='this.style.width="20px"' onmouseout='this.style.width="16px"'  onmousedown='beginDrag(this,event);' onmousemove='drag(event);'  onmouseup='endDrag()'>
<script type="text/javascript">
	positionne('stk9', '903px', '290px');
	positionne('size9', '1089px', '387px');
	isDragging = false;
</script>
 
        </body>
</html>

Quand je clique sur l'image Cache.gif (id = cache9), ca cache bien ce que je veux, mais du coup je perds l'attribut Position.

Si QQun a une idée ou une experience, je luis en suis reconnaissant d'avance...

a +

SBD.

08/01/2007, 14h58
dingoth

À la place des visibility:hidden, tente de faire des display:none et
à la place des visibility:visible, tente de faire des display:block.

Firefox devrait être moins pointilleux sur ce sujet.

modif faite mais pas de resultat ko

Merci Dingoth !

J'ai donc modifié, mais point de resultat probant... :?

cela dit, je laisse, si tu me dit que ff comprend mieux...

voici donc le nouveau code :

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
 
<!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>TEST</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				<script type="text/javascript" >
				/*
	Réalisé par oli.
	http://blog.oli-web.com
*/
 
var isDragging = false;
var objectToDrag;
var obj;
var ecartX;
var ecartY;
var curX;
var curY;
 
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
 
function getPositionCurseur(e){
	//ie
	if(document.all){
		curX = event.clientX;
		curY = event.clientY;
	}
 
	//netscape 4
	if(document.layers){
		curX = e.pageX;
		curY = e.pageY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = e.clientX;
		curY = e.clientY;
	}
}
 
function beginDrag(p_obj, e , p_size , width , height){
	isDragging = true;
	objectToDrag = p_obj;
 
	//Ajout pour SIZE
	if ( p_size )
	{
	objectToSize = p_size;
	objectToDragWidth = width-12;
	objectToDragHeight = height-12;
	}
	else
	{
		objectToSize = '';
	}
 
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e,p_size) {
	var newPosX;
	var newPosY;
	if(isDragging == true){
 
		getPositionCurseur(e);
		newPosX = curX - ecartX;
		newPosY = curY - ecartY;
		// AJOUT POUR SIZE
 
		if ( p_size ) 
		{
			newPosSizeX = newPosX + objectToDragWidth;
			newPosSizeY = newPosY + objectToDragHeight;
			objectToSize.style.left = newPosSizeX + 'px';
			objectToSize.style.top = newPosSizeY + 'px';
		}
 
 
		objectToDrag.style.left = newPosX + 'px';
		objectToDrag.style.top = newPosY + 'px';
 
	}
 
}
 
function endDrag(){
	isDragging = false;
}
				</script>
		</head>
        <body id=body>
				<hr>
 
<div id=stk9  style='position: absolute;background: White;width: 199px;height: 110px;'  onmousedown="beginDrag(this, event ,  size9, 199 , 110 );this.style.border='1px solid red';" onmousemove='drag(event, size9);' onmouseup='this.style.border="none";endDrag()'>
<div style='font-weight: bold;text-align: center;padding-top: 1px;border: 1px solid black;background: White;'>
<table cellpadding=0 cellspacing=0 width=100% border=0>
	<tr>
		<td align=center>
			TEST
			<img id=cache9 src='IMG/cache.gif' style='display:block' onClick="
			montre9.setAttribute( 'style' , 'display:block;');
			cache9.setAttribute( 'style' , 'display:none ;');
			montre9.style.display='block';
			cache9.style.display='none';
			cur_size = document.getElementById('size9');
			cur_size.setAttribute( 'style' , 'display:none;');
			size9.style.display='none';
			cur_stk = document.getElementById('stk9');
			cur_stk.setAttribute( 'style' , 'background:none;width: 199px;height: 110px;position:absolute;');
			cur_stk.style.background='none';
			cur_contenu = document.getElementById('contenu9');
			cur_contenu.setAttribute( 'style' , 'display:none;');
			cur_contenu.style.display='none';
			">
			<img id=montre9 src='IMG/montre.gif' style='display:none' onClick="
			montre9.setAttribute( 'STYLE' , 'display:none;');
			cache9.setAttribute( 'STYLE' , 'display:block;');
			montre9.style.display='none';
			cache9.style.display='block';
			document.getElementById(size9).setAttribute( 'STYLE' , 'display:block;');
			size9.style.display='block';
			document.getElementById(stk9).setAttribute( 'STYLE' , 'background:White;')
			stk9.style.background='White';
			contenu9.style.display='block';
			document.getElementById(contenu9).setAttribute( 'STYLE' , 'display:block;');
			">
		</td>
		<td align=right>
			<img src='IMG/delete.gif' >
			<img src='IMG/modification.gif' >
		</td>
	</tr>
</table>
</div>
<div id=contenu9  style='padding:5px;background: White;' style='display:block'>
okok
</div>
 
</div>
<img style='position: absolute' style='display:block' id=size9 src='IMG/size.gif'  onmouseover='this.style.width="20px"' onmouseout='this.style.width="16px"'  onmousedown='beginDrag(this,event);' onmousemove='drag(event);'  onmouseup='endDrag()'>
<script type="text/javascript">
	positionne('stk9', '903px', '290px');
	positionne('size9', '1089px', '387px');
	isDragging = false;
</script>
 
        </body>
</html>

a+
SBD.

09/01/2007, 22h59
Auteur
bonjour,

ton code Javascript qui vient après tes onclick est abominable ! Mets le tout dans une fonction et appelle la lors de l'événement !

Je pense que ton problème vient du setAttribute(). Par cette action tu modifies le style en appliquant ici le seul paramètre visibility. Mais par cette action, n'affectes-tu pas également les autres paramètres (position entre autres) ?

Si tu veux modifier 1 paramètre du style d'un élément procède comme suit :
Code:

1 2 element.style.visibility = "hidden";
dans ce cas tu n'affectes que la visibilité de l'élément.
Code:

1 2 3 4 5 montre9.setAttribute( 'style' , 'display:block;'); cache9.setAttribute( 'style' , 'display:none ;'); montre9.style.display='block'; cache9.style.display='none';
ça fait doublon...Garde uniquement la seconde syntaxe.
10/01/2007, 13h27
sbd91

Merci.

Merci à toi,

J'ai effecitvement constaté que setAttribute de STYLE ecrase à chaque fois les autres attribut (left, top, width...).

Il me faut donc respécifier à chaque fois tous les attribut de STYLE de l'objet. ce qui n'est pas toujours simple pour certains...

Quant à l'utilisation en double de setAttribute et de id.style.visibility est du au fait que l'un n'est compris que par FF et l'autre, que par IE.

Je vais cloturer ce post, meme si je n'ai pas fini mon code, mais je pense que ma question d'origine est bouclée.

Si j'y pense et que j'y arrive, je vous donnerai des news du resultat final.

Merci à vous tous !

SBD.
10/01/2007, 15h42
Auteur
Citation:

Envoyé par sbd91

Quant à l'utilisation en double de setAttribute et de id.style.visibility est du au fait que l'un n'est compris que par FF et l'autre, que par IE.

IE et Firefox (et tous les autres navigateurs à priori) comprennent très bien cette syntaxe qui a le mérite de ne pas écraser les autres propriétés :
Code:

1 2 element.style.attribut = valeur
Le souci est lorsque tu veux récupérer les attributs d'un éléments (getAttributes) lorsque ceux sont définis dans la CSS et non dans la balise HTML de l'élément.
10/01/2007, 16h12
sbd91

Ha !?

Ben non, 8O

Justement, il m'a fallu coder les deux pour que mon code soit compatible ie & FF...

SBD.
10/01/2007, 18h59
Auteur
et faisant ceci :
Code:

1 2 document.getElementById("cache9").style.visibility="hidden";
cela doit marcher aussi bien sur IE que sur FF.

Meme....

Bonjour,

Helas oui, meme en faisant ceci....:cry:

extrait d'une fonction qui fontcionne ;) :

Code:

1
2
3
4
5
6
7
 
var cur_attrib = "position:absolute;left:"+ pos_x + "px;top:"+ pos_y + "px;";
					cur_elem = document.getElementById("size"+no_stik);
					cur_elem.setAttribute( 'style' , cur_attrib);
					cur_elem.style.position='absolute';
					cur_elem.style.left= pos_x;
					cur_elem.style.top= pos_y;

a+

SBD.