chalda.it
28nov/121

Immagine di loading… senza immagine: spin.js

Un bel modo per generare una immagine di caricamento generata automaticamente da javascript: spin.js.

Ecco l'elenco delle caratterisitche:

  • Nessuna immagine o CSS da aggiungere
  • Nessuna dipendeza (jQuery è supportato ma non è richiesto)
  • Facile da configuare
  • Funziona con tutti  i maggiori browser, anche il pessimo IE6

 

17dic/096

Controllo validazione email con javascript anche con i nuovi domini accentati

validazione.email
Sempre la solita solfa!

Come fare a validare un indirizzo email con javascript?

La risposta quasi sempre è una questa semplice funzioncina:

function validEmail(email){
  return  /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+.([a-zA-Z])+([a-zA-Z])+/.test(email);
}

Bene... questa è sbagliata!!! Non riesce a validare alcuni indirizzi email! non ci credete?

17dic/0931

Come eseguire uno script all’uscita della pagina

onunload

Uscire da questa pagina?
Premere OK per continuare o Annulla per rimanere nella pagina corrente.

Quante volte abbiamo visto questo messaggio mentre cercavamo di uscire da una pagina?
Non so voi, ma io molte :)

In questo articolo parleremo di come aggiungere e personalizzare questo messaggio, rendendolo il meno intrusivo possibile.

Innanzi tutto, a cosa serve?

7ott/099

Come accedere ad elementi in un iframe con jQuery

Per accedere ad elementi interni di un iframecon jquery è semplicissimo.
Supponiamo di avere un iframe di id="iframe"

<iframe id="iframe" ...></iframe>

E che l'iframe contenga un div di id="div"

<div id="div">Prova</div>

Per accedere all'elemento basta selezionare l'iframe, prenderne il contenuto e cercare l'elemento voluto:

var $div = $('#iframe').contents().find('#div'));

Con questo esempio potete accedere a qualsiasi elemento dell'iframe semplicemente sostituendo #div con i selettori che vorrete :)

30set/092

Commenti javascript per la validazione xhtml

Quante volte vi è capitato di dover inserire codice javascript direttamente sulla pagina ma questo ha portato alla non validazione della stessa?

Bene, questo succede perché il validatore w3c non riesce a gestire il codice html presente all'interno del javascript e lo interpreta come codice html normale.

Per ovviare a questo problema è sufficiente aggiungere dei commenti prima e dopo lo script:

<script type="text/javascript">
/* <![CDATA[ */
// Il contenuto javascript va qui
/* ]]> */
</script>

E il gioco è fatto!
Ora tutto il validatore considera tutto il javascript come commento.

28lug/090

Eseguire un evento (click, hover, focus) con jQuery

Ogni tanto succede che abbiamo bisogno di eseguire una funzione associata ad un click senza che effettivamente il click venga dato.
Un esempio: clicca pippo!

<a href="#" id="pippo" onclick="alert('Hai cliccato su pippo!')" >clicca pippo!</a >

Ora proviamo invece a cliccare su Pluto.

<a href="#" id="pluto" onclick="jQuery('#pippo').trigger('click')">Pluto</a>

Come vedete cliccando su Pluto in questo modo viene eseguito il click di Pippo.

Ovviamente questa cosa si può fare con tutti gli eventi, tra i quali hover, focus, doubleclick, etc.
A voi il divertimento!

20lug/093

Javascript: Rimuovere un elemento da un array

Ed eccoci alla classica domanda che inevitabilmente tutti ci poniamo!
Come si fa a togliere un elemento da un array in javascript?
Beh, per toglierlo dall'inizio o dalla fine si possono usare i semplici .pop() (per togliere l'ultimo) e .shift() (per togliere il primo).
Ma come fare per togliere un elemento all'interno?

Purtroppo non esiste una funzione di sistema che lo faccia, quindi dovremmo crearcela noi :)

Innanzi tutto vediamo come togliere un elemento da un array. Clicca qui per eseguire il codice sottostante.

var ar = ['a','b','c','d','e'];     // Il nostro array
alert('Il nostro array iniziale:' + new String(ar));
var el = ar.splice(3,1);  // Togliamo l'elemento alla posizione 3
alert('Il nostro elemento rimosso:  '+ el);
alert('Il nostro array finale: ' + new String(ar) );

Ora sappiamo come togliere un elemento e sostituirlo, quindi creiamo una funzione prototype all'oggetto Array che tolga l'elemento alla posizione pos e lo restiuisca:

Array.prototype.removePos = function(pos) {
   var el = this.splice(3,pos);
return el }; // Esempio di utilizzo:
var ar = ['a','b','c','d','e']; var el = ar.removePos(3); // Ora el conterrà 'e' e ar sarà ['a','b','c','e']

Se invece vogliamo ricercare un elemento el e toglierlo la funzione sarà la seguente:

 Array.prototype.removeEl = function(el) {
   this.splice(array.indexOf(el), 1);
};

// Esempio di utilizzo:
var ar = ['a','b','c','d','e'];
ar.removeEl('c'); // Ora ar sarà ['a','b','d','e']

Tutto qui :)