JQuery : et actualisation

**tulipe44** · 23/10/2009, 15h04

Bonjour,

Je souhaite récupérer la hauteur d'un élément après avoir appelé la fonction resizable. Avec le code qui suit, cela fonctionne, mais il y a un souci important : l'actualisation ne se fait pas toujours correctement. Concrètement, lorsque l'on redimensionne l'élément (ici un bloc de couleur bleu), la bonne hauteur ne s'affiche pas toujours. Quelqu'un a-t-il une idée ? Merci d'avance

Lien direct

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="javascript/js/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Test</title>
<script type="text/javascript" src="javascript/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<style type="text/css">
#bloc_1{position:absolute;top:50px;left:0px;width:300px;height:100px;background-color:#CCFFFF;}
</style>
<script type="text/javascript">
$(function() {
/* FONCTION RESIZE */
$("#bloc_1").resizable();
/* FONCTION AFFICHAGE HAUTEUR */
$("#bloc_1").mouseup(
function()
{
var hauteur=this.offsetHeight;
$('#position').html('Hauteur : '+hauteur+' px');
});
});
</script>
<div id="position">Hauteur : 0 px</div>
<div id="bloc_1"></div>
</body>
</html>

**onirisme** · 24/10/2009, 09h45

Bonjour,

Je ne vois pas d'ou ça peut venir...

Si ça ne te pose pas de problème dans ton application, tu peux utiliser la fonction resize(), tu ne devrais plus avoir de problèmes.

Tu peux également utiliser $(this).height() et voir si c'est OK.

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
 
<script>
    $(document).ready(function(){
        $("#resize").resizable();
		$("#resize").resize(function(){
			$('.height').html($(this).height());
			$('.width').html($(this).width());
		});
    });
</script>
<style>
    #resize {
    	height:100px;
	width:200px;
	border:1px solid #000;
    }
</style>
<div id="conteneur">
    <div id="resize">
    	Bloc resizable.
    </div>
    <span class="height"></span>
    <span class="width"></span>
</div>

JQuery : et actualisation

jQuery

Vue hybride

Discussions similaires

Partager

Partager