Nel web 2.0 l'uso di div mobili è sempre più frequente, sia per la velocità che per estetica e usabilità. In un articolo precedente ci siamo occupati di come creare un pop-up dinamico ma fisso. Ora vediamo come renderlo anche ridimensionabile e mobile all'interno delle nostre pagine.
Puoi vederne una Demo qui.
L'installazione è molto semplice, ti basta fare un copia e incolla per applicarlo al tuo Blog. La versatilità è abbastanza ampia, lo puoi utilizzare per far comparire un messagio ai tuoi visitatori, per mostrare delle immagini, o per inserirci degli annunci adsense.
Prima di tutto copia queste righe prima del tag </head>:
<script type="text/javascript" src="http://www.risparmiocitta.it/source/div-spostabile/mootools.js"></script>
<script type="text/javascript">
document.addEvent( 'domready' , function() {
$('win').makeDraggable({'handle':$('topbar')});
$('win').makeResizable({'handle':$('resizer') , 'limit':{'x':[200,400], 'y':[200,400]}});
} );
</script>
e aggiungi o all'interno della tuo foglio di stile o all'interno dei tag <style> queste classi:
.win {background:#f9f9f9; width:250px; height:300px;position:relative;border:1px dotted #666; background-color:#f0f0f0;}
.tobpar {height:25px; border-bottom:1px dotted #999; background-color: #99CCCC; cursor:move; text-align:center; font-weight:bold; font-size:12px; line-height:25px; color:#333333}
.resizer {width:15px;height:15px;top:100%;margin-top:-15px; left:100%; margin-left:-15px; background:#ccc ;position:absolute;cursor:se-resize; color:#666666}
.text {margin:10px; height:240px; color: #003366; font-size:12px; line-height:1.7em; text-align:justify}
Ora inserisci il codice html prima del tag <body>:
<div id="win" class="win"><div id="topbar" class="tobpar">Finestra spostabile</div>
<div id="resizer" class="resizer">/</div><div class="text">Qui inserisci il testo che vuoi.</div></div>
Per personalizzare e adattarlo al tuo blog puoi intervenire direttamente sul codice Css. In casi vuoi modificare la misura minima e massima del ridimensionamento, modifica i numeri segnati in blu e rosso all'interno del primo script verde: i numeri in blu identificano la misura minima, mentre quelli in rosso, la misura massima.
Puoi scarica tutto il materiale per analizzarlo da qui.
Per problemi o dubbi sulla personalizzazione sono disponibile a verificarli insieme a te.
on FeedBurner.com
3 commenti!:
Ciao,
ti posso chiedere perchè hai inserito questo post sutto la categoria Ajax?
Bel blog, bravo! :)
Ciao Giovanbattista, beh in effetti anche se lo script non comunica col server, tipico di ajax, però utilizza mootools quindi un certo legame se non diretto lo ha.. Grazie per i complimenti, ciao a presto!
Mi piace la tua costanza!
bravo, e continua cosi' :D
ti leggo!
Posta un commento