944,085 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Javascript Progress Bar flickers
Ad:
Permalink
Aug 12th, 2005
0

Javascript Progress Bar flickers

Expand Post »
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>
Last edited by muktidaniweb; Aug 12th, 2005 at 4:49 am. Reason: Full content not displayed
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
muktidaniweb is offline Offline
11 posts
since Jul 2005
Permalink
Aug 12th, 2005
0

Re: Javascript Progress Bar flickers

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <script>
  3. var secondWindow = false;
  4. function ProgressBar(sLength) {
  5.  
  6. var BarLength = 400;
  7. var iLength = parseFloat(sLength);
  8. var Bar = parseInt(iLength); 
  9. if(Bar==0)Bar=1;
  10. var Trough = (BarLength - Bar);
  11. if(Trough==0){Trough=1;Bar=99;}
  12.  
  13. if(Bar >99) {Bar=99; Trough=1;}
  14. if(Trough <0) {Trough=1;Bar=99;}
  15.  
  16. var leftVal = (screen.width-490) / 2;
  17. var topVal = (screen.height-20) / 2;
  18. var cellLayer="id1";
  19.  
  20.  
  21. if(secondWindow == false) { 
  22.  
  23. if (navigator.appName=="Microsoft Internet Explorer"){
  24.  
  25. var theWindow = 
  26.  
  27. 'width=490,height=20,left='+leftVal+',top='+topVal+',menubar=no,toolbar=no,location=no,personalbar=no,status=no,scrollbars=no,directories=no,resizable=no';
  28. Window02 = window.open('','wind',theWindow);
  29. Window02.document.open();
  30. 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>');
  31.  
  32. Window02.document.close();
  33. }
  34. secondWindow = true;
  35. }
  36. if (secondWindow == true){
  37. if (navigator.appName=="Microsoft Internet Explorer"){
  38.  
  39. if(!Window02.closed){
  40. if(Bar <0 || Trough<0) alert("hello");
  41. Window02.document.getElementById("t1").style.width=(Bar * (BarLength/100)).toString();
  42. Window02.document.getElementById("t2").style.width=BarLength;
  43.  
  44. }
  45.  
  46. }
  47.  
  48. secondWindow = true;
  49. }
  50.  
  51. } 
  52. function demo(){
  53. progressCounter=0;
  54. progressCount=parseFloat(100/250);
  55. for(i=0;i<250;i++){
  56. progressCounter+=progressCount;
  57. ProgressBar(progressCounter);
  58. }
  59. if (navigator.appName=="Microsoft Internet Explorer")
  60. {
  61. if(!Window02.closed)
  62. Window02.close(); 
  63. }
  64. secondWindow = false;
  65. }
  66. </script>
  67. <body>
  68. <input type=button value="show Progress Bar" onClick=demo()>  
  69. </body>
  70. </html>
Reputation Points: 10
Solved Threads: 5
Junior Poster
madmital is offline Offline
119 posts
since Jun 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript not working under Mac! Why O why?!
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: What is wrong wtih my css?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC