Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Testo scrorrevole nella pagina

Link copiato negli appunti

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;
;
;
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 {
;
;
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>

;

indica la larghezza della finestra scorrevole

;

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.


Ti consigliamo anche