[javascript] Pourquoi mon div s'agrandit quand j'agrandis sa bordure ?

**LE NEINDRE** · 06/09/2006, 13h13

Bonjour à tous !

J'ai un problème.

J'ai créé un div qui a un fond rouge et une longueur de 50% de la cellule dans laquelle il se situe.
Un code javascript cacule une longueur qui est attribuée à la propriété borderLeftWidth du div (le border left à une couleur verte).

Voici le CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
.progressBar
{
    background-color:red;
    background-position:left;
    color:Green;
    border-left:solid 1px Lime;
    width:50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50,finishopacity=100,style=1);
}

Au chargement de la page, le code javascript suivant est appelé.

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
 
 
 
function setJsFunctionsView2()
{
var Div_1_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').offsetWidth * 0");
var Div_2_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_0').offsetWidth * 0");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').style.borderLeftWidth=Div_1_0_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_0').style.borderLeftWidth=Div_2_0_width;
var Div_1_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_1').offsetWidth * 0.036");
var Div_2_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').offsetWidth * 0.2");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_1').style.borderLeftWidth=Div_1_1_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').style.borderLeftWidth=Div_2_1_width;
var Div_1_2_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_2').offsetWidth * 0");
var Div_2_2_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_2').offsetWidth * 0");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_2').style.borderLeftWidth=Div_1_2_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_2').style.borderLeftWidth=Div_2_2_width;
var Div_1_3_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_3').offsetWidth * 0.033");
var Div_2_3_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_3').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_3').style.borderLeftWidth=Div_1_3_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_3').style.borderLeftWidth=Div_2_3_width;
var Div_1_4_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_4').offsetWidth * 0.04");
var Div_2_4_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_4').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_4').style.borderLeftWidth=Div_1_4_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_4').style.borderLeftWidth=Div_2_4_width;
var Div_1_5_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_5').offsetWidth * 0.018");
var Div_2_5_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_5').offsetWidth * 1");
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_5').style.borderLeftWidth=Div_1_5_width;
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_5').style.borderLeftWidth=Div_2_5_width;
}

Comme vous pouvez le constater sur le l'image que j'ai joint à ce thread, mes div changent de taille.
par exemple quand j'ai 100%, mon div fais le double de sa taille d'origine et je vois toujours du rouge alors que tout devrait être vert.

Quel est le problème ? Comment contourner cela ?

Merci beaucoup pour votre aide !!!

**Auteur** · 06/09/2006, 13h23

bonjour,

en augmentant la taille de la bordure, réduis-tu la taille du div ?
Firefox (je crois) ne tient pas compte de l'épaisseur de la bordure dans la largeur ou la hauteur de l'élément donc si la bordure augmente, les dimensions de l'élément augmentent.

IE par contre, compte la bordure dans les dimensions de l'élément.

**LE NEINDRE** · 06/09/2006, 13h27

Bonjour Auteur,

Je suis sous IE (6.0) et tout se passe comme si la bordure ne comptait pas dans la dimension de mon div.

Pour un div, je fais ceci:

Code :

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

1
2
3
4
5
6
7
 
 
 
var Div_1_0_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').offsetWidth * 0.5");
 
 
document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_1_0').style.borderLeftWidth=Div_1_0_width;

Est il possible de faire en sorte qu'il prenne en compte les dimensions de mon border.
Sinon, comment règler ce problème ????

**Auteur** · 06/09/2006, 15h02

personnellement j'utiliserai deux div :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#divMoins{
background-color: #00AA00;
width: 0px;
display: none;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
#divPlus{
background-color: #FF0000;
width: 120px;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
.CRLF{
clear: both; 
visibility: hidden;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function plus(n)
{
 var elM = document.getElementById("divMoins");
 var elP = document.getElementById("divPlus");
 
 if (elM.style.display!="block")
  elM.style.display="block";
 
 if (elP.style.display!="block")
  elP.style.display="block"
 
 elM.style.width = Math.round(120-n*120/100);
 elP.style.width = Math.round(n*120/100);
 
 if (n==100)
    elM.style.display="none";
 
 if (n==0)
    elP.style.display="none";
}
 
//-->
</script>
 
</head>
 
<body>
<div id="divPlus">&nbsp;
</div>
<div id="divMoins">&nbsp;
</div>
<hr class="CRLF">
 
<input type="text" id="idN" name="" maxlength="10">%<br>
<input type="button" style="width: 50px" value="test" onclick="plus(document.getElementById('idN').value)"><br><br>
 
 
</body>
 
</html>

Entre une valeur entre 0 et 100% et appuie sur le bouton "test".

La ligne hr bien qu'invisble a son utilité : elle permet de mettre à la ligne (clear: both) tous les éléments situés après les div.

Seul inconvénient : tu ne peux plus écrire de valeur dans les div.

**LE NEINDRE** · 06/09/2006, 15h22

J'ai testé ton script et ça marche très bien !!
Merci !!
Je vais tenter de l'adapter à mes besoins.
Je reposterai si j'ai des problèmes.

**LE NEINDRE** · 07/09/2006, 13h22

Finalement, j'ai opté pour une autre solution, même si la tienne fonctionne très bien !

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
 
 
 
.progressBar
{
    background-color:Silver;
    background-position:left;
    text-align:left;
    width:50%;
}
 
.capacityUsed { 
 
   background-position:left;
   background-color:Olive;
   width:0px;
}

Le code HTML:

Code :

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

1
2
3
 
 
<td align="center" valign="middle" style="width:20%;"><DIV id='VIEW2_GRIDVIEW_ROW_DIV_2_1' class='progressBar'><DIV id='VIEW2_GRIDVIEW_ROW_SPAN_2_1' class='capacityUsed'></DIV></DIV>16,7 %</td>

le javascript:

Code :

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

1
2
3
4
5
6
7
 
 
 
 
var Div_2_1_width = eval("document.getElementById('VIEW2_GRIDVIEW_ROW_DIV_2_1').clientWidth * 0.167");
 
document.getElementById('VIEW2_GRIDVIEW_ROW_SPAN_2_1').style.width=Div_2_1_width;

Merci beaucoup pour ton aide Auteur

**SpaceFrog** · 07/09/2006, 14h00

Si tu veux en dsavoir un peu plus sur les raisons de ton problème, fais une recherche sur google avec "boxtype" c'est un bug connu pour lequel il existe des hacks ...

**LE NEINDRE** · 07/09/2006, 14h08

J'irai faire un tour,
merci spaceFrog !

[javascript] Pourquoi mon div s'agrandit quand j'agrandis sa bordure ?

JavaScript

Discussions similaires

Partager

Partager