Tutorial Avanzati - Visualizzare un messaggio di loading nel tuo sito Xoops!

Visualizzare un messaggio di loading nel tuo sito Xoops!

Inviato da: slyss Data: 14/1/2007 10:55 Visualizzazioni: 1339

Autore:slyss

Sommario:Come poter fare per visualizzare un messaggio di loading, o una gif animata, al caricamento delle pagine del tuo sito Xoops.

Loading Page: come fare...

Profilo autore: slyss

Profilo

Ciao a tutti

scrivo questo tutorial per insegnarvi come poter inserire un messaggio di loading, o una bella gif animata, al momento di caricamento delle vostre pagine Xoops.

Tipo:

Quando la pagina sta caricando apparirà il messaggio e sparirà appena la pagina sarà stata caricata integralmente...

INIZIAMO!!!

Aprite il vostro theme.html e subito dopo il tag < body > inserite:



<!-- Load indicatior -->

<div id="waitDiv" style="position:absolute; right:0%; top:50%;

visibility:hidden; text-align:center;">

<{include file="vostro_tema_in_uso/theme_loading.html"}>

 <script type='text/javascript'>

   toggle_visibility('waitDiv', 1);

   </script>

</div>

<!-- End Load Indicator -->

ora scendete e subito prima del tag < /body > inserite:



<!-- Page Loaded Indicator Stop -->

<script type='text/javascript'>

   toggle_visibility('waitDiv', 0);

   </script>

<!-- End -->

chiudete e salvate!

Ora createvi un nuovo file chiamato theme_loading.html ed inseritelo nella cartella del vostro tema e inseriteci questo codice:



<table border="0" align="center" cellpadding="0" cellspacing="0">

 <tr>

   <td align="right"><img src="<strong><span style="color: #FF0000;"><{$xoops_imageurl}>images/animata.gif" /></span></strong></td>

   <td align="left"><b><font color="#9900CC" face="Verdana" size="6"><span style="background-color: #000000">...Loading page...</span></b></font><br />

     <br />

     <big><b><font color="#9900CC" face="Verdana" size="5"><span style="background-color: #000000">...Please Wait...</b></span></big></font></td>

 </tr>

</table>

modificate a dovere l'url delle vostra gif animata preferita...

Ora createvi la vostra gif personalizzata e divertitevi!!!

ciao sly

Autore

Albero

nocs90

Inviato: 14/1/2007 20:32 Aggiornato: 14/1/2007 20:32

Simpatizzante

Iscritto: 19/11/2006

Da: Abano Terme (PD)

Inviati: 111

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

Ho fatto tutto come hai detto , ma non funziona.

slyss

Inviato: 14/1/2007 21:52 Aggiornato: 14/1/2007 21:52

Staff

Iscritto: 21/8/2004

Da: Italy

Inviati: 3469

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

prova ad andare via ftp e cancella tutto il contenuto della cartella template_c (senza cancellare l'index)

nocs90

Inviato: 15/1/2007 16:18 Aggiornato: 15/1/2007 16:18

Simpatizzante

Iscritto: 19/11/2006

Da: Abano Terme (PD)

Inviati: 111

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

Non esiste nessun file index.php o html dentro alla cartella Templates_C , comunque ho eliminato tutto e non cambia nulla.

slyss

Inviato: 16/1/2007 1:05 Aggiornato: 16/1/2007 1:05

Staff

Iscritto: 21/8/2004

Da: Italy

Inviati: 3469

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

non ti preoccupare per l'index...

più che altro fai altre prove con qualche altro tema...

timgno

Inviato: 8/1/2008 13:43 Aggiornato: 8/1/2008 13:43

Maestro

Iscritto: 16/5/2007

Da: Cosenza

Inviati: 785

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

provare a sostituire questa riga:

<{$xoops_imageurl}>images/animata.gif"

con questa:

<{$xoops_imageurl}>animata.gif"

o con slash:

<{$xoops_imageurl}>/animata.gif"

alexius85

Inviato: 26/2/2008 21:48 Aggiornato: 26/2/2008 22:16

Niubbo

Iscritto: 23/2/2008

Da:

Inviati: 37

Re: Visualizzare un messaggio di loading nel tuo sito Xoops!

ciao... cmq x quelli a cui non funzionasse ho corretto lo script:

nell'head della index del vostro tema, dovete mettere il seguente codice:

<script type="text/javascript">

function xoopsGetElementById(id) {

if (document.getElementById(id)) {
return document.getElementById(id);
} else if (document.all[id]) {
return document.all[id];
} else if (document.layers && document.layers[id]) {
return (document.layers[id]);
} else {
return fake_element;
}
}

function toggle_visibility(id, flag) {

if (xoopsGetElementById(id)) {
xoopsGetElementById(id).style.visibility = (flag) ? 'visible' : 'hidden';
}
}
</script>

dopo di ke subito dopo il <body> mettete

<!-- Load indicatior -->
<div id="waitDiv" style="position:absolute; right:0%; visibility:hidden; top:0%; text-align:center;">
<{include file="NomeCartellaVostroTema/theme_loading.html"}>
 <script type='text/javascript'>
   toggle_visibility('waitDiv', 1);
 </script>
</div>
<!-- End Load Indicator -->

e prima di </body> mettete

<!-- Page Loaded Indicator Stop -->
   <script type='text/javascript'>
      toggle_visibility('waitDiv', 0);
   </script>
<!-- End -->

se e' troppo veloce il caricamento della pagina tanto da nn visualizzare la scritta, modificatelo in questo modo:

<!-- Page Loaded Indicator Stop -->
   <script type='text/javascript'>
      setTimeout("toggle_visibility('waitDiv', 0);",2000)
   </script>
<!-- End -->

per quanto riguarda invece il file theme_loading.html (da crearvi), vi consiglio di farlo cosi:

<table border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td align="center"><img src="URLDirettoAllaGifDiLoadingDaVoiScelta"></td>
 </tr>
 <tr>
   <td align="center"><b><font color="#9900CC" face="Verdana" size=2>...Loading page...</b></font><br>
     <br>
     <b><font color="#9900CC" face="Verdana" size="1">...Please Wait...</b></font></td>
 </tr>
</table>

a me cosi' ha funzionato!! e il risultato lo potete vedere sul mio sito (linkato nel mio profilo!)!!