Announcement
Collapse
No announcement yet.
Dynamic Progress Bar:
Collapse
X
-
Re: Dynamic Progress Bar code implementation
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>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}
#barbackground{
background-color:black;
}
-->
</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/(duration*20))
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"><!--
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</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>
</body>
</html>
hth
A3D
Comment
-
Your problem in this bit of code:
<p align="center"><script language="JavaScript"><!--
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</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>
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:
Code:[size=1]<script language="JavaScript1.2"> if (document.all){ divs= '<div id="baranchor" style="position:relative;width:200;height:20;visibility:hidden">'; [color=red]note: this line should not be broken, the forum inserted this line break[/color] 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>[/size]
Last edited by JohnKrutsch; Jun 17, 2002, 10:38 AM.
Comment
-
Progress Bar Working! Now...
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>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}
#barbackground{
background-color:black;
}
-->
</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/(duration*20))
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
Comment
-
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.
Comment
Comment