Annidare i Layer

Ho pensato di parlare ora dei layer annidati perché entreranno nei vostri script molto spesso.

L'annidamento [nesting in inglese], si riferisce a un gruppo di layer inseriti dentro ad un elemento uniforme. In parole povere, i layer annidati sono "layer dentro altri layer".

Quando usate questa tecnica i layer "figlio" verranno posizionati relativamente ai layer "genitore" [d'ora in poi chiameremo child layers i, cosiddetti, figli e parent layers il genitore, cioé quello che contiene tutti gli altri]. Per di più, se si fa il clipping del parent layer il child layer apparirà come in una finestra o come in un plugin. Se il child layer è fuori dai limiti [i lati del taglio] del parent esso risulterà invisibile. Non ci sarà mutamento nell'attributo di visibilità, semplicemente sarà come fuori schermo:

Nesting Diagram

Trovo la tecnica del nesting utile quando si è davanti a posizionamenti complicati. Poiché tutte le allocazioni dei child layers sono relative a quelle del parent, sono permanentemente "bloccate" in posizione. Se in seguito vorrete spostare la collocazione del parent, non dovrete cambiare anche quella dei child, poiché essi si muoveranno insieme al genitore. Questo accade anche nelle animazioni: tutti i child si muoveranno insieme al parent.

Il codice JavaScript per i layer annidati è alquanto differente nei due browser. Ammetto che è abbastanza difficile fare degli script di layer annidati che si comportino nella stessa maniera in Netscape e in IE, e questo è il motivo per cui non troverete molto spesso layer annidati in internet. Comunque ho sviluppato alcune tecniche davvero speciali per superare anche questo scoglio, converrete poi con me che l'annidamento dei laywer è utilissimo, talmente utile da non poterlo più abbandonare.

Gli Stylesheet e il Nesting:

Per annidare i layer tutto quello che dovete fare è inserire le child DIV dentro una DIV:

<DIV ID="parent1Div">

        <DIV ID="child1Div"></DIV>
        
        <DIV ID="child2Div"></DIV>
        
</DIV>
Evidentemente ho lasciato da parte gli styles per questa DIV. Questo perché Netscape non permette l'annidamento in presenza di stili definiti con il metodo interno, che è quello che io ho utilizzato per tutto il tutorial. In questo caso, Netscape pare che permetta solo un ordine di layer annidati, se ne usate di più ignorerà completamente tutti gli stili dei layer a venire. Così d'ora in poi useremo SEMPRE  la tag STYLE. E tutti gli esempi da questo punto in avanti verranno adeguati.

Il CSS è in realtà uguale, sta solo in una sua tag separata dalla DIV:

<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:100; top:80; width:230; height:120; clip:rect(0,230,120,0); background-color:#C0C0C0; layer-background-color:#C0C0C0;}
#child1Div {position:absolute; left:-20; top:40; width:70; height:70; clip:rect(0,70,70,0); background-color:#FF0000; layer-background-color:#FF0000;}
#child2Div {position:absolute; left:180; top:70; width:70; height:70; clip:rect(0,70,70,0); background-color:#0000FF; layer-background-color:#0000FF;}
-->
</STYLE>

<DIV ID="parent1Div">

        <DIV ID="child1Div"></DIV>
        
        <DIV ID="child2Div"></DIV>
        
</DIV>
Cliccate qua per vedere questo esempio.

Ho anche incluso le regioni di clip per definire l'area. Nella maggior parte dei casi dove venga utilizzato il nesting dovete definire i valori di clip e il colore del layer.

JavaScript e il Nesting:

Il Nesting è il luogo in cui  il JavaScript di Netscape e quello di  Internet Explorer vanno in direzioni completamente opposte.  In IE, non c'è alcuna differenza se un layer è annidato o no, accedete alle proprietà del layer nello stesso modo di prima:

childLayer.style.propertyName

Invece in Netscape quando volete accedere alle proprietà di un layer annidato (child layer) dovete dichiararlo relativamente al suo parent layer:

document.parentLayer.document.childLayer.propertyName
Il "document" aggiunto al nome del layer è dovuto al fatto che Netscape tratta i layer come documenti separati - a  il child layer fa parte del documento del suo parent layer.

E' possibile annidare layer per un numero illimitato di volte - proprio come fate con le semplici DIV più volte in un documento. Poniamo di cambiare l'esempio in modo da mettere child2Div dentro child1Div

<DIV ID="parent1Div">

        <DIV ID="child1Div">
        
        <DIV ID="child2Div"></DIV>
        
        </DIV>
        
</DIV>

In questo caso l'accesso alle proprietà di child2Div viene fatto attraverso la seguente stringa:

document.parent1Div.document.child1Div.document.child2Div.propertyName

Questo concetto deve essere accorpato alla nostra variabile puntatore. Questo è il modo in cui definirei la variabile puntatore per il set originale dell'esempio:

function init() {
        if (ns4) {
                parent1 = document.parent1Div
                child1 = document.parent1Div.document.child1Div
                child2 = document.parent1Div.document.child2Div
        }
        if (ie4) {
                parent1 = parent1Div.style
                child1 = child1Div.style
                child2 = child2Div.style
        }
}
E adesso via, alla risoluzione di altri problemi...

Le Proprietà CSS Rivisitate:

Sfortunatamente Internet Explorer ha qualche tecnicismo che crea un dilemma che mi ha confuso l'idee per un po'. Quando definite gli stili per i vostri layer usando la tag STYLE, IE non vi permette di leggere alcuna proprietà inizialmente. Così in IE se doveste controllare attraverso una finestra di dialogo la dislocazione di parent1 usando la

alert(parent1.left)
Non ricevereste alcun valore. E questo accade per tutte le propietà dei CSS (left, top, width, height, visibility etc.).

Cliccate qui per vedere un esempio che controlli le propietà di un layer. Con Netscape tutto gira bene, in IE zero assoluto.

Non mi è ancora ben chiaro il motivo per cui la Microsoft abbia optato per un simile comportamento. Mi sembra abbastanza stupido. Accade solamente quando usate la tag di STYLE e ha solo effetto sui valori iniziali delle proprietà. Una volta che abbiate preso a cambiare le proprietà in JavaScript potete accedere senza problema ai dati.

Come questo influenzi la nostra situazione è presto detto. Dobbiamo trovare un modo per verificare la collocazione del layer in modo differente per IE4. Fortunamente IE include alcune proprietà non standard per i CSS:

Queste proprietà aggiuntive non sono interessate dal problema della tag STYLE, coì possiamo usarle per conoscere la dislocazione del layer. Qui c'è la nuova codifica che aggiunge xpos e ypos alle variabili puntatore:
function init() {
        if (ns4) {
                parent1 = document.parent1Div
                parent1.xpos = parent1.left
                parent1.ypos = parent1.top
                child1 = document.parent1Div.document.child1Div
                child1.xpos = child1.left
                child1.ypos = child1.top
                child2 = document.parent1Div.document.child2Div
                child2.xpos = child2.left
                child2.ypos = child2.top
        }
        if (ie4) {
                parent1 = parent1Div.style
                parent1.xpos = parent1.offsetX
                parent1.ypos = parent1.offsetY
                child1 = child1Div.style
                child1.xpos = child1.offsetX
                child1.ypos = child1.offsetY
                child2 = child2Div.style
                child2.xpos = child2.offsetX
                child2.ypos = child2.offsetY
        }
}
Cliccate qui  per vedere questo esempio.

Una volta scritto potete cambiare le collocazioni dei layer come in precedenza.

Cliccate qui per vedere un esempio che usi la funzione spostamento del parent layer e dei child layers.

Visibilità e Nesting:

Di nuovo, se usate la tag di STYLE per definire i vostri layer non sarete in grado di ottenere il valore visibility da IE4. Ma per mia esperienza, ottenere l'attributo di visibilità è raramente necessario. Usualmente saprete già se un layer sia visibile o no. Ricordatevi che ha solo effetto sull'attributo iniziale - se lo cambiate almeno una volta non avrete problemi ad ottenerlo.

Mostrare e nascondere i layer annidati non è molto differente, dal resto. Una volta definite le variabili puntatore potete usare le funzioni Show/Hide che havete visto nella lezione Mostrare e Nascondere .

Una cosa merita una puntualizzazione. Se non definite la visibilità per i child layers, questa viene "ereditata" - assumerà il valore del parent layer. In questo caso quando mostrate o nascondete il parent layer, farete la stessa cosa con i child layers. MA... con Netscape se definite o la visibilità per i layer figli, o iniziate a cambiare la  visibilità su JavaScript perdete l'abilità a nascondere o mostrare tutti i child layers contemporaneamente. In questo caso se il parent layer  viene nascosto, qualsiasi layer figlio sia visibile persisterà nella sua visibilità.

Per evitare questo problema, dovete ritornare all'ereditarietà dell'attributo. Così, invece di usare la funzione showObj(), dovrete manualmente porre come ereditaria:

mychild.visibility = "inherit"

Rimettere a "inherit" significa che se il genitore è visibile, il figlio verrà mostrato, viceversa un genitore nascosto, avrà figli anch'essi nascosti.
Home Prossima Lezione: Keystroke Events
copyright 1998 Dan Steinman