| | |
Javascript Progress Bar flickers
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jul 2005
Posts: 11
Reputation:
Solved Threads: 0
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>
<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>
Last edited by muktidaniweb; Aug 12th, 2005 at 4:49 am. Reason: Full content not displayed
•
•
Join Date: Jun 2005
Posts: 107
Reputation:
Solved Threads: 3
Looks to me like what causes it is the resizing and thus moving of the elements.
Maybe you could use DIVs instead, like this:
Maybe you could use DIVs instead, like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
![]() |
Similar Threads
- progress bar (Visual Basic 4 / 5 / 6)
- progress bar problem in vb (Visual Basic 4 / 5 / 6)
- an animated STATUS BAR, or PROGRESS BAR, (Community Introductions)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Difference between Firefox and IE
- Next Thread: What is wrong wtih my css?
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart checkbox child close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software unicode w3c web window windowofwords wysiwyg \n





