<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

moo.fx per principianti 14/01/07

Come i più attenti avranno notato, da qualche giorno ho aggiornato il blog alla nuova versione di Blogger (ex beta), adesso ho le etichette che compaiono a fine post e niente di particolare da aggiungere (ci tornerò, spero dettagliatamente, in questi giorni)... ma veniamo al tema di questo post.

Moo.fx

Moo.fx è una libreria di effetti, scritti in JavaScript utilizzabile con il framework prototype o mootools. La maggior parte della documentazione (tutta quella ufficiale) è in inglese nonostante l' autore,Valerio Proietti, sia italiano. Per questo motivo e visto che comunque era da un pò che ne volevo parlare, ho deciso di pubblicare questo breve tutorial, o guida per principianti; maggiori informazioni e supporto (in inglese) sul forum del progetto. Il codice che segue è lo stesso della banda nera superiore che ho aggiunto al blog; ho escluso i filtri della trasparenza nel CSS per evitare problemi legati ai browser (relativamente al supporto dei filtri CSS) e per mantenere la concentrazione su moo.fx.

Cosa ci serve: per prima cosa dobbiamo scaricare questi file: moo.fx.js , cioè la libreria vera e propria e poi il framework JavaScript; per questo esempio ho scelto di utilizzare moo.fx con prototype.js.Una volta caricati sul nostro server/provider, andiamo a scrivere il nostro documento partendo dall' unico script che sarà necessario:

<head>
<script type="text/javascript" src="prototype-1-.4.0.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript">
window.onload = function() {
primo = new fx.Height('moofx', {duration: 400});
primo.hide();
}
< /script>

Carichiamo prima la libreria e il framework che abbiamo sul nostro server e poi creiamo la funzione al caricamento della pagina: una variabile (primo) che utilizza l' oggetto Height (altezza) e lo applica a moofx (che è un normale id nel foglio di stile. La riga conclusiva nasconde la variabile (e il div relativo).

Passiamo al foglio di stile:

<style type="text/css">
<!--
#moofx{margin: 0px;color: #FFFFFF;width: 100%;font-size: 1em;text-align: justify;background-color: #000000;}
.guida a{font-family: Arial, Helvetica, sans-serif;font-size:16px;color:#FFFFFF; margin: 0px; padding: 0em 0.5em;font-weight: bold; background-color: #CC6600; width: 100%; display: block; line-height: 15px;}
.guida a:hover{background-color: #000000;}
#moofx p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #FFFFFF; margin: 0px; padding: 1.2em; text-align: left; line-height: 28px;}
</style>
</head>

Ed infine il codice HTML

<body>
<div id="moofx" class="fx_Height">
<div align="center"><p>Nascondere
o visualizzare un contenitore CSS con moo.fx la libreria in JavaScript scritta da Valerio Proietti... questo mini tutorial è stato realizzato da <a href="http://sid05.com>Sid05</a></p> </div>
< /div>< div align="left"><span class="guida"><a
href="#" onclick="primo.toggle();">?</a></span></div>
</body>

Anche qui dobbiamo dire poco: solo che la variabile richiamata dal click del
mouse utilizza l' oggetto toggle che altro non è che uno switch che restituisce
i due valori consecutivamente... facile no

Etichette: , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti