PDA

Click to See Complete Forum and Search --> : COunter...

lukezweb
11-03-2003, 01:07 PM
Could someone make me a code that counts from 0% to 100% in a certain amount of seconds. I have a page where it refreshes its self to another page after 10 seconds i was wondering if there was a code to start form 0% and go !%, "5,3%,4%,5% etc to 100% but it has to be timed so it does it all in just 9 or 10 seconds? could someone please do it for me ?

it would be much appreciated :)

Luke :)
Jona
11-03-2003, 01:40 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Redirecting</title>
<script type="text/javascript"><!--
var i=0, redir_pg="your_page.html";
function startRedir(time){
i++;
if(i<=100){
document.forms["percentFrm"].pRedir.value=i+"%";
} else {location.href=redir_pg; return false;}
window.setTimeout("startRedir("+time+")", time*10);
}
//--></script>
</head>
<body onclick="startRedir(10);">
<form name="percentFrm"><div>
<input type="text" value="Redirecting..." name="pRedir">
</div></form>
</body></html>


[J]ona
lukezweb
11-03-2003, 02:02 PM
thanks :D
Jona
11-03-2003, 02:06 PM
You're welcome.

[J]ona
lukezweb
11-03-2003, 02:08 PM
Ok one question say i just wanted to display it as text and not in a text field?
lukezweb
11-03-2003, 02:11 PM
you can see the result here...

http://luke-dyson-2003.2itb.com/

it doesnt actually show a percentage? just syas redirecting...
Jona
11-03-2003, 02:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Redirecting</title>
<script type="text/javascript"><!--
var i=0, redir_pg="your_page.html";
function startRedir(time){
var node = document.getElementById("pRedir");
i++;
if(i<=100){
var t=document.createTextNode(i+"% loaded...");
node.removeChild(node.childNodes[0]);
node.appendChild(t);
node.style.width=i+"%";
} else {
location.href=redir_pg;
return false;
}
window.setTimeout("startRedir("+time+")", time*10);
}
//--></script>
</head>
<body onclick="startRedir(10);">
<div id="pRedirHolder" style="background-color:blue; color:black; font-family:arial, sans-serif; font-weight:bold; font-size:0.7em; text-align:center; width:100%">
<div id="pRedir" style="background-color:red;">Loading...</div></div>
</body></html>


[J]ona
lukezweb
11-03-2003, 02:33 PM
reply wow thats so close finally could you make it so there is no loading... included


here is my page:

<HTML>
<HEAD>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<LINK REL="stylesheet" TYPE="text/css" HREF="http://luke-dyson-2003.2itb.com/Version2ImagesandSKins/offthestreet.css">
<TITLE>Lukezweb</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Redirecting</title>
<script type="text/javascript"><!--
var i=0, redir_pg="Version2ImagesAndSKins/index.html";
function startRedir(time){
var node = document.getElementById("pRedir");
i++;
if(i<=100){
var t=document.createTextNode(i+"% loaded...");
node.removeChild(node.childNodes[0]);
node.appendChild(t);
node.style.width=i+"%";
} else {
location.href=redir_pg;
return false;
}
window.setTimeout("startRedir("+time+")", time*10);
}
//--></script>
<body onload="startRedir(10);">
<table width="100%" border="0" cellpadding="0" cellspacing="0" HEIGHT="100%">
<TR>
<TD>
<CENTER>Lukezweb is loading...
<P>
<MARQUEE BEHAVIOR=ALTERNATE BGCOLOR=#717171 WIDTH=100>
<TABLE WIDTH=20 HEIGHT=10><TR><TD BGCOLOR="dimgray"><div id="pRedirHolder"><div id="pRedir"><FONT COLOR="black"></FONT></div></div></FONT></TD></TR></TABLE>
</MARQUEE>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY></HTML>

you cna see it here: http://lukezweb.tk

Thanks Again :)
Jona
11-03-2003, 02:41 PM
I've corrected your HTML code, as well.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" TYPE="text/css" HREF="http://luke-dyson-2003.2itb.com/Version2ImagesandSKins/offthestreet.css">
<TITLE>Lukezweb</TITLE>
<script type="text/javascript"><!--
var i=0, redir_pg="Version2ImagesAndSKins/index.html";
function startRedir(time){
var node = document.getElementById("pRedir");
i++;
if(i<=100){
var t=document.createTextNode(i+"&");
node.removeChild(node.childNodes[0]);
node.appendChild(t);
node.style.width=i+"%";
} else {
location.href=redir_pg;
return false;
}
window.setTimeout("startRedir("+time+")", time*10);
}
//--></script>
<body onload="startRedir(10);">
<table width="100%" border="0" cellpadding="0" cellspacing="0" HEIGHT="100%">
<TR>
<TD>
<p style="text-align:center;">Lukezweb is loading...</p>
<P>
<TABLE WIDTH=20 HEIGHT=10><TR><TD BGCOLOR="dimgray"><div id="pRedirHolder" style="color:black;"><div id="pRedir"></div></div></TD></TR></TABLE>
</TD></TR></TABLE>
</BODY></HTML>


[J]ona
Jona
11-03-2003, 02:54 PM
This should work better, as I've removed the tables and it will look nicer. Try using CSS rather than HTML to format colors and use CSS rather than tables for your layout. This will simplify things.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" TYPE="text/css" HREF="http://luke-dyson-2003.2itb.com/Version2ImagesandSKins/offthestreet.css">
<TITLE>Lukezweb</TITLE>
<script type="text/javascript"><!--
var i=0, redir_pg="Version2ImagesAndSKins/index.html";
function startRedir(time){
var node = document.getElementById("pRedir");
i++;
if(i<=100){
var t=document.createTextNode(i+"%");
node.removeChild(node.childNodes[0]);
node.appendChild(t);
node.style.width=i+"%";
} else {
location.href=redir_pg;
return false;
}
window.setTimeout("startRedir("+time+")", time*10);
}
//--></script>
<body onclick="startRedir(10);" style="background-color:dimgray; color:white;">
<div style="text-align:center; position:absolute; top:50%; left:50%; margin-left:-140px; margin-top:-50px;">Lukezweb is loading...
<div id="pRedir" style="background-color:white; color:black; border:solid 1px black;"> </div></div>
<noscript>
<p><a href="Version2ImagesAndSKins/index.html" title="Continue to main site.">Continue to main site</a>.</p></noscript>
</BODY></HTML>


[J]ona