Frame in linea e scrollbar grafiche con DHTML
Massimiliano Valente – mvalente@tecnet.it
HTML dinamico rende possibile la creazione di frame svincolati dai limiti dell'HTML
classico e posizionabili in qualsiasi punto del documento. Una grafica di notevole impatto
e un'agevole personalizzazione, fanno di questa demo un ottimo strumento per migliorare
l'aspetto e facilitare la navigazione del proprio sito Web
Esigenze prettamente grafiche o di organizzazione dei dati, spingono i disegnatori di
pagine Web a fare un massiccio uso di frame. L'utilitα maggiore che questi strumenti,
introdotti nella versione 3.2 di HTML, apportano alla gestione di documenti ipertestuali,
Φ la possibilitα di trattare parti della pagina come documenti indipendenti dal resto.
In questo modo Φ possibile modificare la struttura di ogni singolo frame, senza che ci≥
influenzi il resto del documento.
Le raccomandazioni ufficiali di HTML 4.0 hanno ½standardizzato╗ un tag specifico di
Internet Explorer, che permette di inserire frame in qualsiasi punto della pagina e non
necessariamente nella parte superiore o laterale. Si tratta dei cosiddetti ½frame in
linea╗. Eccettuata tale variante, questi tag si comportano come i frame ortodossi,
caricando all'interno della loro area di gestione dei documenti html esterni.
I principali limiti dei frame il linea sono l'incompatibilitα con il browser Netscape e,
dal lato estetico, il richiamo dello scroller laterale di default dei browser.
Questo articolo mostra come sia possibile creare una finestra indipendente all'interno di
un documento, sfruttando le potenzialitα del DOM (Document Object Model) di HTML
dinamico, eliminando l'incompatibilitα con Netscape e garantendo un'aspetto grafico
accattivante.
In buona sostanza, questo esempio sfrutta le potenzialitα di HTML dinamico ed i frame in
linea, e laddove si riscontrano incompatibilitα con Netscape, queste vengono risolte con
l'uso di codice JavaScript.
Prima di analizzare il codice di questo esempio Φ bene elencare le immagini a corredo
grafico, fondamentali per il corretto funzionamento della demo. Tali immagini servono per
lo pi∙ alla definizione grafica dello scroller laterale destro.
Si tratta di immagini in formato grafico .GIF, ma possono sostituirsi con altri formati.
Come accennato in precedenza questa demo permette di creare una grafica personalizzata e,
a differenza dei normali frame in linea, senza l'obbligo della grigia scrollbar di default
dei browser.
Oltre ai file grafici Φ necessario creare due documenti HTML, volti rispettivamente a
creare il documento principale e quello richiamato all'interno della finestra.
File principale esempio01.htm
Questo file contiene la gran parte di codice javascript necessario al corretto
funzionamento di questa demo.
Le primissime righe di codice stabiliscono quali oggetti siano accessibili da questo
script. Per le ormai note differenze di gestione del DOM di Netscape e Internet Explorer,
quest'ultimo accede a tutti gli elementi del documento, mentre il primo accede soltanto ai
layer:
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
La porzione successiva di codice compresa tra i tag <HEAD> gestisce le opzioni
relative alla finestra. Modificando i valori relativi, si agisce direttamente sulle misure
della stessa: larghezza, altezza, distanza dai margini della pagina, dimensioni dello
scroller ecc.
Questa parte di codice Φ facilmente modificabile senza necessitα di stravolgere o
rielaborare la struttura complessiva dello script. Quindi Φ su questi valori che si
agisce per adattare la finestra alle proprie esigenze.
Vediamo, nel particolare, i singoli casi:
scrollLeft = 50
Distanza della finestra in pixel dal margine sinistro del documento HTML. In altre
parole questo valore regola il posizionamento da sinistra della finestra.
scrollTop = 50
Distanza della finestra dal margine superiore della pagina
scrollWidth = 300
scrollHeight = 280
Rispettivamente, larghezza e altezza in pixel della finestra all'interno del documento.
scrollBarWidth = 19
Larghezza in pixel della scrollbar laterale. Aumentando questo valore lo spessore della
barra laterale aumenta.
scrollBoxHeight = 23
Distanza, dal margine inferiore, del cursore rispetto ai margini dello scroller
scrollArrowHeight = 15
Distanza dal basso in pixel delle frecce posta al vertice della scrollbar.
scrollMarginLeft = 10
scrollMarginRight = 10
scrollMarginTop = 10
scrollMarginBottom = 10
Rispettivamente e per valori espressi in pixel: distanza dal margine sinistro del testo
e delle immagini all'interno della finestra (MarginLeft); distanza dal margine destro
(MarginRight), da quello superiore (MarginTop) e da quello inferiore (MarginBottom).
scrollBorder = 2
Bordo della scrollbar in pixel. Se questa opzione si vuole omettere Φ sufficiente
impostare il valore a zero.
scrollBorderColor = "#F47A00"
Colore espresso in valori esadecimali del bordo della scrollbar.
scrollBarColor = "#FFD1BB"
Colore della fascia interna alla scrollbar. In altre parole dove scorre il cursore.
scrollBoxColor = "none"
Colore di sfondo del cursore. In questo caso assegnando il valore (none) Φ
trasparente.
scrollArrowColor = "#F47A00"
Colore di sfondo della freccia superiore e inferiore.
scrollFirstPage = "testo.html"
Documento HTML esterno da richiamare all'interno della finestra. ╚ possibile
richiamare anche link a risorse esterne (es. scrollFirstPage = http://inews.tecnet.it)
Il codice successivo riguarda la definizione di funzioni Javascript per il corretto
funzionamento della demo: function init, function mouseDown, function mouseMove, function
mouseUp, function scrollMouseDown, function scrollMouseMove, function scrollArrowSlide,
function loadSource, function scrollResize, function dynLayer, function dynLayerMoveBy,
function dynLayerMoveTo, function dynLayerShow e function dynLayerHide.
Le funzioni Javascript sono raccolte di istruzioni richiamate attraverso il nome della
funzione e un elenco di argomenti. Solitamente le funzioni appaiono tra i tag <HEAD>
di un documento ipertestuale per garantire che vengano lette e interpretate prima che
l'utente possa interagire con esse. Quando il browser legge lo script carica e interpreta
le funzioni nell'ordine in cui esse sono presenti nel documento.
All'interno del tag <BODY> va inserito il gestore di eventi onLoad che richiama la
funzione Init:
<BODY BGCOLOR="#FFFFFF" onLoad="init()"
background="sfondo.jpg">
Il codice seguente compreso tra i tag <SCRIPT LANGUAGE="JavaScript">
richiama all'interno del documento le funzioni impostate in precedenza e relative alla
formattazione della finestra e dello scroller.
La marcatura <DIV> contiene gli attributi che impostano l'area in cui viene
visualizzata la finestra, mentre l'attributo ID assegna i nomi delle funzioni impostate in
precedenza:
<DIV ID="scrollBoxDiv"><IMG
SRC="scrollbox.gif" WIDTH=19 HEIGHT=23 ALT="Scroll Me"
BORDER=0></DIV>
Cursore destinato a scorrere lungo la scrollbar.
<DIV ID="scrollArrowUpDiv"><IMG
SRC="scrollarrowup.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>
Freccia rivolta verso l'alto che quando cliccata fa scorrere la finestra.
<DIV ID="scrollArrowDownDiv"><IMG
SRC="scrollarrowdown.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>
Freccia rivolta verso il basso.
L'analisi dello script che chiude il documento suggerisce una riflessione su come Netscape
ed Internet Explorer gestiscono e supportano HTML dinamico:
<SCRIPT LANGUAGE="JavaScript">
if (n) document.writeln('<LAYER NAME="scrollTextWindow"
SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+'
WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+'
HEIGHT='+(scrollHeight-2*scrollBorder)+'
CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'"
BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
Netscape implementa i layer, quale tecnologia di posizionamento dinamico proprietaria e incompatibile con altri browser. I layer vengono posizionati attraverso un sistema di coordinate riferite all'angolo sinistro in alto della pagina.
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME
NAME="scrollTextFrame" SRC="'+scrollFirstPage+'"
WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+'
HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0
FRAMEBORDER="No" SCROLLING="no"></IFRAME></DIV>')
</SCRIPT>
Internet Explorer, al contrario di Netscape, riconosce e adotta i Frame in linea
(IFRAME) per gestire la finestra, evitando l'uso di layer o fogli di stile.
File esterno testo.html
Questo file viene richiamato dalla riga di codice presente nel file esempio01.htm:
scrollFirstPage = "testo.html"
PerchΘ questo documento ipertestuale si adatti all'esempio preso in considerazione in
questo articolo Φ necessario adottare alcuni accorgimenti.
Innanzitutto, all'interno del tag <HEAD>, va inserito il seguente script:
<SCRIPT LANGUAGE="JavaScript">
document.writeln('<STYLE TYPE="text/css">')
document.writeln('#scrollTextDiv {position:absolute; left:'+parent.scrollMarginLeft+';
top:'+parent.scrollMarginTop+';
width:'+(parent.scrollWidth-parent.scrollBarWidth-2*parent.scrollBorder-parent.scrollMarginLeft-parent.scrollMarginRight)+';}')
document.writeln('</STYLE>')
</SCRIPT>
che richiama le funzioni e gli stili impostati all'interno del file principale
esempio01.htm.
Writeln() Φ un metodo solitamente utilizzato per scrivere codice HTML all'interno di una
finestra. La differenza tra questo metodo e Write() Φ che quest'ultimo non inserisce un
ritorno a capo dopo il testo. Per gestori di eventi Φ necessario, comunque, utilizzare il
metodo writeln().
Il codice compreso tra i tag <STYLE> gestisce la grandezza e il tipo di carattere
usato all'interno della pagina.
All'interno del tag <BODY> va richiamato il gestore di eventi onLoad che permette
allo script di attivare azioni non appena il documento viene visualizzato dal browser:
<BODY onLoad="parent.scrollResize()" BGCOLOR="#FFB08A">
Nel caso specifico il gestore onLoad richiama la funzione scrollResize() contenuta nel
file principale precedentemente analizzato.
Immagini e testo da visualizzare nel frame vanno inserite tra i tag <DIV>:
<DIV ID="scrollTextDiv">
</DIV>
Un altro approccio
╚ possibile evitare l'uso di immagini GIF ottenendo un risultato molto simile al
precedente.
Il codice per ottenere tale risultato ha struttura quasi del tutto identica a quello giα
analizzato, con l'unica eccezione di non richiamare le tre immagini. Il risultato estetico
che si ottiene Φ molto ordinato e per certi versi preferibile al precedente.
Si evita in questa sede di ripetere quanto giα esposto in riferimento alle
caratteristiche tecniche dell'esempio, e si rimanda al CD-ROM allegato alla rivista per
testarne i vantaggi e le peculiaritα.