Help needed with the Xp style progress bar

**ViserExcizer** · 04-29-2009, 08:37 AM

1) Script Title:

WinXP Progess Bar

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...rogressbar.htm

3) Describe problem:

I need to make the redirectpage() funtion in this script to load only when a link is clicked, and not load when the page loads. The way this script works is
the ' var bar3 ' starts loading when the page is loaded,

I need to make it such that I have

<a href="http://yahoo.com" onclick="redirectpage()" >
<a href="http://google.com" onclick="redirectpage()" >
<a href="http://dynamicdrive.com" onclick="redirectpage()" >

which, when clicked, will show the bar loading for a number of times, and after that, forwards to the given url in the href=''

this is the code on the ddrive page that i dont know how to work with.

Code:

<script type="text/javascript">

function redirectpage(){
bar3.togglePause()
window.location="http://www.javascriptkit.com"
}

var bar3= createBar(320,15,'white',1,'black','red',85,7,5,"redirectpage()");
</script>

Im sorry, im new to javascript, and this is beyond my skills right now. Any help will be greatly appreciated.

**ViserExcizer** · 04-29-2009, 01:26 PM

Hello, im not sure if this is acceptable, im a first time poster, and sorry if it isnt, but i will pay anyone who can do it for me, $30 though paypal.

**jscheuer1** · 04-29-2009, 01:54 PM

That's acceptable, but not required. Try this out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="xp_progress.js">

/***********************************************
* WinXP Progress Bar- By Brian Gosselin- http://www.scriptasylum.com/
* Script featured on Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/

</script>
</head>
<body>
<script type="text/javascript">

function redirectpage(){
 /*@cc_on @*/
 /*@if(@_jscript_version >= 5)
 redirectpage.ie = true;
 @end @*/
 if(!redirectpage.ie){
  bar3.togglePause();
  bar3.hideBar();
  bar3.ctr = 0;
 }
 window.location = redirectpage.url;
}

var bar3 = createBar(320,15,'white',1,'black','red',85,7,5,"redirectpage()");
bar3.hideBar();
bar3.togglePause();

function progresslink(url){
 redirectpage.url = url;
 bar3.showBar();
 bar3.togglePause();
}
</script>
<a href="http://www.yahoo.com/" onclick="progresslink(this.href);return false;">Yahoo</a>
<a href="http://www.google.com/" onclick="progresslink(this.href);return false;">Google</a>
<a href="http://www.dynamicdrive.com/" onclick="progresslink(this.href);return false;">Dynamic Drive</a>
</body>
</html>

**ViserExcizer** · 04-29-2009, 03:27 PM

Thanks John, thats worked like a charm, do you have any tips for me, where i can learn javascript and tricks like these? and please pm me your paypal email.

**jscheuer1** · 04-29-2009, 03:52 PM

I can't PM you for some reason. If you still want to send me money, you can get my email from my profile, it's the same as my PayPal email, or click the PayPal link in my sig.

I learned most of what I know here, and by trying things out, and using Google to check on information about methods I was unfamiliar with.

I don't think that there are any real good basic tutorials, because the mere fact of starting at the beginning tends to oversimplify things.

That said, here's one that several advanced folks around here seem to like:

http://www.howtocreate.co.uk/tutorials/javascript/

Here's another fairly good one, though less in favor than the first (I like this one because it can be handy as a reference at times):

http://www.w3schools.com/js/default.asp

Yet another favored by at least one member here:

http://www.tizag.com/javascriptT/

**jscheuer1** · 04-29-2009, 05:19 PM

I was thinking, what if someone clicked on one of the links after having clicked on another and the progress bar was still showing? We could either ignore the second click or reset the bar and have it take the page to the second location upon completion of the bar. I liked the second method, but the first could be done if you prefer. Here's the updated progresslink function to reset the bar and switch to the new URL upon completion:

Code:

function progresslink(url){
 redirectpage.url = url;
 if(bar3.tid === 0){
  bar3.showBar();
  bar3.togglePause();
 }
 else bar3.ctr = Math.min(1, bar3.ctr);
}

Thread: Help needed with the Xp style progress bar

Thread Tools

Search Thread

Help needed with the Xp style progress bar

Bookmarks

Bookmarks

Posting Permissions