...

View Full Version : Progress Bar



thesmart1
08-27-2006, 10:02 PM
I need a script for a progress bar with the following specifications:

- I can have several bars on one page
- I can set up each bar to load with a preset percentage
- I can set up links to increase or decrease one or more bars by a specified percentage
- I can make each bar have several functions to execute when it reaches certain percentages
- Each of these functions will randomly select another function to execute out of a list of two (or more)
- Set up a priority level for each function compared to other functions

For example:
I have loaded the page. Bar 1 is at 20%, bar 2 is at 60%, and bar 3 is at 0%. I click a link that increases bar 1 by 10% and decreases bar 2 by 20%. Bar 1 is set to execute either func1() or func2() at 30% (where it is now), and bar 2 is set to execute either func3() or func4() at 40% (where it is now). Bar 1 executes func2(), and bar 2 executes func3() (by random). Func2() is set to have a higher priority than func3(), so only it is executed.

Vladdy
08-27-2006, 11:05 PM
"Paid work offers and requests" is a better forum for this post. "Javascript Programming" is where we HELP you with YOUR code....

vwphillips
08-27-2006, 11:43 PM
http://www.codingforums.com/showthread.php?t=93460

thesmart1
08-31-2006, 08:47 PM
http://www.codingforums.com/showthread.php?t=93460

I asked the same question but then didn't get a response for weeks:


That hides the bar (or whatever) when it reaches 100%. How would I make it, for example, execute function dothis() when it reaches 30%?

A1ien51
09-01-2006, 02:23 AM
I asked the same question but then didn't get a response for weeks:

Hey you are lucky someone coded it for you to start out.....I think a little trial and error on your part would have figured it out!

Eric

vwphillips
09-01-2006, 09:55 AM
read this again


// parameter 2 = (optional) 'hide' will hide bar <DIV> if the inner bar is at 100%. (string, 'hide')
// or if a function Name as a string
// the bar object and percentage wil be passed to the function. (function name as a string)

thesmart1
09-01-2006, 07:16 PM
I'm sorry, but I'm not that great with javascript, can you please give me an example?

vwphillips
09-01-2006, 07:56 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Progress Bar (16-August-2006)
// By Vic Phillips - http://www.vicsjavascripts.org.uk

// A simple progress bar which is controlled by passing a percentage to the controlling function.
// The bar may be horizontal or vertical and the colors may be specified.
// Passing a percentage prefixed with '+' or '-' will increment the size by that percentage.
// A percentage without a prefix will set the size to the specified percentage.
// Options allow the percentage to be displayed in the bar and the bar to be hidden at 100%
// or the controlled percentage may be passed to a function of choice.
// There may be as many applications on a page as required.


// ****** Application Notes

// **** The HTML Code
//
// Each bar is specified in the HTML Code
// e.g.
// <div id="T1" style="position:relative;width:100px;height:20px;border:solid black 1px;" ></div>
// <div id="T2" style="position:relative;width:20px;height:120px;border:solid black 1px;" ></div>
//
// The <DIV> must be assigned a unique ID name
// The style position, 'position:relative;' or 'position:absolute;" and the style width and height defined 'inline'


// ***** Initialising
//
// Each bar would normally be initialised from a <BODY> or window on load event.
// e.g.
// <body onload="zxcBar('T1','50%','red','txt1');zxcBar('T2','50%','blue');">
// where:
// parameter 0 = the unique ID name if the bar <DIV>. (string)
// parameter 1 = the initial size as a percentage of the bar <DIV>. (string)
// parameter 2 = the color of the inner bar. (string)
// parameter 3 = (optional) the class rule for a display of the percentage. (string)
// example class rules:
// .txt1 { left:0px;top:0px;text-align:center;font-weight:bold;color:white; }
// .txt2 { left:0px;top:40px;text-align:center;color:white; }


// ***** The Controls
// The inner bar size may be controlled by an event call to function 'zxcBar'
// e.g.
// <input type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','hide');">
// <input type="button" name="" value="- 10" onclick="zxcBar('T1','-10%','hide');">
// <input type="button" name="" value="80%" onclick="zxcBar('T1','80%','hide');">
// where
// parameter 0 = the unique ID name if the bar <DIV>. (string)
// parameter 1 = (Prefix '+' or '-') will increment the inner bar size by that percentage of the bar <DIV>. (string)
// (No Prefix) the inner bar size as a percentage of the bar <DIV>. (string)
// parameter 2 = (optional) 'hide' will hide bar <DIV> if the inner bar is at 100%. (string, 'hide')
// or if a function name as a string
// the bar object and percentage wil be passed to the function(see next section). (function name as a string)


// ***** Passing the Bar Object and Percentage to a Function
// The the Bar Object and Percentage to may be passedd to a function of choice
// by specifying a function name as a string in parameter 2 of the control call to function 'zxcBar'
// e.g.
// <input type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','MyFunction');" >
// The Bar object will be passed as parameter 0 and the percentage(digits) as parameter 1 to function 'MyFunction'
// where example 'MyFunction' is:
// function MyFunction(obj,percent){
// document.getElementById('TstTB').innerHTML='Bar ID name '+obj.id+' is at '+percent+' %';
// }
// The content of the fuction customised against the speciic requirement
//


// ***** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.

// The functional code (about 1.6K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox



// ***** Functional Code NO NEED to Change

function zxcBar(zxcid,zxcsrt,zxccol,zxctxt){
zxccol=zxccol||'';
var zxcobj=document.getElementById(zxcid);
var zxcobjw=parseInt(zxcobj.style.width);
var zxcobjh=parseInt(zxcobj.style.height);
var zxcwh=(zxcobjw>zxcobjh)?'width':'height';
var zxcbar=zxcobj.getElementsByTagName('DIV')[0];
var zxcbtxt=zxcobj.getElementsByTagName('DIV')[1];
if (!zxcbar){
zxcbar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:(zxcobjw)+'p x',height:(zxcobjh)+'px',backgroundColor:zxccol});
zxcobj.appendChild(zxcbar);
if (zxctxt){
zxcbtxt=zxcStyle('DIV',{position:'absolute',zIndex:'1',overflow:'hidden',width:(zxcobjw)+'px',height :(zxcobjh)+'px'});
zxcbtxt.className=zxctxt;
zxcobj.appendChild(zxcbtxt);
}
}
var zxcpsz=parseInt(zxcobj.style[zxcwh]);
var zxcbsz=parseInt(zxcbar.style[zxcwh]);
var zxcinc=((zxcwh=='width')?zxcobjw:zxcobjh)*parseInt(zxcsrt)/100;
if ((zxcsrt.charAt(0)=='+')||(zxcsrt.charAt(0)=='-')){
zxcbsz=(zxcbsz+zxcinc);
zxcbsz=(zxcbsz>zxcpsz)?zxcobjw:(zxcbsz<0)?0:zxcbsz;
zxcbar.style[zxcwh]=(zxcbsz)+'px';
}
else { zxcbar.style[zxcwh]=(zxcpsz*parseInt(zxcsrt)/100)+'px'; }
zxcbsz=parseInt(zxcbar.style[zxcwh]);
if (zxccol=='hide'){ zxcobj.style.visibility=(zxcbsz>=zxcpsz)?'hidden':'visible'; }
else if (window[zxccol]){ window[zxccol](zxcobj,Math.round(100/(zxcpsz/zxcbsz))); }
if (zxcbtxt){ zxcbtxt.innerHTML=Math.round(100/(zxcpsz/zxcbsz))+' %'; }


}

function zxcStyle(zxcele,zxcstyle){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
return zxcele;
}

//-->
</script>
<script type="text/javascript">
<!--
function InitScripts(){
zxcBar('T1','50%','red','txt1');
zxcBar('T2','85%','blue','txt2');
}


function MyFunction(obj,percent){
document.getElementById('TstTB').innerHTML='Bar ID name '+obj.id+' is at '+percent+' %';
}

//-->
</script>
</head>

<body onload="InitScripts();">
<div id="T1" style="position:relative;width:100px;height:20px;background-color:#FFFFCC;border:solid black 1px;" ></div>
<br>
<input class="TxtArea" style="width:40px;" type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','MyFunction');">
<input class="TxtArea" style="width:40px;" type="button" name="" value="- 10" onclick="zxcBar('T1','-10%','MyFunction');">
<input class="TxtArea" style="width:40px;" type="button" name="" value="80%" onclick="zxcBar('T1','80%','MyFunction');">
<br>
<span id="TstTB" ></span><br>
<div style="position:relative;left:0px;top:20px;width:80px;text-align:left;" >
<div style="position:absolute;left:50px;top:20px;width:40px;" >
<input class="TxtArea" style="width:40px;" type="button" name="" value="+ 5" onclick="zxcBar('T2','+5%','MyFunction');">
<input class="TxtArea" style="width:40px;" type="button" name="" value="- 5" onclick="zxcBar('T2','-5%','MyFunction');">
<input class="TxtArea" style="width:40px;" type="button" name="" value="0%" onclick="zxcBar('T2','0%','MyFunction');">
</div>
<div id="T2" style="position:relative;width:20px;height:120px;background-color:#FFFFCC;border:solid black 1px;" ></div>
</div>
<br>
<br>

</body>

</html>

thesmart1
09-01-2006, 10:41 PM
okay, but how would I make it execute function1() for example when the first bar reaches 80%?

vwphillips
09-02-2006, 12:03 AM
function function1(){
alert('Bang');
}

function MyFunction(obj,percent){
if (percent==80&&obj.id=='T1'){ function1(); }
}

thesmart1
09-02-2006, 05:12 AM
OK thanks! And I got the random function thing with a script on w3schools.com. Thanks for all your help (and patience)! :D :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum