Lo script che presentiamo permette di realizzare una scritta scorrevole all'interno di una pagina tramite l'utilizzo dei frame in linea (iframe). Gli iframe infatti ci consentono di posizionare un frame, in un punto qualsiasi di un documento, come fosse un oggetto.
L'esempio si compone di 2 file:
- esempio.htm
- iframecontent.html
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto è necessario impostare i seguenti fogli di stile tra i tag <head> del documento principale:
<style>
#watermark {
position:absolute;
width:80px;
width:120px;
padding-left:0px;
}
</style>
Fatto questo bisogna inserire, sempre tra gli <head>, il tag che richiama l'iframe da visualizzare e che gli assegna determinate caratteristiche:
<iframe id="waterMark" scrolling="no" frameborder="0" src="iframecontent.html"></iframe>
Come è facile notare questa stringa di codice richiama l'iframe con il nome "iframecontent.html" e definisce due attributi fondamentali per una perfetta integrazione con il file esempio:
scrolling="no"
l'iframe non dovrà avere le barre di scorrimento
frameborder="0"
l'iframe non dovrà avere i bordi.
Impostato il foglio di stile e il tag iframe procediamo inserendo il codice dello script sempre nel documento principale tra i tag <head>:
<script type="text/javascript" language="javascript">
markW = 130;
markH = 60;
markX = 99;
markY = 99;
markRefresh = 50;
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style =
document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerheight;
function setVals() {
barW = 0;
barH = 0;
if (navDOM) {
if (document.height> innerheight) barW = 20;
if (document.width> innerwidth) barH = 20;
} else {
innerwidth = document.body.clientwidth;
innerheight = document.body.clientheight;
}
posX = ((innerwidth - markW)-barW) * (markX/100);
posY = ((innerheight - markH)-barH) * (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}
window.onload=markMe;
//-->
</script>
Vediamo adesso le parti che si possono personalizzare:
markW = 130;
indica la larghezza dell' iframe nel documento principale
markH = 60;
indica l'altezza dell'iframe nel documento principale
markX = 99;
indica la distanza dal margine destro del documento principale in cui si posizionerà l'iframe (in %).
markY = 99;
indica la distanza dal margine inferiore del documento principale in cui si posizionerà l'iframe (in %).
markRefresh = 50;
indica il tempo che impiegherà l'iframe a posizionarsi nel punto stabilito
(Per capire meglio provare a cambiare questo valore con 50000. Il tempo è espresso in millisecondi).
Il resto del codice non va modificato.
Passiamo adesso al documento che conterrà il testo scorrevole.
Prima di tutto bisogna impostare i fogli di stile tra i tag <head>:
<style type="text/css">
#mymessage {
width:120px;
height:2000px;
font-family:Arial;
font-size:8pt;
color:660000;
background-color:FFCCCC;
border-style:ridge;
border-color:FF0000;
padding-left:3px;
}
A {
color:FF0000;
}
A:Hover {
font-weight:bold;
color:FFFFFF;
background-color:FF0000;
}
</style>
width:120px;
indica la larghezza della finestra scorrevole
height:2000px;
indica l'altezza della finestra scorrevole
font-family:Arial;
indica il tipo di font
font-size:8pt;
indica la grandezza del font
color:660000;
indica il colore del testo espresso con valori esadecimali
background-color:FFCCCC;
indica il colore di fondo della finestra scorrevole espresso con valori esadecimali
border-color:FF0000;
indica il colore del bordo della finestra scorrevole espresso con valori esadecimali
padding-left:3px;
indica la distanza tra il bordo ed il testo
Per eventuali link all'interno del testo dobbiamo far riferimento a queste variabili:
A { color:FF0000;
indica il colore del link
font-weight:bold;
indica lo stile del link
color:FFFFFF;
indica il colore del link quando ci si passa sopra con il mouse
background-color:FF0000;
indica il colore dello sfondo del link onmouseover
Adesso inseriamo tra gli <head> lo script che gestirà lo scrolling del testo:
<script language="JavaScript1.2">
<!--
var i_scroll=0
var pause=100
var step=3
var scrollheight=600
function scrollwindow() {
window.scroll(0,i_scroll)
i_scroll+=step
if (i_scroll>= scrollheight) {i_scroll=0}
var timer= setTimeout("scrollwindow()",pause)
}
window.onload=scrollwindow
//-->
</script>
var pause=100
indica la velocità di scorrimento del testo
var scrollheight=600
terminato lo scroll, indica quanto tempo deve trascorrere prima che riparta lo scorrimento.
Terminate queste operazioni bisogna inserire tra i tag <body> la stringa di codice che conterrà il testo:
<div id="mymessage">Scrivi qui il testo</div>
Chiaramente il messaggio può essere personalizzato a piacere.
