Il tag <MARQUEE> crossbrowser

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Come molti sanno, le implementazioni di Html 4, sono state recepite dai due browser, Netscape e Explorer, in modo molto differente; ciò, tra le altre cose, ha comportato la nascita di tag proprietari come <marquee> e <blink>.
Questa non è la sede per approfondire le differenze di tag tra i due browser, ma è l'ideale per mostrare come l'Html dinamico possa creare e gestire testi scorrevoli in modalità crossbrowser, ossia compatibili con i due più famosi navigatori.
La demo che andremo a descrivere questa settimana, crea lo stesso effetto del tag <marquee> (notoriamente compatibile solo con Explorer) anche con l'ex browser più diffuso al mondo.
Per avviare l'animazione in modo corretto, all'interno dei tag <head></head> va inserito il codice seguente:

<script language="JavaScript1.2">
<!--

// Specifica la larghezza (in pixel) dello spazio del marquee
var marqueewidth=330
// Specifica l'altezza (in pixel) del marquee
var marqueeheight=20
// Specifica la velocità del marquee (più alto = più veloce)
var speed=6
// Specifica il contenuto del marquee
var marqueecontents='<font
face="Arial"><strong><big>Sezione Dynamic Html. Tutto su Html dinamico: demo, mailing list e teoria.</big></strong></font>'

Questa porzione di codice è di vitale importanza per permettere la personalizzazione della demo. Quindi, se si volesse adattare lo script alle proprie eseigenze, si faccia attenzione ai commenti inseriti in italiano e preceduti dai segni //.

Continuando nella visione del Javascript, ci si imbatte nelle seguenti righe:

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueeconte nts+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2

// -->
</script>

<ilayer width=&{marqueewidth}; height=&{marqueeheight};
name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>
Queste istruzioni, sono fondamentali per il movimento del testo e, per questo non devono essere modificate in nessuna parte.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/1999/maggio/2.asp?print=ok