11544 sujets

JavaScript, DOM et API Web HTML5

Redimensionnement div en fonction d'un resize [résolu]

Bonjour,
je reposte ici n'ayant pas eu de réponse dans CSS
je n'arrive pas à faire fonctionner ce code appelé dans body onresize="resize();" :

function resize() {
    var box = document.getElementById('divTest')
    // récupération de la taille d'affichage
    if (document.body) {
        var larg = (document.body.clientWidth);
        var haut = (document.body.clientHeight);}
    else {
        var larg = (window.innerWidth);
        var haut = (window.innerHeight);}
    //mise en proportion de <div id="divTest"> par rapport à l'affichage
    box.style.width = box.offsetWidth + Math.ceil(larg/10) +'px';
    box.style.height = box.offsetHeight + Math.ceil(haut/10) +'px';
//contrôle affiché dans le div
document.getElementById('divTest').innerHTML=box.style.width+ " x "+box.style.height
}

mon div devient immense, où est l'erreur ?
(un css à width (ou height): 10%; fait la mm chose mais je veux passer par js pour utiliser plusieurs fois les var haut et larg)
merci pour toute piste Smiley cligne
Modifié par gazobu (29 Dec 2010 - 21:18)
Bonjour,

Il manque pas mal de choses pour pouvoir être sur.
Que veux tu faire exactement ?
As tu fais du débug ? Des "alert()" un peu partout pour voir ce qu'il se passe ?

Mais je pense que ton soucis vient de la récursivité de ta fonction. Je m'explique, onResize est appelé N fois lorsque tu fais un resize de ta fenêtre.
Lorsque N = 1 -> tu place la taille que tu voulais
Lorsque N = 2 -> tu rajoute encore une fois la largeur de la fenêtre divisé par ton coef (10)
Lorsque N = 3 -> tu rajoute encore une fois la largeur de la fenêtre divisé par ton coef (10)
Lorsque N = 4 -> idem
Il ne faut pas que la taille de ta div dépende d'elle même ... il faut qu'elle dépende d'une constante (a la limite tu fixe la taille a l'init).

Je sais pas si je me fais bien comprendre, j'ai pas beaucoup dormis xD
bonjour KalNex, et merci pour ta réponse
mais je ne vois pas comment supprimer la récursivité de "onresize"
plus simple, je te passe tout le code que tu pourras tester :

<html>
<head>
<title>resize</title>
<script type="text/javascript">
function resize() {
	var box = document.getElementById('divTest')
	if (document.body) {
		var larg = (document.body.clientWidth);
		var haut = (document.body.clientHeight);}
	else {
		var larg = (window.innerWidth);
		var haut = (window.innerHeight);}
	box.style.width = box.offsetWidth + Math.ceil(larg/10) +'px';
	box.style.height = box.offsetHeight + Math.ceil(haut/10) +'px';
	document.getElementById('divTest').innerHTML=box.style.width+ " x "+box.style.height
	}
</script>
</head>
<body onresize="resize();">
<div id="divTest" style="background: red; height:0px; width:0px;"></div>
</body>
</html>

je pense que le pb est au niveau du "mousedown" le temps du redimensionnement
mais je ne sais trop comment le gérer Smiley rolleyes

ooops! j'ai trouvé la soluce:

box.style.width =0;
box.style.width = box.offsetWidth + Math.ceil(larg/10) +'px';
box.style.height =0;
box.style.height = box.offsetHeight + Math.ceil(haut/10) +'px';

il suffisait de remettre à zéro avant chaque boucle Smiley eek
Modifié par gazobu (29 Dec 2010 - 21:11)
Bonjour,

Alors maintenant je pige ce que tu veux faire. Cela dit, explique moi pourquoi tu veux remettre à zero pour chaque fois ... autant enlever ton box.offsetXXXX Smiley cligne 

<html> 
<head> 
<title>resize</title> 
<script type="text/javascript"> 
function resize() { 
    var box = document.getElementById('divTest');
    if (document.body) {
        var larg = (document.body.clientWidth);
        var haut = (document.body.clientHeight);
    } else { 
        var larg = (window.innerWidth);
        var haut = (window.innerHeight);
    } 
    box.style.width = Math.ceil(larg/10) +'px';
    box.style.height = Math.ceil(haut/10) +'px';
    document.getElementById('divTest').innerHTML=box.style.width+ " x "+box.style.height;
    } 
</script> 
</head> 
<body onresize="resize();"> 
<div id="divTest" style="background: red; height:0px; width:0px;"></div> 
</body> 
</html>


Ou alors remplace le par une valeur par défault ...
Pour info l'offsetHeight (par exemple) c'est la height de ton élément plus sont padding bottom et padding top plus sa border bottom et border top. Ce petit lien vers mdc devrait t'aider a comprendre.
Ce qui pour toi correspond donc qu'a la height de ton élément ... Smiley smile

PS: oublis pas les ";" c'est pas obligatoire mais c'est une bonne habitude a prendre Smiley cligne
Modifié par KalNex (30 Dec 2010 - 10:22)
KalNex a écrit :
…explique moi pourquoi tu veux remettre à zero pour chaque fois ... autant enlever ton box.offsetXXXX

fais le test en ne mettant pas à zero et tu verras la vitesse à laquelle un onresize incrémente Smiley biggrin
pour
KalNex a écrit :
la height de ton élément plus sont padding bottom et padding top plus sa border bottom et border top. Ce petit lien devrait t'aider a comprendre.

pas de pb je fais toujours mes tests avec un css * {…} qui met tout à zero

maintenant si tu aimes les casses têtes js ou jquery, vas voir ce post
j'ai une solution avec unscrollTo avec speed à 1, mais ce n'est pas clean comme prog Smiley decu
c'est de l'illusion d'optique !
Sujet clos
Aller à