Helpful Information

Category: JavaScript programming

Dynamic Progress Bar:

I am having trouble setting the "post action to carry out " in the code for the Progress Bar script. Where do I put it?

I get a blank html page and script error�"Syntax error" and " 'baranchor' is undefined" error. I need help!

http://www.dynamicdrive.com/dynamicindex11/dhtmlprogress.htm

Thanks,
A3D

We would have to see how you have implemented the code on your page in order to effecitvely help you.

I created a test HTML page in my editor (FrontPageExpress) to try it out�here's the page code:

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Untitled Normal Page</title>
<style>

</style>
</head>

<body bgcolor="#FFFFFF">
<script language="JavaScript1.2">

/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
/

//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
window.location="http://www.dynamicdrive.com"
}

///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}

window.onload=initializebar
</script>

<p> </p>

<p> </p>

<p> </p>

<p align="center"><script language="JavaScript"></p>
</body>
</html>

hth
A3D

Your problem in this bit of code:

<p align="center"><script language="JavaScript"></p>

You have two javascript tags and the clossing comment tag is malformed and out of place, this did the trick for me when I tested it:

<script language="JavaScript1.2">
if (document.all){
divs= '<div id="baranchor" style="position:relative;width:200;height:20;visibility:hidden">'; note: this line should not be broken, the forum inserted this line break
divs+='<div id="barbackground" style="width:200;height:20;z-index:9"></div>';
divs+='<div id="bar" style="width:200;height:20;z-index:10"></div>';
document.write(divs+'</div>');
}
</script>
<ilayer name="baranchorNS" visibility="hide" width="200" height="20">
<layer name="barbackgroundNS" bgcolor="black" width="200" height="20" z-index="10" left="0" top="0"></layer>
<layer name="barNS" bgcolor="blue" width="200" height="20" z-index="11" left="0" top="0"></layer>
</ilayer>
</p>

John,

Thanks for the help � I now have the progress bar working, but I need to code the post action function and I can't get it to work. Upon completion of the bar, I would like a URL to open in a new window automatically with no user input necessary. Can you help me?

I believe I need to insert something into the following bit of code:

<style>

</style>

<script language="JavaScript1.2">

/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
/

//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.dynamicdrive.com"
}

///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}

window.onload=initializebar
</script>

Any help would be greatly appreciated!

Regards,
A3D

Try changing this:

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.dynamicdrive.com"
}

to this:

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
window.location="http://www.dynamicdrive.com"
}

You need to uncomment the command to go to the new page.

John,

Thanks�that did it! I guess I need to learn at least the basics of JS and DHTML before I get any more scripts. Thanks for your replies and your expertise.

Regards,
A3D