venerdì 26 giugno 2009

Immagine background a rotazione automatica su DIV con CSS

Problema generale:
come si può far si che, senza l'utilizzo di Ajax, lo stile applicato ad un DIV definito in una pagina HTML o PHP cambi automaticamente ad intervalli definiti?


Soluzione generale:
utilizzando getElementById e javascript.
getElementById è un metodo dell'oggetto document, la pagina visualizzata, che cerca al
suo interno un tag HMTL con un attributo ID assolutamente univoco.
Questo metodo può essere utilizzato per ricercare il DIV che si vuole modificare e
cambiarlo indirizzandolo ad un nuovo stile definito nel CSS.
Con javascript definiremo delle mini funzioni che ci permetteranno di gestire temporalmente le
variazioni di stile.
Esempio specifico: in una pagina JOOMLA come posso variare lo sfondo di un div ogni tot
secondi facendo ciclicamente ruotare 2 o più immagini differenti?

Definiamo la situazione:

index.php contiene:
< . div id="sfondo1" . >" (eliminare i punti)

template.css contiene:

#sfondo1 {
width: 940px;
height: 448px;
background:
url("../images/1.jpg") no-repeat;
}

prima di tutto devo creare nel file template.css un nuovo selettore ID per quante sono le
immagini che ciclicamente faranno da sfondo al mio DIV, variando di
volta in volta l'immagine di background, quindi:

#sfondo2 {
width: 940px;
height: 448px;
background:
url("../images/2.jpg") no-repeat;
}

#sfondo3 {
width: 940px;
height: 448px;
background:
url("../images/3.jpg") no-repeat;
}

eccetera...

Veniamo al succo del problema, come cambiare, ad interavalli regolari o no, ID al DIV.

Scriviamo delle semplici funzioni javascript che effetuino questa operazione:

F 0, da richiamare con

< . script type="text/javascript">changebkg()  (eliminare i punti)
in index.php subito dopo la
definizione di < . div id="sfondo1" . >" (eliminare i punti)

changebkg () {
setTimeout('changebkg1()',
15000);
}

F 1 – 2 – 3 da
definire in ordine inverso nell'<head> di index.php o da
richiamare dall'estero:

function changebkg3() {
document.getElementById('sfondo3').id = 'sfondo1';
setTimeout('changebkg1()', 15000);
}

function changebkg2() { document.getElementById('sfondo2').id = 'sfondo3';
setTimeout('changebkg3()', 15000);
}

function changebkg1() {document.getElementById('sfondo1').id = 'sfondo2';
setTimeout('changebkg2()', 15000);
}

Tutto qui? Si, questo è tutto il codice da inserire per implementare il nostro sfondo a rotazione.
Certo il numero di selettori e di funzioni cresce all'aumentare delle immagini che vogliamo far
ruotare, ma in caso di numero molto alto questa soluzione si rivela immediatamente poco vantaggiosa da molti punti di vista e, purchè funzionante comunque al 100%, dovrebbe essere sostituita con un'altra
più complessa.

Spiego in breve la soluzione: la F0 ha il solo scopo di avviare l'esecuzione delle
funzioni F1, F2 ed F3 che successivamente si richiameranno a loro volta in un ciclo che permetterà la rotazione circolare delle immagini di sfondo.
Le chiamate di funzioni vengono effettuate tramite il metodo setTimeout(code,millisec,lang)
che permette di definire un tempo di attesa prima della chiamata, ci permetterà quindi di definire il tempo che dovrà trascorrere prima che un'immagine di sfondo venga sostituita con la successiva. Nell'esempio 15000 millisecondi = 15 secondi.

Il metodo getElementById ci permette di richiamare l'elemento desiderato e di cambiarne l'ID, quindi con l'istruzione:

document.getElementById('sfondo1').id = 'sfondo2';

il div "sfondo1" assume l'aspetto dato dal selettore ID nel CSS "#sfondo 2", nel nostro esempio i selettori sono identici, ma varia solo l'immagine di sfondo.

Qualsiasi consiglio su come migliorare questa soluzione oppure soluzioni alternative per lo stesso problema possono essere messi a disposizione di tutti lasciando un commento.
Buon divertimento! :)

martedì 12 maggio 2009

Trucco per Facebook - Facebook Easter Egg

Ecco un piccolo trucco per stupire i vostri amici su Facebook:

cliccate sulla pagina di Facebook (in un punto a caso), poi premete (sulla tastiera) in questo ordine i tasti SU, SU, GIU', GIU', SINISTRA, DESTRA, SINISTRA, DESTRA, B, A, INVIO. Dopodiché cliccate di nuovo a caso sulla pagina e vedete cosa accade, mentre scrollate o scrivete!
Inoltre, scorrendo la pagina in basso a sinistra dove c'è il pulsante per la selezione della lingua, cliccandoci su potrete selezionare 'English (Pirate)' per far parlare Facebook come i pirati!

Buon divertimento! :)

EN:

Easter Egg for Facebook, surprise your friends:

click on a Facebook pages (on a random point), then type on keyboard in this sequence UP UP DOWN DOWN LEFT RIGHT LEFT RIGHT B A Enter.
Then click againg on the page or scroll it and look!
Also, if you scroll to the bottom of the page on the left where it has language selection, you can click on that and then choose 'English (Pirate)' to change Facebook to pirate talk.

Enjoy yourself :)

Funziona? Che ne pensate di questo Easter Egg? 

giovedì 12 marzo 2009

Il giorno perfetto. 24 ore in linea con Wired

Il giorno perfetto. 24 ore in linea con Wired

Posted using ShareThis

martedì 10 marzo 2009

File hosts invisibile su Windows XP SP3 - come aprirlo e modificarlo

Dovendo fare una modifica al file hosts in una installazione di Windows Xp Pro SP3, mi sono imbattuto nell'impossibilità di visualizzare e/o modificare il file.
Il file hosts sembra non esserci (nemmeno con cerca file viene trovato), ma se proviamo a crearlo nella directory esatta un messaggio di errore ci avvisa che:
"File già esistente. Specificare un altro nome file" 

Infatti il file hosts c'è e si trova come di consuento nella directory

C:\WINDOWS\system32\drivers\etc\

ma l'SP3 setta i permessi al file in modo che sia invisibile anche all'amministratore, quindi il file sembra inesistente, ma in realtà è solo TROPPO ben nascosto.

Per poter accedere al file la procedura è semplice:

aprire il prompt dei comandi DOS (start -> esegui -> cmd)

e digitare

attrib -h -s -r %SYSTEMROOT%\System32\drivers\etc\hosts

che modifica rispettivamente i 3 attributi del file::
Hidden file attribute - Read-only file attribute - System file attribute

dopo aver eseguito il comando il file sarà visualizzabile nella sua directory standard e potrà essere letto e modificato!

venerdì 27 febbraio 2009

Errore di accesso al dominio con Windows XP SP3

Installando l'SP3 su Windows XP in molti ottengono questo errore al primo riavvio del sistema:

"Messaggio di accesso:
Impossibile accedere. Assicurarsi che il nome utente e il dominio siano corretti, quindi
digitare nuovamente la password. Digitare la password rispettando i caratteri maiuscoli o minuscoli"

Premendo il pulsante OK , Windows XP si avvia regolarmente mostrando la schermata classica di login.

La soluzione è semplice, ma non avendola trovata da nessuna parte, la spiego qui:

Con un click destro sull'icone Risorse del Computer si accede alle Proprietà del Sistema
Spostarsi nel label Nome del Computer e scegliere Id di rete
Seguire la procedura guidata scegliendo le opzioni relative alla vostra situazione, se non sapete cosa sia un dominio allora la vostra eventuale rete non ne fà uso.
Se avete una rete locale probabilmente saprete indicare anche il vostro gruppo di lavoro nell'ultima schermata della procedura.
Applicate le modifiche e riavviate il pc come richiesto...problema scomparso! :)

Per chi volesse approfondire l'argomento rete locale, workgroup e domini consiglio questo spiegone by Microsoft:  Windows XP Professional su un dominio