Click here to Skip to main content
Click here to Skip to main content

Javascript Progress Bar

, 11 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
how to create a manual and automatic progress bar using JavaScript



If you look for a pretty javascript progress bar to use as a printing progress bar or any other use and you need it to work manually and / or automaticlly the read this article.

Introduction

I needed to build a custom progress bar that could be progress automaticly and manualy by code.
This progress bar can be helfull as a printing progress bar or any other usfull use.
the progerss bar get the maxStep counetr and print the right number of bullets per step.
max bullets per progress bar determind by the size of the background image and can be change in javascript file by the parameter numOfBullets.

The progress bar has two operation mode:

1. Manual - by calling NextStep method.
2. Automatic - activate NextStep method automaticlly every configured interval.

The progress bar contain some usfull methods:

1. (constructor)(maxStep) - get the maxStep parameter (default is 1)
2. SetProgressBarContainer(progressBarContainer) - get the progress bar DIV container. where all the bullets will be place.
3. SetMaxStep(maxStep) - get the maxStep parameter of the progress. (if we need to change the maxStep in after initiance).
4. NextStep() - show the next bullets for the next step.
5. Auto() - start automatic progressing of the pgrogress bar bullets.
6. Stop() - stop the automatic progress bar.
7. Reset() - reset parameters.


class global parameters :

1. numOfBullets - the number of bullets thet can be entered in the progress bar backgound.
2. timeInterval - the time interval in seconds to move nextStep to use in auto mode.

Background

The javascript file contain a progress bar class that create using the open source of Prototype JavaScript Framework .
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Using the code - Embedding and including

First include the prototype js file and the progress bar js file.

 		
<script type="text/javascript" language="javascript" src="Js/prototype-1.6.0.2.js"></script>
<script type="text/javascript" language="javascript" src="Js/ProgressBar.js"></script>

Place in html page the progress bar div and name it progressBarContainer. In the body tag set the onload method.
<body  önload="onload()">
and the implemtation is:
//handle of the maxStep textbox
var maxStep;

function onload()
{
	//handle of the maxStep textbox
	maxStep = $("maxStep");
	//get progressBar container div
	var progressBarContainer = $("progressBarContainer");
	//create new instance of progressBar class and pass the number of max step
	progressBar = new ProgressBarClass(maxStep.value);
	//set progressBar container div
	progressBar.SetProgressBarContainer(progressBarContainer);
	//set callback function to be notify when step changed
	progressBar.OnStepChange = OnStepChange;	
}
Create a buttons for start, stop, reset,next the progress bar and attach them the next methods.

function Auto()
{
	progressBar.Auto ();
}
function Next()
{
	progressBar.NextStep ();
}
function Stop()
{
	progressBar.Stop ();
}
function Reset()
{
	progressBar.Reset ();
	$("pages").innerHTML = "0 pages printed";
}
function SetMaxStep()
{	
	progressBar.SetMaxStep(maxStep.value);
}
There progress bar class also can get a delegate to a user method which activate on any stepChange and contain the current step

//set callback function to be notify when step changed
progressBar.OnStepChange = OnStepChange;

function OnStepChange(currentStep)
{	
	$("pages").innerHTML = currentStep + " pages printed";
}

Thats it.
I hope that you find it helfull like me.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Lazmi ofer
Software Developer
Israel Israel
No Biography provided

Comments and Discussions

 
QuestionNot Working Pinmembermparvez20-Sep-12 1:50 
AnswerRe: Not Working PinmemberLazmi ofer20-Sep-12 1:55 
GeneralDoesn't work with Firefox PinmemberDennis Marks27-Oct-10 6:02 
GeneralDoesn't work with Chrome PinmemberBrooky Brook12-May-10 9:35 
Generalgood one PinmemberS Gnana Prakash16-Apr-10 12:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 11 Oct 2008
Article Copyright 2008 by Lazmi ofer
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid