Forum Moderators: open
I have this working the cheesy way by setting meta refresh 10 seconds and a text sayin to wait 10 seconds for your download. so when it refreshes - the download actually come sup
but I would want to use something where there is a progress bar and once it completes the download comes up - this I want to use this for a checkout and security
I tried to see sites out there but very hard to find
Basically, it's a blue div inside a div with the border. The blue div is made wider at each step.
C&P code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test Page</title>
<style>* { font-family: "Arial", sans-serif; }
#wrap { text-align: center; }
#bar {
margin: 0 auto;
width: 250px;
text-align: left;
border: 1px solid black;
}#progress {
width: 0;
background: lightblue;
}</style>
<script>
var time = 10000; // 10 secs
var steps = 50; // Five per second
var step = 1;function progress() {
var bar = document.getElementById( "bar");
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
var x = Math.round( aStep *step);
var progress = document.getElementById( "progress");progress.style.width = x +"px";
step++;if( step > steps) redir();
else setTimeout( "progress();", time /steps);
}function redir() {
alert( "Redirecting now!");
}</script>
</head><body>
<div id='wrap'>
Progress?
<div id='bar'><div id='progress'></div></div>
<br>
<a href='#' onClick='progress();'>Click here to start</a>
</div></body>
</html>
#bar {
margin: 0 auto;
width: 250px;height: 10px;
text-align: left;
border: 1px solid black;
}#progress {
width: 0;height: 100%;
background: lightblue;
}
Or you can add an here:
<div id='progress'> </div>
I'm still using one from a couple years back that's a complete mess. Think I'm going to steal yours now.
I try to avoid using other people's code, that way you don't learn. Even if somebody else has the exact thing I want, I always try to reproduce it myself.
But feel free! Glad to be of service!
One thing I will say though, if you still use META REFRESH instead of the redir function, it will still work for non-JS users.
It's a bit more commented as the CSS is a bit complicated rather than the script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test Page</title>
<style>* { font-family: "Arial", sans-serif; }
#wrap { margin-top: 50px;text-align: center; }
#barwrap {
position: relative; /* to contain outer */
margin: 0 auto; /* to centre */
width: 250px;height: 20px; /* size of our bar - required */
text-align: left;
font-weight: bold;
border: 1px solid black;
}#barwrap P { /* to contain text */
margin: 0; /* FF needs this or text drops below bar */
width: 250px; /* use this node to position text */
text-align: center;
}#barwrap #outer { /* bar 'background' */
position: absolute;
width: 100%; height: 100%; /* match parent size */
background: lightgreen;
color: green; /* original colour of text */
}#barwrap #inner {
position: relative; /* otherwise outer hides us */
width: 0; height: 100%; /* match parent */
overflow: hidden; /* to hide new text/prevent it wrapping */
background: green;
color: lightgreen; /* colour of changed text */
}</style>
<script>
var time = 10000; // 10 secs
var steps = 50; // Five per second
var step = 1;function progress() {
var bar = document.getElementById( "barwrap");
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
var x = Math.round( aStep *step);
var outer = document.getElementById( "outer");
var inner = document.getElementById( "inner");// Work out seconds based on % progress from current step
var secs = (( time /1000) -Math.floor( ( step /steps) *10));inner.style.width = x +"px";
step++;// If 0 seconds, display waiting message instead
outer.firstChild.innerHTML = ( secs? secs +" seconds...": "Please Wait...");
// Match text
inner.firstChild.innerHTML = outer.firstChild.innerHTML;if( step > steps) redir();
else setTimeout( "progress();", time /steps);
}function redir() {
alert( "Redirecting now!");
}</script>
</head><body>
<div id='wrap'>
Progress:
<div id='barwrap'> <!-- P wrappers for text positioning -->
<div id='outer'><p></p></div> <!-- original colour/text -->
<div id='inner'><p></p></div> <!-- new colour/text -->
</div><br>
<a href='#' onClick='progress();'>Click here to start bar (only once please, you'll break it)</a>
</div></body>
</html>
Feedback appreciated!
how can I have it start automatically? with out the click? and remove the warning screen but just redirect?
overall GREAT JOB!
;)
Good work.
because I do not see a spot where I can add in a link
ok, basically when the countdown ends, the
redir()function is executed. This is where you'd stick your redirect code, or any other code you wanted. Make the whole page turn blue if you like!
In this case though, don't, but leave it as a <meta> refresh for for anti-JS people.
how can I have it start automatically? with out the click?
The easiest way is to add an onLoad to your <body>:
<body onLoad='progress();'>
and remove the warning screen but just redirect?
Replace:
if( step > steps) redir();
else setTimeout( "progress();", time /steps);
if( step <= steps) setTimeout( "progress();", time /steps);
And remove these lines - they're not needed:
function redir() {
alert( "Redirecting now!");
} overall GREAT JOB!
Thankyou! I enjoyed it. I love this forum 'cos I get to make stuff like this all day! I may take requests by stickypost! ;)
this new enhanced one does not work in FF well it does just the number in the box does not appear
I did have to tweak it for FF, I am using v2. I'll test in 1.5 and report back....
If you want to go down the JS route, in the redir function you have 2 options:
First:
location.href = "mypage.html";
Or "http://www.mydomain.com/somefile.asp", whatever. Using the location.href method means when the user presses the back button in their browser, they will get your progress bar page again, and redirect again.
Second way:
location.replace( "mypage.html");
This way their back button will take them to the page before the progress bar page. I prefer this way, but you should consider back buttons breaking code, e.g. if they press back, and then get redirected again, would they be charged twice on your checkout system?
I prefer the second way as it's usually the most logical one. Ever been to a site, which instantly redirects to another page within the site? Yes? Every tried to use your back button to get back to Google? Did it work? No? Now you know why. I find this particularly irritating, not to mention cretinous.
again beutiful!
Worked in Firefox, IE 5.5+ (my 5.0 crashes).
Worked in Konqueror (3.5.4 I think?)
This is really nice! I hope you don't mind if I save this for later as a reference. ;)
- John
Worked in Opera 9+ (Opera 7+ but without the animated background color).
Worked in Firefox, IE 5.5+ (my 5.0 crashes).Worked in Konqueror (3.5.4 I think?)
Thanks for that testing John, I only have IE6 & 7, FF 1.5 & 2. I'm pleased it works in all of those, more by fluke with that much CSS floating around on only a couple of elements. Maybe I'm getting at good at it? ;)
This is really nice! I hope you don't mind if I save this for later as a reference. ;)
Be my guest.
