Code à fluidifier (agrandissement div interactif)

**roduce** · 10/04/2009, 23h25

Bonjour,

j'ai fait un code permettant de redimensionner vers le bas une div lors du clique sur un div se situant en bas de la div

je souhaiterait faire en sorte que l'étirement soit plus fluide.
Le pas d'étirement tous les 20 pixels est volontaire.

lors de l'éxécution du script on sent qu'il est un peu lent et parfois l'étirement prend une seconde à rattraper les différents palier si on monte le curseur plusieurs fois.

j'inclu plus tot dans ma page, prototype et scriptaculous.

alors si vous avez une idée:

Le JS:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
    <script type="text/javascript" charset="utf-8">
	var texte;
 
	Event.observe(document,'mousedown', stocker_pos);
	var posY;
	Event.observe(document,'mousemove', stocker_pos_move);
	var posY_move;	
 
	function stocker_pos(event){
		posY=Event.pointerY(event);
	//	$('test').innerHTML="Position y: "+ posY_mov;
 
	}
	function stocker_pos_move(event){
		posY_move=Event.pointerY(event);
	//	$('test').innerHTML="Position y: "+ posY_mov;
 
	}
	var posdep;
	var tailledep;
	function augmenter(){
		var depy=posY_move-posdep;
//		$('test').innerHTML="height: "+tailledep+" | depy: "+depy;
		var test=tailledep+depy
		if((test %20)==0){
		newtaille=tailledep+depy;
		var hg=newtaille+'px';
		$('div_test_1').setStyle({
				'height': hg
			}
		);
		}
	}
	function start_agr(){
		document.addEventListener('mousemove',augmenter,false);
		posdep=posY;
		tailledep=$('div_test_1').getHeight();
	}
	function stop_agr(){
		document.removeEventListener('mousemove',augmenter,false);
	}
 
	function initEcouteurs() {
		document.addEventListener('mousedown',start_agr,false);
		document.addEventListener('mouseup',stop_agr,false);
 
	}
	window.addEventListener('load',initEcouteurs,false);
 
	</script>

le HTML (sommaire ^^ )

Code :

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

<div id="div_test_1"><div id="button_redim">here</div></div>

**le_chomeur** · 11/04/2009, 11h34

tu cherches a faire un panneau déroulant ??

http://mbox.tuxfamily.org/toggle/ ??

**roduce** · 12/04/2009, 19h52

non ^^

Imagine une div avec une poignée en bas. Je veux qu'en fonction d'où se trouve la poignée une fois cliquée on étire le div le bas. En gros si on déplace la souris de 60 pixels vers le bas la hauteur de la div soit de h+60px.

Voilà

**le_chomeur** · 13/04/2009, 11h26

ok , alors , gardons, l'effet ;-)
ne tiens pas compte du click ...

si oui il s'agit juste d'un algo calculant les pas .. ;-)

**roduce** · 13/04/2009, 14h02

l'algo qui calcule les pas je l'ai déjà je pense avec un modulo. Et même si l'on ne clique pas sur le script http://mbox.tuxfamily.org/toggle/ l'agrandissement ne se fait pas en fonction de la position de la souris .

C'est à mon avis l'algo qui écoute la position de la souris et déplace à chaque pixel qui est étrangement lent.
C'est surtout ça que je souhaiterais comprendre.
en effet je ne vois pas comment gérer autrement ma fonction. et je vois que certains codes sont plus fluides: google agenda par exemple. Et je ne comprends pas pourquoi il n'est pas fluide.

**le_chomeur** · 13/04/2009, 19h02

parce qu'il faut utiliser justement un algorythme , permettant , de calculer , non pas de 20 en 20 par exemple , mais de 10, 14,5, 19,3 25 .... jusqu'à arriver a la valeur finale , qui fait que l'effet d'ouverture sera fluide , d'où un véritable ALGORITHME et non pas comme toi de 20 en 20

**gwyohm** · 14/04/2009, 09h16

Envoyé par roduce

j'inclu plus tot dans ma page, prototype et scriptaculous.

Tu les inclues mais tu ne les utilises pas... J'ai déjà fait quelque chose qui ressemble à ce que tu veux faire (en tout cas je crois)... l'idée étant de pouvoir redimensionné un div avec un autre (avec prototype et scriptaculous). si ca peut t'aider...

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
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Test resize</title>
  <link rel="stylesheet" type="text/css" href="style/css.css" />
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
 
</head>
<body>
 
      <div id="resizable" style="border:#000 1px solid;background:red;float:left;">
        <div id="sizer" style="float:right;width:20px;height:20px;background-color:green;"></div>
      </div>
 
    <script type="text/javascript">
    Event.observe(window, "load", function(e) {
        var initial;
        var pnode;
        var dim;
        new Draggable("sizer", {
          onStart:function(drag, e) {
            pnode = $(drag.element.parentNode)
            initial = pnode.viewportOffset();
            dim = $(drag.element).getDimensions();
          },
          onDrag:function(drag, e) {
            var pos = drag.element.viewportOffset();
            pnode.setStyle({
              width: (pos.left - initial.left + dim.width) + "px",
              height: (pos.top - initial.top + dim.height) + "px"
            });
          }
        });
    });
    </script>
 
</body>
</html>

Quand on déplace la div verte, ca redimensionne la rouge (invisible au départ)

Code à fluidifier (agrandissement div interactif)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager