récupération dynamique de la largeur d'un div ?
Bonjour,
Je suis en train de me développer un petit système de boite de message configurable via quelques paramètres.
Je n'arrive pas à récupérer la largeur de mon div "messagebox_bouton" afin de pouvoir le centrer dynamiquement.
Voici mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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" lang="fr">
<head>
<title>MessageBox(titre,image,message,bouton)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/messagebox.css"/>
<script type="text/javascript" src="js/jquery-v1.3.2.min.js"></script>
<script type="text/javascript" src="js/messagebox.js"></script>
</head>
<body>
<input type="button" value="GO!" onClick="javascript:MessageBox('Erreur','erreur.png','Veuillez entrer votre identifiant !','OK');">
<div id="voile"></div>
<div id="messagebox">
<div id="messagebox_titre"></div>
<div id="messagebox_image"></div>
<div id="messagebox_message"></div>
<div id="messagebox_bouton"></div>
</div>
</body>
</html> |
Mon code CSS :
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
|
#messagebox
{
background-color : #FFFFFF;
border : 1px solid #E2001A;
display : none;
float : left;
font-family : Verdana,Arial,Helvetica,sans-serif;
font-size : 10px;
position : absolute;
}
#messagebox_titre
{
background-color : #E2001A;
border-bottom : 1px solid #E2001A;
color : #FFFFFF;
font-weight : bold;
height : 15px;
line-height : 13px;
padding-left : 5px;
}
#messagebox_image
{
float : left;
height : 32px;
margin : 10px;
width : 32px;
}
#messagebox_message
{
float : right;
height : 32px;
line-height : 32px;
margin-bottom : 10px;
margin-left : 10px;
margin-right : 20px;
margin-top : 10px;
}
#messagebox_bouton
{
clear : both;
float : left;
margin-bottom : 20px;
}
#messagebox_bouton a:link, a:visited
{
background-color : #F5F5F5;
border : 1px solid #DEDEDE;
color : #000000;
display : block;
font-weight : bold;
height : 15px;
line-height : 15px;
padding-left : 15px;
padding-right : 15px;
text-decoration : none;
}
#messagebox_bouton a:hover
{
background-color : #58585A;
border : 1px solid #FFFFFF;
color : #FFFFFF;
}
#voile
{
background-color : #000000;
display : none;
height : 100%;
left : 0;
opacity : 0.5;
position : fixed;
top : 0;
width : 100%;
} |
Code JS :
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
|
$(document).ready(
function()
{
}
);
function MessageBox(titre,image,message,bouton)
{
$('#messagebox_titre').html(titre);
$('#messagebox_image').html('<img src="images/' + image + '" alt=""/>');
$('#messagebox_message').html(message);
$('#messagebox_bouton').html('<a href="javascript:CloseMessageBox();">' + bouton + '</a>');
$('#messagebox').css('left',$(window).width()/2-$('#messagebox').width()/2);
$('#messagebox').css('top',$(window).height()/2-$('#messagebox').height()/2);
//alert('Width: ' + $('#messagebox_message').width());
//$('#messagebox_bouton').css('margin-left',$('#messagebox').width()/2-$('#messagebox_bouton').width()/2);
$('#voile').fadeIn('fast',
function()
{
$('#messagebox').show();
}
);
}
function CloseMessageBox()
{
$('#messagebox').fadeOut();
$('#voile').fadeOut();
} |
Mon problème, le code suivant le renvoi "0" et je ne sais pas pourquoi et comment le solutionner :
Code:
1
2
|
alert('Width: ' + $('#messagebox_message').width()); |
J'ai essayé avec :
Code:
1
2
|
alert('Width: ' + $('#messagebox_message').css('width')); |
Mais dans ce cas, je récupère : "auto".
Merci pour votre aide,
ZiP
