fonction redimensionnement div

**calitom** · 16/10/2007, 11h32

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 :

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

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

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?

**d-Rek** · 16/10/2007, 11h55

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

Code :

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

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 ?

**calitom** · 16/10/2007, 12h09

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?

**E.Bzz** · 16/10/2007, 12h14

Bonjour,
pas suivi tout le problème, mais

Envoyé par calitom

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

==>

Code :

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

document.body.scrollTop;

A+

**calitom** · 16/10/2007, 12h24

J'ai essayé, mais ca me renvoi toujours 0 même si je bouge l'ascenseur de droite...

**calitom** · 16/10/2007, 12h34

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

**calitom** · 16/10/2007, 12h37

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

Code :

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

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

fonction redimensionnement div

JavaScript

Discussions similaires

Partager

Partager