Newsgroup: it.comp.lang.javascript
Titolo: ridimensionare 2 div affiancati con il mouse

cioe vorrei spostare con il mouse i margini
-----| |-----
      | |
      | |
      ><
      | |
      | |
DIV  | | DIV
uno si allarga e l'altro si stringe
qualche esempio ?
(no jquery)

 (no jquery)
Tendenze masochiste?


Se ti ho ben capito vorresti un controllo "splitter" per ridimensionare 
i div (mi confonde il fatto che poi parli di margini).
 
Ti butto un esempio *MOLTO* quick & dirty, così come mi è venuto, con 
dimensioni prefissate e senza pretese di eleganza o riutilizzabilità.
 
Diciamo che è un semplice "proof of concept", perché per fare un 
controllo riutilizzabile ci vuol ben altro lavoro.
 
HTML:
 
<body>
     <div id="left" class="test"></div>
     <div id="splitter"></div>
     <div id="right" class="test"></div>
</body>
 
CSS:
 
div.test{
     width: 200px;
     height:300px;
     float: left;
}
#splitter{
     width: 20px;
     height:300px;
     background-color: green;
     cursor: ew-resize;
     float: left;
}
#left{
     background-color: red;
}
#right{
     background-color: blue;
}
 
JS:
 
onload = function(){
     var splitter = document.getElementById("splitter"),
         l = document.getElementById("left"),
         r = document.getElementById("right");
 
     splitter.onmousedown = function(evt){
         this._dragging = true;
         this._lastX = evt.clientX;
         evt.preventDefault();
     }
     document.onmouseup = function(evt){
         splitter._dragging = false;
     }
     document.onmousemove = function(evt){
         if(splitter._dragging){
             var delta = evt.clientX - splitter._lastX,
                 currLW = parseInt(window.getComputedStyle(l, 
null).getPropertyValue("width"), 10),
                 currRW = parseInt(window.getComputedStyle(r, 
null).getPropertyValue("width"), 10);
             l.style.width = Math.min(400, Math.max(currLW + delta, 0)) 
+ "px";
             r.style.width = Math.min(400, Math.max(currRW - delta, 0)) 
+ "px";
             splitter._lastX = evt.clientX;
         }
     }
}


Dai, mica lo ordina il dottore di usare sempre e comunque jQuery.
Anzi pare di s�, visto che ormai la gente lo usa anche solo per non 
scrivere document.getElementById...

 Dai, mica lo ordina il dottore di usare sempre e comunque jQuery.
 
D'accordo, dipende da cosa vuoi fare, nel caso specifico basta una riga:
$(div).resizable()
 
un esempio a tre div lo vedi qui:
http://oreste.parlatano.org/prove_js/div_dimensionabili/
 
 
il tutto con poche righe di programma:
$('#t').resizable({
resize:function(aa,bb){
var h=bb.size.height;
var w=bb.size.width;
var nh=parseInt(h-4);
var nw=parseInt((w/3)-10);
$('.r').height(nh);
$('.r').width(nw);
}}); 
 
un po' come il sole, dove entra jquery non entra il dottore.

 un po' come il sole, dove entra jquery non entra il dottore.
Discutibile, ma sarebbe un discorso lungo.

Non pensavo ad alcuna polemica, jquery chiaramente impedisce di pensare a fondo, un modo di vivere la programmazione javascript più superficiale. Certo è che quando in un progetto ti devi occupare di linguaggio lato database, linguaggio lato server, linguaggio lato client, metalinguaggi ed altre codificazioni varie, ebbene vedi un buon framework come la manna dal cielo. A mio parere molti IDE sortiscono lo stesso effetto, programmi perdendo di vista i dettagli, i quali poi saltano fuori in fase di test. Voglio dire che la tendenza va nella direzione della velocità di scrittura, lasciando la qualità ad una fase successiva, naturalmente il tutto dimensionato alla capacità dei programmatori.
Il flickering è dovuto alla fretta nello scrivere il codice, sono convinto che si possa risolvere, ma non ci metto mano ora.

 codice, sono convinto che si possa risolvere, ma non ci metto mano ora.
Il problema e` che, viste le vicissitudini passate da Javascript nei vari 
browser, spesso e` piu` efficiente scrivere $('.pippo') piuttosto che 
andare a vedere se in IE, FF, O, Cr, ecc. sia piu` veloce 
getElementsByClassName() o un for su tutto il DOM o chissa` quale altro 
sistema.
E nel mentre che fai le ricerche, riscrivi quasi pari pari quello che ha 
gia` scritto jQuery (o altri framework).
Si`, ottimo per imparare, ma quando devi lavorare, fare le cose in tre 
righe e 2 minuti invece che in 50 righe e 4 giorni di debug, ha il suo 
peso. :)
Bye.

 sono convinto che si possa risolvere, ma non ci metto mano ora.
Certo, per carit�, avevo solo usato il caso come esempio.