Code à fluidifier (agrandissement div interactif)

Version imprimable

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:

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:

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

11/04/2009, 11h34
le_chomeur

tu cherches a faire un panneau déroulant ??

http://mbox.tuxfamily.org/toggle/ ??
12/04/2009, 19h52
roduce

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à
13/04/2009, 11h26
le_chomeur

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

si oui il s'agit juste d'un algo calculant les pas .. ;-)
13/04/2009, 14h02
roduce

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.
13/04/2009, 19h02
le_chomeur

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 ;)
13/04/2009, 19h24
roduce

le pas de 20 est volontaire et je ne souhaite pas le modifier.

Je crois que tu ne vois l'objectif de mon code.

Le but n'est pas que la div s'agrandisse lorsque l'on clique sur un bouton.
mais qu'elle s'agrandisse comme lorsqu'on étire les bords d'une fenêtre. sauf que la seul le bord bas m'intéresse.

Si je dis que le code n'est pas fluide c'est qu'il semble que quand on étire trop vite:
les différents pas mettent du temps à s'afficher.
13/04/2009, 21h40
le_chomeur

un exemple complet en ligne ???? ( mais je vois exactement ce que tu veux dire .. ) et c toi qui ne comprend pas l'utilisation d'un véritable algorithme ;-)
13/04/2009, 22h41
roduce

ton algorythme tel que présenté parle de fluidité au sens graphique du terme : "image par seconde" je parle fluidité, au sens réactivité. En effet mon problème n'est pas l'agrandissement sacadé qui est désiré: je veux que ma div puisse etre agrandie d'un nombre de pixels par pas de 20. Donc l'intervalle des 20 pixels est un souhait.

Mon souci est que quand on clique ET LAISSE ENFONCE sur la zone permettant d'agrandir : si on déplace la souris de 20 pixels vers le bas la MAJ est instantanée. si on la déplace de 200 pixels, les 10 différentes étapes mettent parfois du temps à s'éxécuter. certe ce n'est qu'une seconde mais c'est génant.

Peux tu me donner un exemple de traitement à appliquer pour corriger ce problème?

Citation:

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:

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)

14/04/2009, 09h16
le_chomeur

Ok je comprend mieux, dans ce cas , il faut agrandir uniquement lorsque la souris , dépasse de 20px ( via un modulo , pour ajouter des pas de 20 a chaque fois ... )

au niveau de l'algo j'ai regardé plus en détail ton code :

- tu effectues le calcul a chaque déplacement de souris, ce qui veut dire qu'a chaque déplacement , ne serait-ce que d'un pixel tu effectues les calculs avec le modulo ce qui est très lourd en terme de processeur.

- il serait préférable de garder en mémoire la position d'origine la position courante , si delta de 20 on ajoute, si delta de 40 on ajoute et ainsi de suite , ( via le modulo mais ne pas effectuer le calcul a chaque boucle ou affectation de la taille