Member Avatar for muktidaniweb

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 by TrustyTony because: fixed formating
  • 2 Contributors
  • 1 Reply
  • 157 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by madmital
Member Avatar for madmital

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.