I have created a progress bar .The Progress bar works fine. The only issue is that it flickers. I am not able to find out why that is happeneing. Can anyone tell me what is wrong in my code.Below is my code.

<html>
<script>
var secondWindow = false;
function ProgressBar(sLength) {

var BarLength = 100;
var iLength = parseFloat(sLength);
var Bar = parseInt(iLength); 
if(Bar==0)Bar=1;
var Trough = (BarLength - Bar);
if(Trough==0){Trough=1;Bar=99;}

if(Bar >99) {Bar=99; Trough=1;}
if(Trough <0) {Trough=1;Bar=99;}

var leftVal = (screen.width-490) / 2;
var topVal = (screen.height-20) / 2;
var cellLayer="id1";


if(secondWindow == false) { 

if (navigator.appName=="Microsoft Internet Explorer"){

var theWindow = 

'width=490,height=20,left='+leftVal+',top='+topVal+',menubar=no,toolbar=no,location=no,personalbar=no,status=no,scrollbars=no

,directories=no,resizable=no';
Window02 = window.open('','wind',theWindow);
Window02.document.open();
Window02.document.write('<html><head><script>window.onunload=function(){window.close();} <\/script><title>RezTrip 

Administrator Application - Please Wait.....Page is loading.</title></head><body bgColor=#EAF2FF><form name=f1><br><font 

face=Arial size=1 color=#FFFFFF><input type=text id="t1" size=1 value="Please Wait.....Page is loading." 

style="background:#3366CC;border-style:solid;border-color:black;color:white;font-size:10px;"></font><input type=text size=1 

id="t2" style="background:silver;border-style:solid;border-color:black;font-size:10px;"></form></body></html>');
Window02.document.close();

}
secondWindow = true;
}
if (secondWindow == true){
if (navigator.appName=="Microsoft Internet Explorer"){

if(!Window02.closed){
if(Bar <0 || Trough<0) alert("hello");
Window02.document.getElementById("t1").size=Bar.toString();
Window02.document.getElementById("t2").size=Trough.toString();

}

}

secondWindow = true;
}

} 
function demo(){
progressCounter=0;
progressCount=parseFloat(100/250);
for(i=0;i<250;i++){
progressCounter+=progressCount;
ProgressBar(progressCounter);
}
if (navigator.appName=="Microsoft Internet Explorer")
{
if(!Window02.closed)
    Window02.close(); 
}
secondWindow = false;
}
</script>
<body>
<input type=button value="show Progress Bar" onClick=demo()>

</body>
</html>

Edited 3 Years Ago by pyTony: fixed formating

Looks to me like what causes it is the resizing and thus moving of the elements.
Maybe you could use DIVs instead, like this:

<html>
<script>
var secondWindow = false;
function ProgressBar(sLength) {

var BarLength = 400;
var iLength = parseFloat(sLength);
var Bar = parseInt(iLength); 
if(Bar==0)Bar=1;
var Trough = (BarLength - Bar);
if(Trough==0){Trough=1;Bar=99;}

if(Bar >99) {Bar=99; Trough=1;}
if(Trough <0) {Trough=1;Bar=99;}

var leftVal = (screen.width-490) / 2;
var topVal = (screen.height-20) / 2;
var cellLayer="id1";


if(secondWindow == false) { 

if (navigator.appName=="Microsoft Internet Explorer"){

var theWindow = 

'width=490,height=20,left='+leftVal+',top='+topVal+',menubar=no,toolbar=no,location=no,personalbar=no,status=no,scrollbars=no,directories=no,resizable=no';
Window02 = window.open('','wind',theWindow);
Window02.document.open();
Window02.document.write('<html><head><script>window.onunload=function(){window.close();} <\/script><title>RezTrip Administrator Application - Please Wait.....Page is loading.</title></head><body bgColor=#EAF2FF><div id=t1 style="position:absolute; top:10; left:10; background-color:#000000; z-index:2; height:20px;"></DIV><div id=t2 style="position:absolute; top:10; left:10; background-color:#cccccc; z-index:1; height:20px; border:#ff0000 1px solid;"></div></body></html>');

Window02.document.close();
}
secondWindow = true;
}
if (secondWindow == true){
if (navigator.appName=="Microsoft Internet Explorer"){

if(!Window02.closed){
if(Bar <0 || Trough<0) alert("hello");
Window02.document.getElementById("t1").style.width=(Bar * (BarLength/100)).toString();
Window02.document.getElementById("t2").style.width=BarLength;

}

}

secondWindow = true;
}

} 
function demo(){
progressCounter=0;
progressCount=parseFloat(100/250);
for(i=0;i<250;i++){
progressCounter+=progressCount;
ProgressBar(progressCounter);
}
if (navigator.appName=="Microsoft Internet Explorer")
{
if(!Window02.closed)
Window02.close(); 
}
secondWindow = false;
}
</script>
<body>
<input type=button value="show Progress Bar" onClick=demo()>  
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.