Help with "Event-based Progress Bar" script

**nermus** · 01-18-2007, 09:50 PM

1) Script Title:
Event-based Progress Bar

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...lprogress2.htm

3) Describe problem:
Hello! I wish to increment this bar once each day automatically. Can anybody help me out?
I tried something like that but I am not sure whether it will actually work:

Code:

<script type="text/javascript">
var d = new Date();
var is_date = d.getDate();
...what code do I need here...I tried to save todays date and 'if-then-else-it'
with is_date but I know it will not increment it each day
incrCount(1.05820)
</script>

Any help will be really appreciated!
Thanks

**jscheuer1** · 01-19-2007, 07:03 AM

First off this script needs a minor change to work in FF with a DOCTYPE. Here near the end of percent_bar.js, add the red highlighted code:

Code:

function clipid(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}

progressBarInit();

window.onresize=function(){
if(ns4)setTimeout('history.go(0)' ,400);
}

With that in mind, here is a demo page with an added script that should work out well for you:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Date Bar - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript" src="percent_bar.js">

/*
Event-based progress bar- By Brian Gosselin at http://scriptasylum.com/bgaudiodr
Featured on DynamicDrive.com
For full source, visit http://www.dynamicdrive.com
*/

</script>
<script type="text/javascript">
var start_date=new Date(2007, 0, 1).getTime();
var total_days=365;

///////////////// Stop Editing /////////////

var d=new Date();
var now=new Date(d.getFullYear(),d.getMonth(),d.getDate()).getTime()
var days_since=Math.round((now-start_date)/(1000*60*60*24));
if(days_since<total_days)
setCount(Math.round(days_since/total_days*100));
else
setCount(100);
</script>
</body>
</html>

Notes: Just set the two red highlighted variables. The start_date is in the form of:

full_year_number, 0_to_11_month_number, date_number

The total_days is the number of days from the start_date that would represent 100% of the time period that you wish graphically measured.

**nermus** · 01-19-2007, 07:37 PM

Thank you very much!
-Nermus

**jscheuer1** · 01-19-2007, 08:11 PM

You are welcome. I realized at the time that I wrote this that I was creating a number of global variables that could conflict with other scripts should they be present. This was bothering me and bothered me even more when I came back to this thread just now and saw it again. To avoid the problem, replace my little added script with this one (usage is the same):

Code:

<script type="text/javascript">
function set_progress_bar_as_percent_of_time(){

var start_date=new Date(2007, 0, 1).getTime();
var total_days=365;

///////////////// Stop Editing /////////////

var d=new Date();
var now=new Date(d.getFullYear(),d.getMonth(),d.getDate()).getTime()
var days_since=Math.round((now-start_date)/(1000*60*60*24));
if(days_since<total_days)
setCount(Math.round(days_since/total_days*100));
else
setCount(100);
}
set_progress_bar_as_percent_of_time();
</script>

**nermus** · 01-20-2007, 01:17 AM

John,
The script works great! I only have this script in the webpage so it wouldnt create any problems but thanks very much for the time you put in to this (if you put any, cause it seems you're a pro

)
Thanks again,
-Nermus

Thread: Help with "Event-based Progress Bar" script

Thread Tools

Search Thread

Help with "Event-based Progress Bar" script

Excellent

Thanks

Bookmarks

Bookmarks

Posting Permissions