Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

Actually, I was at updating my WindowsXP box the other day and was looking at their XP progress bar that scrolls as it is searching for updates for your computer. Well, I wasn't happy with the way it was scrolling and thought I could do better, so I did! :)

Anyway, the bar's width, height, colors, border attributes, number of blocks, and scrolling speed are all customizable. The script is designed to let you use multiple bars on the same page with each having a different look. The effect works in Internet Explorer 5+, Netscape 6+, and Mozilla/Firebird browsers, but performs the best in Internet Explorer, especially when using more than one bar.

The script does not use any event handlers so it should play nice with other scripts without modification.

There are ten different parameters which controls how each bar looks and acts: var xyz = createBar( width, height, background_color, border_width, border_color, block_color, scroll_speed, block_count, action_count, action_string )

xyz - An arbitrary variable name to store the bar reference and must be unique. This variable will have a few different methods (explained later) which can be used to control some of each bar's behavior. This variable IS REQUIRED if you wish to use these methods. However, if you do not plan to use the methods, then the variable assignment is not necessary, but it won't hurt to use it anyway.
width - Total width of the entire bar in pixels.
height - Total height of the entire bar in pixels.
background_color - Background color of the bar. Use valid CSS color or HEX color code value.
border_width - The width of the border around the bar, in pixels.
border_color - The color of the border around the bar. Use valid CSS color or HEX color code value.
block_color - The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or HEX color code value.
scroll_speed - The delay, in milliseconds, between each scroll step. Use smaller values for faster scoll speeds.
block_count - The total number of blocks to use.
action_count - The number of times the bar is to scroll before action_string is performed.
action_string - The javascript function, in string form, to execute once the bar has scrolled action_count times. Set this to an empty string to do nothing. If doing nothing, you can use any number as action_count.

Each bar, when assigned to a variable has several control methods you can call directly via javascript or in a link. Each of these is described below, along with an example which will control the bar above. For reference, the bar has been assigned to the variable bar2.

Method	Example	Description
var.toggleBar()	toggle pause	This method will toggle the pause status of the bar. If it is paused, it will un-pause it, and vice-versa. The code for the link at left is: <a href="javascript:bar2.togglePause()">toggle pause</a>
var.hideBar()	Hide Bar 2	This method will show the bar. If it is already visible, it will do nothing. The code for the link at left is: <a href="javascript:bar2.hideBar()">Hide Bar 2</a>
var.showBar()	Show Bar 2	This method will hide the bar. If it is already hidden, it will do nothing. The code for the link at left is: <a href="javascript:bar2.showBar()">Show Bar 2</a>

WinXP Progress Bar I

Instructions:

Copy and paste the following script in the HEAD section of your page:

<script language="javascript" src="xp_progress.js"></script>
Upload the "xp_progress.js" file to your server.
Add xp_progress bar(s) to your page by invoking the createBar() function, surrounded by javascript tags, wherever you want the bar to appear in your page. Example:

<script language="javascript">
var bar2=createBar(500,10,'black',1,'black','white',45,15,2,'bar2.togglePause()');
</script>