Div Mobile e Ridimensionabile con Mootools.
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.
Aggiungi su OkNotizie
5 Commenti su “Div Mobile e Ridimensionabile con Mootools.”
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’
ti leggo!
sks ma i link per il download dove sono?
Perchè poi non fuonziona, l’ho messo tra i tag come dici ma non succede niente!
non c’è più il link, perchè un articolo importato dal vecchio blog quando noizexperience stava su blogger.com