Discussion :

[Invité2]

Bonjour à tous,

Lors de l'ajout dynamique d'une div, la div qui est juste a côté disparait et je ne comprends pas pourquoi.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function addChatWindow(id,name) {
 
	var parent = $('#chatContainer > div:first');
	var position= (parent.position()).left;
	var left = (position-200)+'px';
 
	var chatWindow = $('<div class="chatWindow" id="'+id+'">'+name+'<a class="closeBtn" onclick="closeWindow('+id+')"></a><div class="divForm"><input type="text" name="cmess" /><a href="#" class="sendChatMess" onclick="sendMessage('+id+')"></a></div></div>').css('left',left).prependTo('#chatContainer');
	chatWindow.animate({bottom:'0'}, "slow");
	return true;
}

le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
#chatContainer {
 
				position : fixed;
				bottom :0;
				right : 0;
				height:250px;
			}
			.closeBtn {
				position : relative;
				background: url(./chat/images/negative_feedback-trans.png) no-repeat;
				height: 16px; 
				width: 16px; 
				display: block;
				cursor:pointer;
				right:2px;
				top:2px;
				float:right;
			}
 
			#listContainer {
				float:right; 
				width:200px; 
				height:250px; 
				margin:0; 
				padding:0; 
			}
 
			#userList {
				border: 1px solid #DDCDC7;
				border-radius: 10px 10px 0 0; 
				position:absolute;
				width:200px; 
				background: #f9ede8 url(./../themes/default/styles/images/input_bg.gif) repeat-x top left;
				color : #6e574d;
				bottom : -250px;
				right:0;
				text-align:center; 
				z-index:1009;
				padding-bottom:20px;
			}
 
			a#chatLink {	
				border:1px solid #DDCDC7;
				width:200px; 
				height:20px; 
				position:absolute; 
			 	right:0; 
				bottom:0;
				color:#6e574d; 
				text-align:center;
				background: #f9ede8 url(./../themes/default/styles/images/input_bg.gif) repeat-x top left;
				z-index :1010				
			}
 
			#chatLink:hover {
				color: #a28b8b;
			}
 
			.chatWindow {
				border-radius: 10px 10px 0 0; 
				border: 1px solid #DDCDC7;
				background: #f9ede8 url(./../themes/default/styles/images/input_bg.gif) repeat-x top left;
				width:200px;
				height:250px;
				position:relative;
				right:200px;
				bottom:-250px;
			}
 
			.divForm {
				position :absolute;
				height:20px;
				width:200px;
				bottom:4px;
				float:left;
			}
 
			.sendChatMess{
				position : relative;
				background: url(./chat/images/balloon-white-left.png) no-repeat;
				height: 16px; 
				width: 16px; 
				display: block;
				cursor:pointer;
				float:right;
				right:6px;
			}
 
			.userRow {
				top:10px;
				line-height:25px;
			}

le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="chatContainer">
			<div id="listContainer">
				<div id="userList"><img src="negative_feedback-trans.png" alt="Close" title="Close" /></div>
				<a href="#" id="chatLink"></a>
			</div>
		</div>

En gros, quand je veux ajouter une div, cela fonctionne pour la première.
Si j'atoute une autre, la première disparait et l'autre apparait.

Une idée du problème ?

Merci.

[Macmillenium]

C'est un problème de CSS.
Mets un float:left sur .chatWindow si tu veux placer tes blocs cote à cote.

[Invité2]

impeccable !

Merci Macmillenium.