Archivio per la categoria 'codice sorgente'

Tutorial.js: 1.4kb per un Plug-In by RD


Tutorial.js is a stand alone plug-in based on MooTools that weights about 1.4kb. It allows you to create professional presentations (for tutorial’s purposes, for example) of an infine number of tabs. Moreover it requires only a line of Javascript and the markup is all done by HTML.
Below in this article you can find how to use Tutorial.js, a demo and the download link.


Molte volte ho avuto la necessità di creare tutorial e presentazioni per i motivi più svariati, oltre che per applicazioni personali. Le solite fixed application mi avevano davvero annoiato, volevo qualcosa …

Creare List Item fluidi con i CSS

Le Navigation Tabs sono sempre più in voga nei siti di ultima generazione, soprattutto quando sono basate su liste di links orizzontali. Permettono una navigazione semplice ma allo stesso tempo elegante.

La tecnica che vi mostro oggi mette in pratica la creazione di queste liste, le Sliding Fluid Tabs,  ovvero liste a contenuto fluido. Il vantaggio principale è che non ci sono limiti di spazio, il testo delle tabs può essere lunghissimo, corto o variabile: si otterrà sempre lo stesso effetto. In aggiunta, non occorre utilizzare immagini di grandi dimensioni come accade in molte altre tecniche, e le righe CSS necessarie sono davvero poche.

Prima di presentarvi questa tecnica (il cui nome e implementazione sono da me inventati)

Creare Custom Alert sempre diversi con moo.rd

In questo articolo vediamo come creare degli alert sempre differenti l’uno dall’altro utilizzando il costruttore Custom.Alert di moo.rd.
Per portare a termine questa applicazione correttamente, è necessario creare un foglio di stile css con tanti stili quanti sono i differenti alert che vogliamo creare, nel nostro esempio sei.
Ricordo che per creare degli stili appropriati per i Custom Alert, è necessario creare tre classi: alerthead, alertbox e alertbody. (per maggiori informazioni)

Dato che i nostri alert saranno sei, dovremo creare 18 classi:

  • ‘ab1′, ‘ah1′, ‘abd1′ per il primo alert (dove la prima classe è per alertbox, la seconda per alerthead e la terza per alertbody)
  • ‘ab2′, ‘ah2′, ‘abd2′ per