moo.fx: text resize
Altra piccola modifica al layout di questo blog: ho inserito, utilizzando il framework moo.fx e prototype, la possibilità di ingrandire il testo; il funzionamento è semplicissimo, ed una volta caricati i file della libreria (dovrete avere a disposizione un vostro spazio web sul quale salvare i file) bastano due righe di Javascript.
Ecco cosa serve:
Una volta scaricati i file salvateli in remoto (in questo come nel precedente tutorial, si fa riferimento ai file nella root del vostro server remoto), poi dobbiamo inserire alcune righe di codice. Prima cosa "carichiamo" i file nella pagina e creiamo la funzione (sostituite nomesito.it con il vostro URL):
<head>
< script type="text/javascript" src="http://www.nomesito.it/prototype.lite.js"></script>
< script type="text/javascript" src="http://www.nomesito.it/moo.fx.js"></script>
< script type="text/javascript" src="http://www.nomesito.it/moo.fx.pack.js"></script> < script type="text/javascript">
window.onload = function() {
myTextPX = new fx.Text('container', {duration: 400, unit: "px"});
myTextEM = new fx.Text('container', {duration: 400});
}
< /script>
< /head>Ricordate che sarà necessaria una classe CSS container alla quale lo script farà riferimento (in questo caso la classe gestisce tutto il layout ma è possibile scegliere anche classi specifiche, ad esempio il post-body o la sidebar etc etc).Ora dobbiamo creare i pulsanti che "chiameranno" l' effetto (nel caso del mio blog ho utilizzato due immagini ma in questo esempio, per semplicità , ho messo un testo) ed è fatta:
<a href="#" onclick="myTextPX.custom(12,
12);"> testo originale</a>
<a href="#" onclick="myTextPX.custom(12, 14);">testo grande</a>
|
Permalink |
|
