www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24

Thread: [RESOLVED] progress bar drawing

  1. #16
    Join Date
    Feb 2013
    Posts
    12
    I recommend you to read the article below if you want to understand the server side work. it is the whole work that i handle.

    http://www.brc-electronics.nl/ethernet

    By the way i have tried this but it doesnt work.
    Code:
    <progress id = "progressBar" max = "100" value = "%! port-adc2"></progress>

  2. #17
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    I didn't read it all, but it seems, that it should execute a pre-defined function, if it finds the %! symbol combination. I don't know, why it doesn't work. Maybe try to omit the doublequotes or make a space after it, so the %! stands alone surrounded by whitespace. Or maybe it will do it only once on the page. However, they encouraged that meta-tag approach, too. It appears, you can even omit the URL part and it will refresh itself. Did you try the JS method with setTimeout line?

  3. #18
    Join Date
    Feb 2013
    Posts
    12
    yes i have tried with setTimeout line but then the links on the webpage doesnt work. my webpage sends data to the circuit by these links. with the settimeout line the page refreshes and these links doesnt work.

    by the way i have learned ajax alittle bit, and edited the code like below:

    Code:
    <script>
      function updateStatus( pString ) {
                    document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
                    }
                var amountLoaded = 0,
                    interval;
                window.onload = function() {
                    interval = setInterval( function(){
    					amountLoaded = parseInt( document.getElementById( "demo" ).childNodes[ 0 ].nodeValue, 10 );
    				    if ( amountLoaded === 512 ) {
                            clearInterval( interval );
                            updateStatus( "done :-)" );
                            } else {
                                updateStatus( amountLoaded + "%" );
                                }
                        document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
                        }, 100 );
                    };
               </script>
    <script>
    function loadXMLDoc()
    {
    	
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("demo").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","adc.shtml",true);
    xmlhttp.send();
    
    }
    </script>
    <div id="demo2"><h2>%! port-adc2</h2></div>
        <button type="button" onclick="loadXMLDoc()">Change Content</button>
    after the first click on the chage buton the progress bar disappears and doesnt go back?

  4. #19
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Ok, if there's some more stuff on the page, then probably AJAX is the way. I'm guessing trouble with adc.shtml, what are the exact contents of it? If it is a whole webpage with headers and stuff, that might be the culprit. By using innerHTML you force the browser to parse again all the contents of it. If you want to add just text, you should go with nodeValue:

    document.getElementById("demo").childNodes[ 0 ].nodeValue=xmlhttp.responseText;

    also, you don't have to worry about IE5/6/7, as these do not support <progress> anyway. You could replace it with just variable width <div> (rectangle), if you need to support them.

  5. #20
    Join Date
    Feb 2013
    Posts
    12
    the exact contents of adc.shtml is %! port-adc2 .

  6. #21
    Join Date
    Feb 2013
    Posts
    12
    ok , i have edited the code and it works now. the last thing is how to omit the change buton and load this function forever auto

    Code:
    <script>
    function loadXMLDoc()
    {	
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("demo").childNodes[ 0 ].nodeValue=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","adc.shtml",true);
    xmlhttp.send();
    }
    </script>

  7. #22
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Well, i'd go with the setInterval again, since you can decide when to stop sending the requests. Use the exact same JS as in post #18, but add the function call to the else branch:

    ...
    updateStatus( "done :-)" );
    } else {
    updateStatus( amountLoaded + "%" );
    loadXMLDoc();
    }
    document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
    ...

    But you should probably change the interval itself, too, because every 100ms is way too much requests. Change it to 1000 or 2000 or so...

  8. #23
    Join Date
    Feb 2013
    Posts
    12
    your last reccomend solved the last problem. thank you for precious helps.

  9. #24
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    On top of those comments there is a button Thread tools, mark this as Resolved.

    Also - you are welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles