Discussion :

[LE NEINDRE]

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 !!!