CSS  »  Articoli  »  Effetti con CSS 

NiftyLoad

Uno delle questioni più frequenti, soprattutto per chi non è pratico di javascript, è come far coesistere i Nifty Corners con altri script, dato che è possibile assegnare una sola funzione a window.onload. Ho così pensato a una soluzione che si risolva questo problema e che sia pratica e facile da adottare. Nell'esempio 13 viene mostrato un breve messaggio attraverso un alert e in seguito vengono applicati i Nifty Corners al div della pagina. Basta sostituire il tradizionale window.onload con NiftyLoad. La sezione Javascript, incorporata nel caso dell'esempio, la seguente:

NiftyLoad=function(){
  Nifty("div#box","big");
}

Ovviamente il codice appena visto potrà anche essere incluso in un secondo script esterno, come nel caso dell'esempio precedente. Cosa essenziale è che la librieria per i Nifty Corners e le loro chiamate specifiche siano gli ultimi due blocchi script della sezione head della pagina per poter mantenere l'attivazione di eventuali altri script della pagina. La funzione NiftyLoad può essere usata al posto di window.onload anche nel caso in cui i Nifty Corners siano l'unico script della pagina, come per tutti gli altri esempi visti nell'articolo.

Note finali e risoluzione dei problemi

Nel realizzare i Nifty Corners Cube ho cercato di mantenere lo script il più semplice e versatile possibile, e spero di aver guidato i lettori, soprattutto i meno pratici di javascript, al loro uso attraverso i molti esempi.

Esempi che sono serviti anche per verificare compatibilità cross-browser e robustezza dello script nelle varie situazioni. Questo non significa che non si possano riscontrare problemi di resa.

Ho così pensato, in chiusura di articolo, di racchiudere alcuni consigli per la risoluzione dei problemi con i Nifty Corners. Anche se non sono necessarie conoscenze di Javascript, una solida base di HTML e CSS è consigliata. Buone pratica da adottare sempre, indipendentemente dai Nifty Corners, sono la validazione dell'HTML e del CSS e il test di resa sui diversi browser.

Se si dovessero riscontrare problemi, è consigliabile togliere temporaneamente i Nifty Corners e ripetere i test. Un approccio generale di sviluppo, che ho adottato personalmente nel preparare gli esempi degli articoli, è quello di aggiungere i Nifty Corners solo dopo aver ultimato di scrivere HTML e CSS della pagina.

Due caratteristiche importanti introdotte in questa versione dovrebbero semplificare molto l'uso dei Nifty Corners. I colori vengono ora rilevati automaticamente dallo script, agevolando di molto la modifica dei colori del CSS di pagina senza dover agire sulle chiamate per gli angoli arrotondati. L'uso del padding sia verticale che orizzontale è ora possibile. Soprattutto per il padding verticale l'unita di misura da usare sono i pixel, ed è consigliato avere valori almeno pari alla altezza degli angoli arrotondati (2px per i piccoli, 5px per gli angoli normali e 10px per quelli grandi).

Gli esempi dovrebbero costitutire un buon punto di partenza per il lettore. Una cosa importante da tener presente è che in una pagina un dato ID, secondo le specifiche HTML, dovrebbe essere usato una sola volta. In caso più di più elementi simili, andrebbero usati il selettore discendente o il selettore di classe.

Conclusioni, licenza e download

Si conclude qui l'articolo sulla terza versione dei Nifty Corners, in cui abbiamo visto diversi esempi del loro uso. Il mio consiglio è di riferirsi a questo articolo come una mini-guida.

I Nifty Corners Cube sono rilasciati ora sotto licenza GPL, e sono stati pubblicati in italiano e in inglese il 22 di Marzo 2006. Codice, esempi e licenza d'uso sono disponibili per il download. Buon divertimento!

Altri articoli

Altre guide

Altre newsletter