Blog

[JS] Cambiare CSS in un attimo

Ago 1

Oggi vediamo come cambiare il foglio di stile di una pagina con qualche riga di JavaScript. Una fuzione del genere può essere utile in tutti i casi in cui dobbiamo avere più versioni grafiche dello stesso sito, come ad esempio uno stile a più contrasto oppure uno stile dove cambiamo il colore dominante.

La pagina contenente più stili dovrà avere tutti i css dichiarati, ovviamente dando priorità al foglio di stile predefinito che il browser dovrà applicare al caricamento della pagina. Per far ciò basta impostare in modo specifico l'attributo rel del tag link usato per caricare i CSS.

Questo sarà il CSS predefinito:

<link rel="stylesheet" href="html/style.css" type="text/css" title="Stile Chiaro">

Mentre questo sarà il CSS alternativo:

<link rel="alternate stylesheet" href="html/style_dark.css" type="text/css" title="Stile Scuro">

A questo punto già con Firefox siamo in grado di cambiare lo stile della pagina tramite Visualizza �?? Stile pagina. Vediamo adesso come farlo da JavaScript.

Per accedere ai figli di stile basta un po' di conoscenza di DOM, infatti basta leggere e scrivere la proprietà styleSheets dell'oggetto document.

css = document.styleSheets;

Il contenuto della variabile css sarà un array con gli oggetti dei fogli di stile. L'elemento numero 0 sarà il primo CSS dichiarato, mentre l'elemento 1 sarà il secondo CSS. Agendo sulle proprietà enable e disabled dell'oggetto contenuto dell'array, sarà possibile attivare e disabilitare ogni stile permettendo di cambiare tra uno stile e l'altro.

Esempio

Una funzione applicativa potrebbe essere la seguente:

function styleChange(){

        var ss = document.styleSheets;



        if(ss[1].disabled){

                ss[1].disabled = false;

                ss[0].disabled = true;

        }

        else if(ss[0].disabled)

        {

                ss[1].disabled = true;

                ss[0].disabled = false;

        }

}

DIASPORA* Facebook

[JS] Ordinare un array di date

Mag 9

Oggi vediamo come ordinare un array caricato con stringhe di date così formattate: gg/mm/yyyy. Javascript fornisce una classe Array e tra i suoi metodi troviamo sort() che fa proprio al caso nostro. L'unico dettaglio è che sort effettua un confronto alfabetico. In caso di numeri o date non funzionerebbe.

Una peculiarità molto utile del metodo sort() è che può essere esteso per ordinare tipi arbitrari con l'uso di una funzione di due parametri, data proprio come argomento a sort().

function (a, b)


Questa funzione verrà chiamata da sort caricando in a e b gli elementi da confrontare. La funzione dovrà quindi restituire:
Post image

  • 1 (o positivo) se il primo parametro è maggiore del primo
  • 0 se sono uguali
  • -1 (o negativo) se il primo parametro è minore del secondo

Quindi per confrontare un numero basterà creare questa funzione

function(a, b) { return a[0] - b[0] }


Mentre per confrontare date formattate in una certa maniera occorre un po' di lavoro in più, ma nulla di impossibile.

In questo codice io prendo la stringa, divido il giorno, il mese e l'anno, quindi creo una nuova classe Date caricandola con i dati divisi. Adesso il confronto lo faccio con la Unix time restituita dal motodo getTime() di Date.

function(a,b){

        a = a[0].split("/");

        b = b[0].split("/");

        a=new Date(a[2],a[1],a[0]);

        b=new Date(b[2],b[1],b[0]);

        return a.getTime() - b.getTime()

       }


Spero di essere stato utile a qualcuno :)

DIASPORA* Facebook

JavaScript, AJAX, xhtml... e Flash?

Gen 13

In questi giorni tra una formula matematica e una classe da dato astratto, ho messo mano ad alcuni moduli del sito, prevalentemente quelli di amministrazione, e al login. Cosa avrai mai fatto vi chiederete... Ho dotato di alcune funzioni AJAX (acronimo di Asynchronous JavaScript and XML) che permettono di velocizzare le gestione del blog e salvaguardare la banda. Mentre là fuori ajax veniva buttato dovunque, io sono sempre rimasto indietro a causa della mia cattiva conoscenza di JavaScript, quindi mi sono messo lì a cercare tutorial, guide, specifice e messo tutto insieme, alla fine mi sono fatto il mio piccolo framework.

Usando tutti questi servizi 2.0 che usano javascript per generare contenuti dinamici o animazioni di vario genere, mi sono accorto come questo sarebbe stato molto utile diversi anni fa quando la maggioranza dell'utenza si collegava alla rete con i vecchi 56k. Adesso con la tecnologia Ajax, invece di ricaricare completamente una pagina, è sufficiente farsi arrivare un piccolo file xml di pochi Kbytes da interpretare.

Post image

Continua a leggere »

DIASPORA* Facebook

Pingdom Tools, quanto è veloce il tuo sito?

Ott 14

Grazie a Piplos sono venuto a conoscenza di questo web tool veramente utile, Pingdom Tools. Come tutti voi sapranno il fattore della velocità di caricamento di un sito, è determinante per evitare di perdere potenziali visitatori. Inoltre una buona ottimizzazione della pagina porta ad un maggiore pagerank.
Ebbene questo servizio web 2.0 sviluppato in AJAX, permette di analizzare con estremo dettaglio il tempo di caricamento del sito sotto esame.

Nel mio caso si ottiene:

Post image


Continua a leggere »

DIASPORA* Facebook

Javascript: aggiungere il sito nei preferiti

Lug 21

Navigando un po‘ nel web mi sono accorto come molti siti, anche riguardanti linux abbiamo link per aggiungere il sito nei preferiti compatibile solo con Internet Explorer.

Quindi gli utenti con Firefox o altri browser si vedono un messaggio con scritto che devono fare l’operazione manualmente.

Continua a leggere »

DIASPORA* Facebook
CC BY-NC-SA 3.0 2004-2012 Daniele Napolitano — Per informazioni sulla licenza leggere le Note legali
Torna su