Oggi ho trovato un interessante articolo su Javascript e sulla gestione degli eventi. Uno script che secondo l’autore è un po’ datato, ma che pare sia ancora attualissimo.

Non vengono usati prototype, jQuery o altri framework javascript. Solamente un paio di funzioni: addEvent, removeEvent.

function addEvent(obj, type, fn){
if (obj.attachEvent) {
obj[’e’ + type + fn] = fn;
obj[type + fn] = function(){
obj[’e’ + type + fn](window.event);
}
obj.attachEvent(’on’ + type, obj[type + fn]);
}
else
obj.addEventListener(type, fn, false);
}

function removeEvent(obj, type, fn){
if (obj.detachEvent) {
obj.detachEvent(’on’ + type, obj[type + fn]);
obj[type + fn] = null;
}
else
obj.removeEventListener(type, fn, false);
}

Utilizzare le due funzioni è veramente molto semplice:

addEvent(document.getElementById('my_elem'),'click',foo);


Con la chiamata di addEvent, l’elemento "my_elem" avrà un evento legato al click che chiamerà la funzione foo!

via GregWolejko

Sto rifacendo tutta una serie di tool che avevo già pronti, traducendoli da quella meraviglia di linguaggio che è coldfusion, a quella cosa destrutturata che è ASP (vbscript). Oggi mi sono imbattuto nel mio vecchio ImageViewer.

Già che c’ero gli ho dato pure una rinfrescata, in modo di aver un tool universale per ingrandire le immagini, in puro js + css, compatibile. Obiettivo quello di ottenere un image viewer, che funzionasse in pop over, e non in popup, ma che fosse compatibile anche con flash.

Ho trovato un ottimo javascript, basato su prototype, che faceva al caso mio. Con pochissime modifiche è diventato perfetto.
Lo script originale è di dynamicdrive. Sul loro sito trovate la demo di come funziona: è veramente facile. Copiate i 3 file (un javascript, un css e una immagine), volendo li adattate alle vostre esigenze e il gioco è fatto. Il javascript modificato lo trovate qui: thumbnailviewer.js. Per info sull’utilizzo preciso del js originale, fate riferimento al loro sito.

Per associare il plugin all’immagine è sufficiente linkare il thumbnail all’immagine originale grande, impostando come attributo REL uguale a "thumbnail". Esempio:

<a href="_file/newsImg/<%= menuSxNews("immagine") %>" rel="thumbnail"><img src="_file/newsImg/th_<%= menuSxNews("immagine") %>" class="thDx" /></a>

Io immagine lo tiro su da un ResultSet di DB.

Le mie modifiche a questo script si sono rese necessarie in quanto nel sito ho del FLASH e come tutti voi sicuramente sapete, nessuno DIV con all’interno semplice HTML, può sovrastare (z-index) un oggetto Flash. L’unico sistema è nascondere tutto il sito sotto – o la parte che infastidisce.

In un buon progetto di sito, soprattutto Table-less, è buona norma racchiudere tutto il sito in un macro layer, in modo da poter impostare proprietà CSS a tutto il sito, in modo facilissimo (css o js). Nel mio js aggiornato ho inserito questa feature. Nella creazione dell’oggetto originale thumbnailviewer, ora ci sono due nuove proprietà:

• mainDivName (id): il nome del nostro DIV contenitore di tutto il sito, o della parte che vogliamo nascondere. Se è vuoto (cioè "") enableFullMask è come fosse a FALSE
• enableFullMask (true | false): abilita la cancellazione del DIV chiamato sopra

Le modifiche effettuate sono state pochissime. Ho aggiunto le due proprietà nell’oggetto thumbnailviewer:

mainDivName: "main", //The main DIV
enableFullMask: true, //Enable main div "main" hiddening

Nella funzione init ho inserito la dichiarazione del nostro DIV da nascondere:

if (this.enableFullMask && (this.mainDivName!="")) {mainDiv = document.getElementById(this.mainDivName)}

Al caricamento dell’immagine nascondo il DIV dichiarato sopra:

if (this.enableFullMask && (this.mainDivName!="")){mainDiv.style.visibility="hidden"}

Nella funzione closeit ho riabilitato la visibilità del DIV nascosto e ho forzato (per lo stron*o di IE7) il rendering:

if (this.enableFullMask && (this.mainDivName!="")){
    mainDiv.style.visibility="visible"
    //enforse new rendering for IE7
    mainDiv.innerHTML += ""
}

Il bello è che funziona benissimo