PROBLEMA:
Avete fatto una chat AJAX perfetta perfettina e la consegnate al Cliente tutti contenti.
Ma il Cliente (che ha sempre ragione) dice: «Mah, è bella sì, ma manca qualcosa…»
Voi, tuta blu dell’informatica, chiedete affranti: «Che cosa?» e pensate senza dirlo: «Manca quella bagascia puttana di tua nonna».
Il Cliente con quell’aria da sapiente alla Padrino di Marlon Brando che hanno tutti gli ignoranti quando non sanno bene cosa dire risponde: «Qualcosa… Ecco sì, qualcosa che la renda differente dalle altre!»
Come fare?
SOLUZIONE:
Ma non pigliamoci per il culo, suvvia.
Qualcosa, dice.
Avete studiato AJAX per gli ultimi 3 mesi ritagliandolo dal vs. tempo libero, avete usato le tecniche CSS all’ultima moda e il vostro PHP è degno di essere esposto al MOMA.
Qualcosa!
Per non parlare del Javascript veloce e snello…
Javascript…………..
GIÀ!
Il Cliente se ne fotte di AJAX, PHP, CSS, eccetera: lui sarebbe stato contento anche di una chat fatta con i frame (orrore e raccapriccio!) e di un’immagine grande 1600×1200px che fornisce lo sfondo.
Lui vuole vedere qualcosa di diverso!
Ora, quante chat avete visto che aggiornandosi andavano verso il basso dolcemente, senza scattare? Io nessuna.
LO SCRIPT:
- Supponiamo che i pezzi di chat ricevuti dal server vengano messi in un <div id=”chatDiv”>
- Supponiamo di avere una variabile booleana per abilitare/disabilitare lo scroll: scrollControl
- Supponiamo di chiamare ad ogni aggiornamento della chat la funzione autoScroll(scrollControl)
Ripassiamo un attimo cosa sono div.scrollTop, div.scrollHeight e div.offsetHeight:
Siccome il vostro <div> è troppo piccolo
per visualizzare tutta l’altezza della chat siete costretti
a “scrollare” (toccare il clitorotellina del mouse)
La versione iniziale della funzione quando veniva chiamata prendeva brutalmente chatDiv.scrollTop e lo poneva uguale a chatDiv.scrollHeight.
function autoScroll(scrollControl){
if(scrollControl){
document.getElementById(’chatDiv’).scrollTop = document.getElementById(’chatDiv’).scrollHeight;
}
}
Brutto, brutto.
Cliente insoddisfatto :(
Portafoglio vuoto :’(
Nuova versione cool’n’smooth: fa la differenza fra scrollHeight e scrollTop, se questa è maggiore di offsetHeight incrementa scrollTop di qualche px e si riesegue dopo un breve intervallo di tempo (30ms).
function autoScroll(scrollControl){
if(scrollControl){
if (((document.getElementById(’chatDiv’).scrollHeight*1) -\
(document.getElementById(’chatDiv’).scrollTop*1)) >\
document.getElementById(’chatDiv’).offsetHeight) { //confronta con altezza del div
document.getElementById(’chatDiv’).scrollTop = (document.getElementById(’chatDiv’).scrollTop*1) + 3;
setTimeout(’autoScroll(scrollControl)’,30); // si esegue nuovamente dopo 30ms
}
}
}
Wow, dolce!
Cliente soddisfatto :)
Portafoglio anche :o)
Pubblicato in Javascript
