<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/platform.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/16734928?origin\x3dhttp://sid05.blogspot.com', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Mootools: how to Fx.Scroll 11/03/07

Torno volentieri a parlare di mootools e moo.fx, mancava all' appello (e tra gli effetti del mio blog) lo scroll della pagina, ingredienti:

  1. Il framework mootools, rispetto al precedete tutorial reflections.js vi consiglio di scaricare questo mio download (quasi) completo
  2. Poche righe di codice javascript
  3. Codice HTML per richiamare i "punti" della pagina

continua ยป

Una volta scaricato mootools.js caricatelo nel vostro spazio remoto, quindi inserite questo codice tra i tag <head> della vostra pagina:

<script type="text/javascript" src="http://www.nomedominio.com/mootools.js"></script><script type="text/javascript">window.addEvent('domready', function(){ new SmoothScroll(); })</script>

Oltre a caricare il framework avrete richiamato la funzione; a questo punto potete linkare ogni id presente nella pagina come un normale <a name="esempio">:

<a href="#top">torna sopra</a>

Alcuni esempi: vai all' archivio, torna sopra (ho tolto lo script ma il codice resta valido)

Etichette: , , ,

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

Ultimi commenti