11548 sujets

JavaScript, DOM et API Web HTML5

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


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

Modifié par tulipe_49 (23 Oct 2009 - 16:07)
Salut,

Quand tu changes la hauteur et quitte le bloc en même temps, resizable fonctionne toujours mais si clic est relâcher celui-ci n'est pas prit en compte car en dehors de bloc_1.
Soit tu joues avec 2 événement soit tu regardes l'événement stop dans jquery ui resizable.