récupération dynamique de la largeur d'un div ?

**[ZiP]** · 14/09/2009, 22h29

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 :

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

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
 
#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 :

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
 
$(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 :

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

1
2
 
alert('Width: ' + $('#messagebox_message').width());

J'ai essayé avec :

Code :

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

1
2
 
alert('Width: ' + $('#messagebox_message').css('width'));

Mais dans ce cas, je récupère : "auto".

Merci pour votre aide,
ZiP

**[ZiP]** · 16/09/2009, 09h35

Bonjour,

Je ne trouve pas de solution à mon problème

Ci-joint un lien vers ma page en ligne : http://jsbin.com/uhawu/edit

Merci ,
ZiP

**[ZiP]** · 16/09/2009, 10h05

Bonjour,

J'ai compris pourquoi je n'avais pas une valeur correcte avec mon width() !

En fait, tant que mon div "#messagebox" n'est pas affiché (.show()), je n'ai pas de valeur retournée par width() pour "#messagebox_bouton", ce qui est, effectivement, tout à fait normal.

J'ai donc corrigé le code de ma fonction "MessageBox" :

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
 
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);
		$('#voile').fadeIn('fast',
			function()
			{
				$('#messagebox').show();
				$('#messagebox_bouton').css('margin-left',$('#messagebox').width()/2-$('#messagebox_bouton').width()/2);
			}
		);
}

Si ça peut servir à d'autres afin qu'ils ne perdent pas de temps inutilement comme je viens de le faire

Cordialement,
ZiP

récupération dynamique de la largeur d'un div ?

jQuery

Discussions similaires

Partager

Partager