|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTMLWebScript - Efectos
Barra de progreso I
por Luciano Moreno, del departamento de diseño web de BJS Software.
El siguiente script nos va a crera una barra de progreso, muy útil en el caso de tener en nuestra página un enlace que nos vaya a enviar a otra, pero que necesite procesar algunos datos antes de ello. De esta forma el usuario no verá una página estática, ya que la sóla presencia de la barra de progreso dará dinamismo a la página, suavizando el tiempo de espera.
Para la construcción de nuestra barra vamos a usar capas craedas mediante etiquetas DIV para Internet Explorer y Nestcape Navigator 4x, y capas LAYER para el caso de Nestcape 4x.
El código necesario para la página es el siguiente:
<html>
<head>
<title>Barra de Progreso I</title>
<!--estilos de las capas de la barra de desplazamiento en el caso de Internet Explorer-->
<style>
#fondobarra{position:absolute;left:1px;top:0px;background-color:#339900;}
#barra{position:absolute;left:0px;top:0px;background-color:#ff9900;}
</style>
<!--fin de los estilos de las capas-->
<script language="JavaScript" type="text/javascript">
/**
* tiempo de recorrido de la barra de progreso (en segundos)
*/
var duracion=5;
/**
* accion a ejecutar despues de finalizar la barra de progreso.
* en este caso cargamos una nueva pagina, pero puede ser cualquier otra
*/
function accion()
{
window.location="efectos.html";
}
/***
* variables base. NO CAMBIAR
*/
var clipderecho=0; // define el recorte inicial derecho de la barra de
progreso
var anchuraIE=0; // define la anchura inicial de la barra de
progreso para Internet Explorer
var anchuraN6=0; // define la anchura inicial de la barra de
progreso para Nestcape Navigator 6x
var anchuraNC=0 // define la anchura inicial de la barra de
progreso para Nestcape Navigator 4x
/**
* funcion que inicializa la barra de progreso
*/
function inicializabarra()
{
/**
* para Internet Explorer
*/
if (document.all)
{
/**
* hacemos
visible al barra padre
*/
document.all['barrapadre'].style.visibility="visible";
/**
* asignamos a la variable anchura Ie el valor de la anchura de la barra de progreso
*/
anchuraIE=document.all['barra'].style.pixelWidth;
/**
* variable de tiempo que llama a la funcion incrementaIE cada 50 milisegundos
* con lo que la barra de progreso va aumentando hacia la derecha
*/
arrancaIE=setInterval("incrementaIE()",50);
}
else if(document.getElementById)
{
/**
* hacemos visible al barra padre
*/
document.getElementById('barrapadre').style.visibility="visible";
/**
* asignamos a la variable anchura Ie el valor de la anchura de la barra de progreso
*/
anchuraN6=parseInt(document.getElementById('barra').style.width);
/**
* variable de tiempo que llama a la funcion incrementaN6 cada 50 milisegundos
* con lo que la barra de progreso va aumentando hacia la derecha
*/
arrancaN6=setInterval("incrementaN6()",50);
}
/**
* para Nestcape Navigator 4x
*/
else if(document.layers)
{
/*
* asignamos a la variable anchuraNC el valor de la anchura clipeada del layer fondobarra
* nota como llegamos a este layer mediante su ruta completa padre-hijo
*/
anchuraNC=document.barrapadreNS.document.fondobarraNS.clip.width;
/**
* asignamos un valor de clipeo derecho cero al layer interno barraNC, que es el que nos
* crea la barra despazante en Nestcape Navigator 4x
*/
document.barrapadreNS.document.barraNC.clip.right=0;
/**
* hacemos visible el layer padre de la barra
*/
document.barrapadreNS.visibility="show";
/**
* variable de tiempo que llama a la funcion incrementaNC cada 50 milisegundos, con lo que se va
* repitiendo el proceso, y la barra de progreso se va desplazando a la derecha
*/
arrancaNC=setInterval("incrementaNC()",50);
}
}
/**
* funcion para incrementar el ancho de la barra de desplazamiento en Internet Explorer
*/
function incrementaIE()
{
/**
* recortamos la barra dinamicamente
*/
barra.style.clip="rect(0 "+clipderecho+" auto0)";
/**
* mensaje adicional en la barra de estado del navegador
*/
window.status="Procesando...";
/**
* si el valor del clipeo derecho de la barra de desplazamiento es menor que la variable de anchura
* fijada para este navegador >> continuamos el clipeo derecho un numero de pixels fijados
* por la duracion que queremos que tenga el progreso de la barra
*/
if (clipderecho<anchuraIE)
{
clipderecho=clipderecho+(anchuraIE/(duracion*20));
}
/**
* si no es asi (lo que significa que la barra ha llegado al final de su desplazamiento)>>
*/
else
{
/**
* eliminamos el mensaje de la barra de estado del navegador
*/
window.status="";
/**
* ponemos a cero el contador de tiempo para Internet Explorer
*/
clearInterval(arrancaIE);
/**
* llamamos a la accion definida para cuando acabe la barra de progreso
*/
accion();
}
}
/**
* funcion para incrementar el ancho de la barra de desplazamiento en Nestcape Navigator 6x
*/
function incrementaN6()
{
/**
* recortamos la barra dinamicamente
*/
document.getElementById('barra').style.clip="rect(0 "+clipderecho+" auto0)";
/**
* mensaje adicional en la barra de estado del navegador
*/
window.status="Procesando...";
/**
* si el valor del clipeo derecho de la barra de desplazamiento es menor que la variable de anchura
* fijada para este navegador >> continuamos el clipeo derecho un numero de pixels fijados
* por la duracion que queremos que tenga el progreso de la barra
*/
if (clipderecho<anchuraN6)
{
clipderecho=clipderecho+(anchuraN6/(duracion*20));
}
/**
* si no es asi (lo que significa que la barra ha llegado al final de su desplazamiento) >>
*/
else
{
/**
* eliminamos el mensaje de la barra de estado del navegador
*/
window.status="";
/**
* ponemos a cero el contador de tiempo para Internet Explorer
*/
clearInterval(arrancaN6);
/**
* llamamos a la accion definida para cuando acabe la barra de progreso
*/
accion();
}
}
/**
* funcion para incrementar el ancho de la barra de desplazamiento en Nestcape Navigator 4x
*/
function incrementaNC()
{
/**
* si el clip
derecho del layer hijo de progeso es menor que el numero de pixels que
deseemos...
*/
if
(clipderecho<202)
{
/**
* sacamos el mensaje adicional en la barra de
estado
*/
window.status="Procesando...";
/**
* recortamos el layer hijo de la barra de
progreso
*/
document.barrapadreNS.document.barraNC.clip.right=clipderecho;
/**
* aumentamos el valor de la variable de clipeo derecho un numero de pixels
determinado
* por la duracion que queramos darle a la barra en Nestcape Navigator
4x
*/
clipderecho=clipderecho+(anchuraNC/(duracion*20));
}
/**
* en el caso de
que el clip derecho del layer hijo sea igual o mayor que el
deseado...
*/
else
{
/**
* eliminamos el mensaje adicional de la barra de estado del
navegador
*/
window.status="";
/**
* ponemos a cero el contador de tiempo definido para Nestcape Navigator
4x
*/
clearInterval(arrancaNC);
/**
* llamamos a la accion predefinida para cuando acabe la barra de progreso
*/
accion();
}
}
</script>
</head>
<body bgcolor="#ffff99">
<center>
<br><br><br><br><br>
<!--escribimos las capas para la barra de
desplazamiento en el caso de Internet Explorer-->
<script language="JavaScript"
type="text/javascript">
if
(document.all || document.getElementById)
{
document.write('<div id="barrapadre" style="position:relative;width:200px;height:20px;visibility:hidden;">');
document.write('<div id="fondobarra"
style="width:200px;height:20px;z-index:9;"></div>');
document.write('<div id="barra"
style="width:200px;height:20px;z-index:10"></div>');
document.write('</div>');
}
</script>
<!--fin del codigo paea Internet Explorer-->
<!--layers de la barra de desplazamiento en
el caso de Nestcape Navigator 4x-->
<ilayer
name="barrapadreNS" visibility="hide" width="200" height="20"
left="280">
<layer name="fondobarraNS"
bgcolor="#339900" width="200" height="20" z-index="10" left="0 "
top="0"></layer>
<layer
name="barraNC" bgcolor="#ff9900" width="200" height="20" z-index="11" left="0"
top="0"> <font face="Verdana,Helvetica"
size="2"></font></layer>
</ilayer>
<!--fin de los layers de la barra para
Nestcape 4x-->
<br><br><br><br><br>
<a
href="#" onClick="inicializabarra();return false;">Pulsa aquí para regresar</a>
</center>
</body>
</html>
Consideraciones:
1) Aplicamos diferente sintaxis de código para cada navegador, ya que cada uno de ellos maneja las capas de forma diferente. Para más información, ver diferentes artículos de DHTML en este mismo portal.
2) SetTimeout("funcion()", tiempo) es un método de JavaScript que llama a una función en un tiempo en milisegundos determinado.
3) En el caso de Nestcape 6x usamos el método parseInt(expresion) ya que si obtenemos la propiedad anchura (o left, top, height, clip) en este navegador el resultado es del tipo "345 px", valor de tipo string, por lo que no podemos operar con él como número entero. El método parseInt saca de esa cadena los primeros números, hasta encontrar la cadena "px".
Por lo demás creo que queda claro el código para aquellas personas con conocimientos suficientes de DHTML.
Hemos usado los elementos LAYER para Nestcape 4x porque se adpatan muy bien a su tratamiento dinámico. Pero esto nos obliga a usar el método write en el body, porque si no en Nestcape 4x se veríab tabto los DIVs como los LAYERs. No obstante, haremos otra versión que use sólo capas mediante etiquetas DIV válida para los tres navegadores.
El resultado de este código podéis verlo pinchando aquí.
Eso es todo, amigos. Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Efectos