Foros del Web » Programando para Internet » Javascript »

barra de carga de pagina web

Estas en el tema de barra de carga de pagina web en el foro de Javascript en Foros del Web. Hola!! hace poco empeze con diseño web y estoy rediseñando una pagina de la cual estoy buscando el modo de que cuando entro a la ...
  #1 (permalink)  
Antiguo 12/04/2010, 12:19
Avatar de euge01_84  
Fecha de Ingreso: julio-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 9
Antigüedad: 12 años, 6 meses
Puntos: 0
Pregunta barra de carga de pagina web

Hola!! hace poco empeze con diseño web y estoy rediseñando una pagina de la cual estoy buscando el modo de que cuando entro a la misma me aparesca una barra de carga.
Algo lei sobre el ajax, me descargue un gif pero nose que tengo que hacer para programarlo, cuales son los codigos que tengo que generar para que funcione... estoy usando el dreamweaver. Si alguien me puede ayudar se los agradeceria mucho!!
  #2 (permalink)  
Antiguo 12/04/2010, 13:34
 
Fecha de Ingreso: abril-2010
Ubicación: Entre la eternidad y la inmensidad .
Mensajes: 296
Antigüedad: 11 años, 9 meses
Puntos: 6
Respuesta: barra de carga de pagina web

copiar y pegar

<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King ([email protected])
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script

var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.

var _progressBar = "||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;


// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;

// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeigh t/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100+"px";
document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
}

ProgressUpdate(); // Initialize bar
}

// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}

// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}

// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}

// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}

function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}

function CallJS(jsStr) { //v2.0
return eval(jsStr)
}

</script>

<SCRIPT LANGUAGE="JavaScript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides

</script>


<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>

<a href="javascript:CallJS('Demo()')">Text link example</a>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>
  #3 (permalink)  
Antiguo 12/04/2010, 14:11
Avatar de euge01_84  
Fecha de Ingreso: julio-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 9
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: barra de carga de pagina web

Hola gracias por tu respuesta, pero donde tengo que pegar este codigo?
  #4 (permalink)  
Antiguo 12/04/2010, 15:35
 
Fecha de Ingreso: abril-2010
Ubicación: Entre la eternidad y la inmensidad .
Mensajes: 296
Antigüedad: 11 años, 9 meses
Puntos: 6
Respuesta: barra de carga de pagina web

en la página donde quieras que se muestre la barra.. pero deberí de ser una antes de la principal para que quede bien... y de esta pones
<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://www.midominio.com/lapaginaquesea.html">
  #5 (permalink)  
Antiguo 12/04/2010, 16:21
Avatar de euge01_84  
Fecha de Ingreso: julio-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 9
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: barra de carga de pagina web

no hay caso.... arme un archivo html nuevo y pegue el primer codigo que me mandaste, y luego pegue el último con la modificación en la URL.. pero no me aparece nada...
  #6 (permalink)  
Antiguo 13/04/2010, 00:16
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 19 años, 11 meses
Puntos: 772
Hola euge01_84

Muevo tu tema al foro de Javascript desde Web general.

Saludos,

Etiquetas: barra, carga
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:12.