Fare il resize di una textarea
lunedì 16 aprile 2007
Vota!
Loading ...Silvicius mi ha chiesto come si potesse creare una textarea ridimensionabile, tipo quella dell'editor di WordPress. L'esempio che segue è solo una bozza: non è completo e non funziona nemmeno troppo bene. Vale come esempio didattico: lo scopo qual è? Provare che si può fare e stimolare l'ingegno: se hai fatto un'editor in JS questo è una stupidata per te. 
Guarda l'esempio: fa più o meno quello che ti serve, usando la libreria DOM-drag di Youngpup.net e una funzioncina JavaScript: alcuni esempi li trovi qui. Il "dragger", la DIV rossa, viene posizionato alla fine della textarea, usando la proprietà offsetTop, che calcola la distanza dall'alto della pagina di un elemento HTML.
// Oggetto da draggare var oggetto = document.getElementById("spostami"); // Metto il cursore sotto la textarea oggetto.style.top = (parseInt(document.getElementById("test").offsetTop) + 100) + "px"; // Inizializzo drag vincolandolo solo all'asse Y Drag.init(oggetto,null,8,8); // Funzione all'evento drag oggetto.onDrag = function(x,y) { document.getElementById("test").style.height = (y - parseInt(document.getElementById("test").offsetTop)) + "px" }
Come al solito il sorgente è meglio del codice qui riportato: la DIV e la TEXTAREA hanno entrambe uno stile applicato. Dagli un'occhiata. Drag.init() e oggetto.onDrag sono metodi propri della classe DOM-drag. Guarda la documentazione.
Vado a vedere Grey's Anatomy.
In alternativa puoi abbonarti alla newsletter, riceverai un'email ogni volta che verrà pubblicato un nuovo post. Il tuo indirizzo email sarà gestito da Feedburner.
16 aprile 2007 alle 23:26
Grazie mille per avermi dedicato un post! Sei troppo gentile!
Adesso ci smanetto un po’ e poi ti saprò dire
17 aprile 2007 alle 02:13
ottimo!
17 aprile 2007 alle 20:04
Oggi, nelle ore buche all’università, ho fatto tutto! Grazie mille ancora per i consigli!
Adesso il mio editor è veramente fico
18 aprile 2007 alle 08:51
@Silvicius
Ecco, adesso vogliamo vederlo però
21 aprile 2007 alle 13:34
Io ho risolto così:
Scaricato il DOM-Drag.
window.onload=function() {
// controllo che il browser sia compatibile
if (document.all || document.getElementById)
{
// Oggetto da draggare // lo selezione in modo diverso a seconda se si tratta di IE o resto del mondo
var oggetto = document.all ? document.all["area_di_testo"] : document.getElementById(”area_di_testo”);
// Immagine che fa da cursore (20×20px)
var dragger = document.all ? document.all["dragger"] : document.getElementById(”dragger”);
// Metto il cursore 57 px (height della textarea settata in CSS)
dragger.style.top = (parseInt(oggetto.offsetTop)+57) + ‘px’;
// Inizializzo drag vincolandolo solo all’asse Y e bloccando lo scrolling verso l’alto, al limite minimo di altezza della textarea (50 nel mio caso). 528, perché piazzo il cursore a destra in basso della textarea
Drag.init(dragger,null,528,528,(parseInt(oggetto.offsetTop)+50));
// evito di far veder il cursore prima che sia nella sua posizione corretta
dragger.style.display = ‘block’;
// Funzione all’evento drag
dragger.onDrag = function(x,y) {
// -2 per recuperare lo scarto verso il basso dato alla posizione del cursore quando l’abbiamo inizializzato (era per evitare la sovrapposizione dello stesso con la textarea)
oggetto.style.height = (y - parseInt(oggetto.offsetTop)-2) + ‘px’;
}
}
}
piazzato ciò in HTML:
Ecco. Per vedere come funzia vi tocca iscrivervi a quotidianoStyle (che è poi una cosa simpatica via!) e caricare un video (tra un giorno o due in verità visto che appunto ci sto lavorando).
Spero serva, quanto a me è servito questo post!
Ciao
21 aprile 2007 alle 13:37
UPS: come normale che fosse strip_tags m’ha cancellato il codice HTML…boh