fonction redimensionnement div

Version imprimable

Bonjour,

J'ai fait une fonction permettant le redimensionnnement d'un div. Ca marche, sauf dans le cas où on fait descendre le scroll vertical...

En fait, la position de ma souris se décale de la distance de laquelle on est descendus avec le scroll...

Comment y remédier?
Voici mon code:

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
 
var xinit; // position de la souris au clic sur le div
var yinit;
var x; // position de l'élément au départ
var y;
var initier = false; // si on est en train de cliquer
var idEnCours; // id du div qui est en cours de modif
 
function init(e, id){
	idEnCours = id;
	initier = true;
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	x = document.getElementById(id).offsetLeft;
	y = document.getElementById(id).offsetTop;
	xinit = e.clientX;
	yinit = e.clientY;
}
 
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth+10)+ "px";
		document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight+12)+ "px";
	}
}
 
function fin(e){
	initier = false;
}

Et l'appel de ces fonctions:

Code:

1
2
3
4
5
6
 
<body onmousemove="bouge(event);" onmouseup="fin(event);">
<div id=boxHandle style="LEFT: 505px; WIDTH: 275px; TOP: 405px; HEIGHT: 214px">
<DIV class=carre_resize onmousedown="init(event,'boxHandle');" id=carre_resize></DIV>
</div>
</body>

Le div carre_resize sert de poignée pour la redimension...

Une idée?

Bonjour,
J'ai essayé ton code avec de la mise en couleur pour comprendre :

Code:

1
2
3
4
<body onmousemove="bouge(event);" onmouseup="fin(event);">
<div id="boxHandle" style="left:505px; top:405px; width:275px; height:214px; background:#CFCFCF;">
<DIV class="carre_resize" style="border:1px solid #000; height:20px; background:#AAAAAA;" onmousedown="init(event,'boxHandle');" id="carre_resize"></DIV>
</div>

De quel scroll vertical parles tu ?

16/10/2007, 12h09
calitom

Si ta page a beaucoup de contenu, la barre de scroll vertical de la page apparait à droite...

Et la souris se décale du div carre resize vers le bas de la hauteur de ton scroll vertical...

Je pense qu'en soustrayant la valeur du scroll vertical, ca pourrait marcher...

Comment faire pour récupérer la valeur du scroll vertical de la page?
16/10/2007, 12h14
E.Bzz

Bonjour,
pas suivi tout le problème, mais

Citation:

Envoyé par calitom

Comment faire pour récupérer la valeur du scroll vertical de la page?

==>

Code:

document.body.scrollTop;

A+
16/10/2007, 12h24
calitom

J'ai essayé, mais ca me renvoi toujours 0 même si je bouge l'ascenseur de droite...
16/10/2007, 12h34
calitom

J'ai trouvé. En fait, apparemment, selon le doctype il faut mettre document.documentElement.scrollTop ou document.body.scrollTop....

Ca marche donc quand je fais document.documentElement.scrollTop...

Voici donc la modification que j'ai apportée:

Code:

1
2
3
4
5
6
7
8
9
10
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth+10)+ "px";
		document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight+12+document.documentElement.scrollTop)+ "px";
	}
}

Et c'est bon, maintenant mon div se redimensionne peu importe la position du scroll vertical...

Merci