Made in Software » barra avanzamento http://www.madeinsoftware.it In un mondo fatto di software, consigli pratici per gli sviluppatori Mon, 26 Jul 2010 09:17:44 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Barra di avanzamento con layer trasparente http://www.madeinsoftware.it/index.php/2009/05/07/barra-di-avanzamento-con-layer-trasparente/ http://www.madeinsoftware.it/index.php/2009/05/07/barra-di-avanzamento-con-layer-trasparente/#comments Thu, 07 May 2009 13:59:53 +0000 dinox http://www.madeinsoftware.it/?p=35 CSS, Javascript e HTML per un effetto molto interessante

Quando volete creare un layer trasparente che vada a coprire la pagina web sottostante per evitare, ad esempio, che l’utente clicchi due volte un tasto submit o altri tasti presenti nella pagina dopo che ha già compiuto una determinata azione, potete seguire questi consigli. Lo stesso codice farà anche apparire una barra di caricamento che aiuta a dissipare le ansie di chi è davanti al monitor e attende una elaborazione lunga.

Creiamo il giusto stile

<style type="text/css">
td.loading { text-align: Center; color: #3B3C8C; font: Bold 11px Verdana; }
td.barra { background-color: #3B3C8C; border: Solid 1px #D4B600; }
#barra { background-color: #F7E86D; }
#percentuale { text-align: Center; color: #3B3C8C; font: Bold 10px Verdana; }
</style>

Definiamo un metodo javascript che si occupi di rendere visibile il layer e gestire la barra di avanzamento

<script language="JavaScript" type="text/JavaScript">
<!--
var espandi = 0;
function Loading() {
document.getElementById('layerBarraAvanzamento').style.visibility='visible'
//nomeForm.nomeCampo.funzionalita
barra.style.width = espandi;
espandi++;
percentuale.innerHTML = Math.round(espandi / 2) + "%";
if (espandi != 200) {
window.setTimeout("Loading(), 10");
}
}
//-->
</script>

Creiamo la parte che va nella sezione <body> della pagina, magari proprio all’inizio

<div id="layerBarraAvanzamento" style="position:absolute; left:0px; height:768px; width:1024px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/sfondo.png', sizingMethod='image'); top:0px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="222" cellpadding="1" cellspacing="10">
<tr>
<td class="loading">...Wait please...</td>
</tr>
<tr>
<td class="barra"><div id="barra"></div></td>
</tr>
<tr>
<td><div id="percentuale"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

]]> http://www.madeinsoftware.it/index.php/2009/05/07/barra-di-avanzamento-con-layer-trasparente/feed/ 0