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

Messaggio di attesa

Link copiato negli appunti

Lo script che presentiamo sarà utile nei casi in cui il caricamento della pagina sia relativamente lento; nell'attesa potremo mostrare ai visitatori un qualsiasi messaggio: un semplice avviso, una news, un annuncio commerciale. Il testo è all'interno di una tabella (che può contenere anche codice html) e sparirà non appena sarà visibile tutta la pagina.

L'esempio si compone di 1 file:

  • esempio.htm

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.

Impostiamo tra i tag <head>, come prima cosa, il foglio di stile necessario allo script:

<style type="text/css">
#cache { position:absolute; top:200px; z-index:10; visibility:hidden;}
</style>

Adesso, sempre tra i tag <head>, inseriamo il resto del codice:

<div id="cache">
<table width=400 bgcolor=#000000 border="0" style="border-width:1; border-
color:ff0000; border-style:dashed;" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle>
<table width=100% bgcolor=#ffff00 border="0" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle><font face="verdana" size=3
color=#000000><br /><strong>attendere...caricamento in corso</strong></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache}
else if (dom) {cach = document.getElementById("cache").style}
else if (iex) {cach = cache.style}
largeur = screen.width;
cach.left = Math.round((largeur/2)-250);
cach.visibility = "visible";
function cacheOff()
{
cach.visibility = "hidden";
}
</script>

Vediamo come personalizzare la tabella contenente il messaggio. Riguardo al foglio di stile il parametro che più ci interessa è:

top:200px;

indica la distanza, dal margine superiore della pagina, in cui verrà posizionata la tabella

<table width=400 bgcolor=#000000 border="0" style="border-width:1; border-color:ff0000; border-style:dashed;" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle>
<table width=100% bgcolor=#ffff00 border="0" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle><font face="verdana" size=3 color=#000000><br /><strong>attendere...caricamento in corso</strong></font>
</td>
</tr>
</table>
</td>
</tr>
</table>

è una normale tabella in html e contiene il messaggio da visualizzare. Possiamo impostarla a piacimento.

cach.left = Math.round((largeur/2)-250);

è la stringa che posiziona la tabella a centro schermo. un valore più alto (ad esempio -600) sposterà la tabella a sinistra e viceversa.

Ultima operazione fondamentale è inserire un evento onLoad nel body che permetterà alla tabella di sparire non appena la pagina sarà caricata:

onLoad="cacheOff()">

e quindi il nostro <body> sarà strutturato così:

<body onLoad="cacheOff()">

Altre modifiche non sono richieste.


Ti consigliamo anche