If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

From IBM ajax tutorial:

When 0 is equal to 4
In the use case where multiple JavaScript functions use the same request object, checking for a ready state of 0 to ensure that the request object isn’t in use can still turn out to be problematic.

Since readyState == 4 indicates a completed request, you’ll often find request objects that are not being used with their ready state still set at 4 — the data from the server was used, but nothing has occurred since then to reset the ready state.

There is a function that resets a request object called abort(), but it’s not really intended for this use. If you have to use multiple functions, it might be better to create and use a request object for each function rather than to share the object across multiple functions.

Velocissimo e molto utile:

function insertAfter(parent, node, referenceNode)
{
parent.insertBefore(node, referenceNode.nextSibling);
}

Here are my 8 fav Firefox extensions (only the ones that i most use when making html, css, js, xml, xsl and web developing):

1. Javascript Debugger: Wanna debug complex javascripts, track life-values of variables? this is a must for everyone that work with JS.
2. View formatted source: easy as the name! You’ll get the source code readable (indented and formatted with color).
3. Web Developer: this is the most powerful extension for FF. Here tons of features
4. XPath Checker: very useful if you work with XML source file and wanna test some XPath string (for XSL developer). Even works with XHTML source file.
5. Aardvark: get information of blocks used into pagecode, remove block and view code of selected block. Very nice!
6. ScapBook: this is incredible powerful extension. It lets you save a page (it makes a perfect work since the code is processed and manipulated – no more css-images wrong in saved page) and quickly edit it. With this extension you can easily organize your saved pages (you can save entire page or part of it).
7. SearchStatus: it gives you the pagerank value of page you are browsing (google page rank and Alexa Rank).
8. Html validator: based on tidy, it shows any html errors and can TIDY your sourcecode. Very useful inline HTML manual.
9. NEW: FireBug is a new tool that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

All’interno delle numerossime estensioni per firefox ho trovato con molto piacere il debugger javascript che usavo su netscape. Ho installato la versione 0.9.84 (qui i download) e nel giro di un paio di minuti sono riuscito a risolvere un problema abbastanza semplice su un pezzo di codice. La cosa positiva, oltre al tempo ridottissimo per trovare e correggere l’errore, è che per trovare l’errore non ho dovuto modificare lo script iniziale (di solito creo un div “debug” in cui ci incollo tutte le informazioni dinamiche che mi servono per debuggare lo script). Con questo debugger mi è bastato settare un breakpoint, una watch su una variabile ed ecco dove stava il problema.

Lo strumento è molto potente e vi consiglio una lettura ad tutorial che spiega come fare i primi passi: Buona lettura e buon tutorial.

Ecco subito l’esempio iniziale che mostra l’intento del progetto:
Calendario – versione 01

L’intento di questo esperimento è capire se un’interfaccia non classica possa essere comprensibile senza troppe difficoltà. Il layout voglio che rimanga essenziale: senza spiegazioni, icone o altre cazzate.

Riporto in superficie il post per aggiornare il progetto con la versione 02, che presenta alcune cose carine (c’è un piccolo bug che impedisce in IE di spostare gli impegni all’interno del calendario, ma in firefox tutto è ok).

Calendario – versione 02 – salvataggio e caricamento dati cookies
Calendario – versione 2.01 – salvataggio e caricamento dati cookies – corretti alcune cazzate javascript

Nuove funzionalità:

• memorizza gli eventi all’interno dei cookies (fatto!!)
• permette l’inserimento/cancellazione di eventi (inserimento fatto, cancellazione me ne sono dimenticato)
• lo script funziona in Firefox e IE (grazie agli amici del newsgroup qui)

Da fare o pensare:

• da disegnare con l’html gli orari (08 — 22) (ovviamente anche i giorni – ora sono statici)
• stampare le 3 settimane successive (con la possibilita’ di spostare gli eventi)
• capire se questa pagina puo’ essere utilizzata come calendario funzionante (magari pensando di attivare un timer che ogni tot avvisa se nella prossima ora c’e’ un impegno)
• capire quanta roba si puo’ memorizzare nei cookies (ho già trovato documentazione interessante – posterò appena raccolgo le idee).
• creare una pattumiera in cui poter spostare gli impegni (con la possibilità di cancellare gli eventi dalla pattumiera

La potete vedere qua: Versione 01.

Questa versione prevede una navigazione senza click ottenuta tenendo il mouse fisso sopra un link per un paio di secondi. Un barra progressiva mostra quanto tempo dovete tenere il mouse sopra il link.

EDIT:
Ho aggiornato lo script in maniera tale che la barra di “caricamento” del link segua il mouse e che la navigazione senza click possa funzionare anche spostandosi tra i link con la tastiera.

Versione 02 (per firefox e IE).

nota: ci sono alcuni problemini in IE quando si usa il click del mouse..

Lo spunto questa volta viene da un geniale sito costruito in flash, che fa sperimentare all’utente un tipo di navigazione senza click: il sito è http://dontclick.it/.

Come si naviga senza premere il pulsante? Semplicemente tenendo il cursore sopra il link per alcuni istanti. In flash il risultato è carino, ma abbastanza poco intuitivo e difficile da memorizzare.

Come si potrebbe fare la stessa cosa con XHTML, CSS e JS (ovvero DHTML)?
Due piccole idee che sarebbe interessante esplorare:

1. Quando il mouse è sopra un link, compare un div che contiene una barra che si riempie e quando la barra si è riempita completamente, il link viene attivato (al posto di una barra si può fare un conto alla rovescia)
2. Quando il mouse è sopra un link compare un div con una forma particolare (potrebbe essere una L). Per attivare il link bisogna “percorrere” la L seguendo la freccia. Segue uno screenshot che senno’ non ci capisce una ceppa… (le zone rosse, sono le zone che il mouse non deve toccare affinchè il link venga attivato).

Un sito web diviso in rettangoli (2×2 per esempio). Ad ogni click la pagina scelta si apre nel rettangolo successivo in senso orario, creando così una storia della navigazione all’interno della stessa pagina.

Da sperimentare con 2, 4 o 6 rettangoli. Vantaggi? Svantaggi? Tecnologia?

EDIT: finalmente ho trovato il tempo di scrivere il codice per questa idea.
Eccone una preview.

Commenti? In effetti è stato un bel esercizio di javascript, ma non offre molto di più. Un’altra idea da ritirare fuori in un altro momento e magari da ripensare.

Il trucchetto è molto semplice:
create una serie di DIV che verranno al caricamento della pagina nascosti con una classe CSS (display:none;)

Associate poi ad una serie di link un paio di azioni javascript molto semplici:
1. nascondere tutti i div
2. visualizzare il div corrispondente al link

Eccovi realizzato un preload molto interessante.

Con questa stessa impostazione potete distribuire una serie di DIV contenti forms attivabili da link sottoforma di tabs (un po’ come succede in Mambo – mettere screenshot).

Ecco un piccolo esempio, come al solito semplificato per essere facilmente comprensibile e riutilizzabile: preview.

Esempio semplice
Esempio avanzato

EDIT:
Ho trovato in rete lo script che viene utilizzato da mambo per la navigazione con i tab:
TABPANE

Un piccolo effetto che sfrutta il dom di javascript con il quale potete far comparire dei nodi XHTML all’interno della pagina e una funzione javascript che permette di “illuminare” il nodo appena creato (questi effetti non sono certamente nuovi, ma li ho abbinati e resi il più semplice possibili a livello di codice per far capire ai meno esperti il funzionamento delle funzioni javascript).

Il risultato: preview.

Codice javascript utilizzato (vedere il codice della preview per maggiori informazioni):

1. var i = 0;
2. function scrivi(elemento, id, contenuto)
3. {
4. var nuovo = document.createElement(elemento);
5. nuovo.setAttribute('id', i);
6. nuovo.appendChild(document.createTextNode(contenuto));
7. document.getElementById(id).appendChild(nuovo);
8. fade(i);
9. i = i + 1;
10. }
11.  
12. var hex = 0;
13.  
14. function fade(i){
15. if(hex < 255)
16. {
17. hex = hex + 11;
18. document.getElementById(i).style.background = "rgb(255,"+hex+","+hex+")";
19. setTimeout("fade("+i+")", 30);
20. }
21. else hex=0;
22. }

Vi sembra una buona interfaccia?

Un piccolo bug: se cliccate velocemente la funzione fade() fa un pochino di confusione. Qualcuno sa come evitare tutto ciò?