JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Javascript Progress Bar flickers

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2005
Posts: 11
Reputation: muktidaniweb is an unknown quantity at this point 
Solved Threads: 0
muktidaniweb muktidaniweb is offline Offline
Newbie Poster

Javascript Progress Bar flickers

 
0
  #1
Aug 12th, 2005
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 107
Reputation: madmital is an unknown quantity at this point 
Solved Threads: 3
madmital madmital is offline Offline
Junior Poster

Re: Javascript Progress Bar flickers

 
0
  #2
Aug 12th, 2005
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>
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta browser bug checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC