<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>

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