Mostrare e Nascondere

Vi sarete domandati: "Perché Netscape indica la visibilità con 'show'?"

Bene, la risposta è che gli attributi CSS si basano sulla tag di tipo LAYER di loro proprietà. In ogni modo, anche Netscape sta ora via via sottomettendo il suo LAYER al CSS-P raccomandato dal W3C. Così lo "show" e il corrispondente "hide" sarebbero un retaggio della prima versione dei layer. Credo che questo sia il solo difetto evidente della interpretazione del CSS-P di Netscape.

Fino a quando non ci sarà uno standard unificato dovrete imparare a costruire codici differenti per nascondere un elemento.

Per Netscape

Per mostrare un elemento con Netscape dovete usare:

document.divName.visibility = "show"

e per nasconderlo:

document.divName.visibility = "hide"

Per Internet Explorer

Per mostrare un elemento con Internet Explorer dovete usare:

divName.style.visibility = "visible"

e per nasconderlo:

divName.style.visibility = "hidden"

Funzioni Generiche di Show e Hide

Anziché riscrivere sempre lo stesso codice alla nausea, per mostrare e nascondere gli elementi, potete usare le seguenti funzioni:

function showObject(obj) {
        if (ns4) obj.visibility = "show"
        else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
        if (ns4) obj.visibility = "hide"
        else if (ie4) obj.visibility = "hidden"
}

Queste funzioni devono essere usate con le pointer variables - osservate il codice nel seguente esempio.

Quando vorrete cambiare la visibilità di un elemento vi basterà inserire:

showObject(objectName)

o

hideObject(objectName)
Dove objectName è la vostra pointer variable per una particolare DIV.

Cliccate qui per vedere l'esempio che usa queste funzioni.

Funzioni Mostra/Nascondi Senza Pointer Variables

Ho scoperto che le funzioni summenzionate non sono sempre necessarie e talvolta anche ingombranti se avete molti layer che necessitano solamente di essere nascosti e mostrati. Ho preferito parlare subito della tecnica della pointer variable perché rappresenta l'idea generale con la quale costruire i potenti JavaScript delle future lezioni. Ma se non necessitate di maggiori funzionalità, potrete semplificare il codice:

// Funzioni Mostra/Nascondi per i layer/oggetti senza puntatori
function show(id) {
        if (ns4) document.layers[id].visibility = "show"
        else if (ie4) document.all[id].style.visibility = "visible"
}

function hide(id) {
        if (ns4) document.layers[id].visibility = "hide"
        else if (ie4) document.all[id].style.visibility = "hidden"
}
L'uso di queste è simile, ma differisce per un particolare: ora deve essere usato il nome esatto del layer e deve essere tra virgolette:
show("divID")

oppure

hide("divID")

Dove divID è la ID della DIV che volete mostrare o nascondere.

Cliccate qui  per vedere un esempio che utilizza queste funzioni.

Home Prossima Lezione: Spostare
copyright 1998 Dan Steinman