Discussion :

[calitom]

Bonjour,

J'ai un editeur avec un div principal. Un bouton permet d'ajouter des div dans ce div en javascript. Le problème c'est qu'à chaque fois que j'ajoute un div à l'aide du bouton, tout le contenu du div principal se décale de quelques pixels vers le bas...

Voici mon code:
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
94
95
96
97
98
99
100
101
102
103
 
 body { behavior:url("csshover.htc"); }
 
 .lefthandle:hover {
        border: 1px dotted #FF8C00;
	display: block;
	margin-top: 0px;
	left: 0px;
	background:url(doc/cursor_move.gif) no-repeat scroll 0% 100%;
	cursor: move;
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 
}
 
  .lefthandle { margin: 0px;
   left: 0px;
	background: url(doc/blank.gif) repeat;
	color: Gray;
	display: block;
	margin-top: 0px;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 }
 
  .box:hover {
	display: block;
	border: 1px Menu;
	background: InactiveBorder none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	padding-left: 30px;
}
 
  .box {
   position: absolute;
	margin: 5px;
	padding-left: 30px;
	background: transparent none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	z-index: 1;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	top: auto;
}
 
  .righthandle:hover {
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/cursor_delete.gif) no-repeat scroll 0% 50%;
	border: 1px dotted #FF8C00;
	cursor: hand;
	color: rgb(238, 238, 238);
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
}
 
  .righthandle { margin: 0px;
   height: 25px;
	color: Gray;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/blank.gif) repeat;
	width: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
 }
.carre_resize {
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}
.carre_resize:hover {
	border: 1px dotted #FF8C00;
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}

Ici les div ajoutés à l'aide du bouton utilisant les classes css ci dessus:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<DIV class=box id=boxHandle1 style="Z-INDEX: 3; FILTER: alpha(opacity=100); LEFT: 259px; TOP: 230px; opacity: undefined" onclick="changeZindex('boxHandle1')">
<DIV class=lefthandle id=lefthandle1></DIV>
<DIV class=righthandle id=righthandle1 onclick="delDiv('boxHandle1')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle1');" id=carre_resize1></DIV>
<DIV id=boxContent1 contentEditable=true>blabla</DIV></DIV>
 
<DIV class=box id=boxHandle2 style="Z-INDEX: 2; LEFT: 21px; TOP: 100px" onclick="changeZindex('boxHandle2')">
<DIV class=lefthandle id=lefthandle2></DIV>
<DIV class=righthandle id=righthandle2 onclick="delDiv('boxHandle2')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle2');" id=carre_resize2></DIV>
<DIV id=boxContent2 contentEditable=true>blabla</DIV></DIV>

Pourquoi le contenu se décale?

Merci d'avance pour votre aide.

[calitom]

J'ai fait des tests, et l'attribut left et top de tous les div boxhandle est augmenté de 10 px à chaque fois que j'ajoute un div...

Pourquoi?

Voici la fonction qui permet d'ajouter des div dans le div principal:

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
 
function addDiv() {
	var sauvDivGen=document.getElementById('OrangeEditeur').innerHTML;
	var i=1;
	var fin=-1;
	var ancNumDiv,numDiv,newDivGen;
	var zindex;
	var maxz=0;
 
	while(fin<0)
	{
		ancNumDiv=sauvDivGen.search("boxHandle"+i);
		if(ancNumDiv==-1)
		{
			fin=1;
		}
		else
		{
			zindex=document.getElementById("boxHandle"+i).style.zIndex;
			if(zindex>maxz)
			{
				maxz=zindex;
			}
			i++;
		}
	}
	numDiv=i;
	maxz++;
	newDivGen=sauvDivGen+"<div style=\"z-index:"+maxz+"; position:absolute;\" id=\"boxHandle"+numDiv+"\" class=\"box\" onclick=\"changeZindex('boxHandle"+numDiv+"')\"><div id=\"lefthandle"+numDiv+"\" class=\"lefthandle\"></div><div id=\"righthandle"+numDiv+"\" onclick=\"delDiv('boxHandle"+numDiv+"')\" class=\"righthandle\"></div><div id=\"carre_resize"+numDiv+"\" onmousedown=\"init(event,'boxHandle"+numDiv+"');\" class=\"carre_resize\"></div><div id=\"boxContent"+numDiv+"\" contenteditable=\"true\">ici votre image ou votre texte</div></div>";
	document.getElementById('OrangeEditeur').innerHTML=newDivGen;
 
	var j;
	for(j=1;j<numDiv+1;j++)
	{
		var drag = ToolMan.drag();
		var coordinates = ToolMan.coordinates()
		var nomboxhand="boxHandle"+j;
		var boxHandle = document.getElementById(nomboxhand);
		group = drag.createSimpleGroup(boxHandle, document.getElementById("lefthandle"+j));
 
		group.addTransform(function(coordinate,dragEvent)
		{
			var origin = coordinates.create(getOffsetPosition('OrangeEditeur', 'Left'),getOffsetPosition('OrangeEditeur', 'Top'));			
			var origin2=coordinates.create(document.getElementById("OrangeEditeur").offsetWidth-document.getElementById(nomboxhand).offsetWidth,3000);
 
			return coordinate.constrainTo(origin, origin2);
		})
	}
}

Le div principal est le div OrangeEditeur.
Comme on le voit dans la fonction, je récupère le contenu du div OrangeEditeur, et je met dans newdivgen le contenu de OrangeEditeur et le code du div que j'ajoute, puis je remet newdivgen dans le div OrangeEditeur...

Une idée sur pourquoi tous les left et top des div boxhandle augmente de 10 px lorsque j'ajoute un div?