Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Attendere per favore...

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

L'esperienza maturata con la gestione di Risorse.net, e la nuova attività che sta coinvolgendo i responsabili del sito (per chi non lo sapesse, Roberto e Alessandro Abbate sono i moderatori di it.comp.www.html) ci hanno dato la possibilità di capire quali fossero le esigenze degli utenti e quali le domande poste più frequentemente. Tra queste, molti chiedono come inserire una riga di testo del tipo "Attendere prego..." che sparisca una volta che tutta la pagina venga caricata. In questo modo, il documento verrebbe visualizzato nella sua interezza, senza essere scaricato oggetto per oggetto.
Questa settimana inseriamo proprio una demo del genere. La sintassi che la compone non è difficile da comprendere e nel peggiore dei casi, l'unica personalizzazione da applicare, sarebbe quella di modificare la frase "Attendere per favore...". Ecco comunque come si presenta il sorgente:

<script>
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************/

// Browsercheck
n=document.layers
ie=document.all

// Hides the layer onload
function hideIt(){
if(ie || n){
if(n) document.divLoadCont.visibility="hidden"
else divLoadCont.style.visibility="hidden"
}
}
</script>
<style>
#divLoadCont{position:absolute; width:100%; height:95%; top:0; left:0;
background-color:white; layer-background-color:white; font-family:arial,helvetica;
z-index:100}
TD{font-family:arial,helvetica}
</style>


Il codice appena visto, viene riportato nell'<HEAD> del documento. Oltre allo script per il funzionamento del tutto, è presente il Css con, tra le altre cose, lo stile del testo che indica l'attesa per il caricamento del documento. Passando al <BODY>, notiamo che è presente il richiamo al Javascript appena esaminato, oltre ad un'immagine che abbiamo inserito noi della redazione giusto per farti notare la scritta "Attendere per favore...". E' ovvio che, meno tempo ci metta la pagina a caricarsi, meno secondi rimarrà visualizzato il testo.

<body onload="hideIt()">

<script>
// We write the table and the div to hide the content out, so older browsers won't see it if(ie || n) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center" valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Attendere per favore....</h3></td></tr></table></div>')
</script>

<IMG SRC=http://www.risorse.net/dhtml/allegati/immagine.gif ALT="Quest'immagine è stata inserita solo per dimostrare il funzionamento dell'esempio"><BR>

</body>


All'interno del blocco di sorgente appena visto, possiamo notare dove è presente il richiamo alla frase "Attendere per favore...". Per modificare lo stile del testo, fare attenzione alla riga:
font-family:arial,helvetica; z-index:100
Presente nel Css esaminato nella prima parte di sintassi sorgente.

N.B.: Vuoi provare ad apparire in testa ai motori di ricerca? Risorse.net ti offre gratuitamente una guida sui principali search engine e validi consigli per apparire in buona posizione. Clicca www.risorse.net/motori
 

 
 
Home > dhtml > teoria > 2000 > dicembre > ...   © 1999-2024 Risorse.net, tutti i diritti riservati