3 Replies - 2136 Views - Last Post: 03 October 2017 - 08:02 AM Rate Topic: -----

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

How can I turn this javascript 'move' function into real time

Posted 01 September 2017 - 09:00 AM

How to add a progress bar?

I am using bootstrap, VB, javascript

I have a button, which linked to progress bar.

issues is that this bar is not in real time.

How can I turn this javascript 'move' function into real time progress bar?




<asp:LinkButton  ID="AdvSearchB" runat="server">Search</asp:LinkButton>

         <div id="myProgress" style="width: 100%; background-color: #ddd;">
            <div id="myBar" style="  width: 0%;height:3px;" class="progress-bar-danger" role="progressbar"></div>
        </div>
		

      <script>
          $(document).ready(function () {
              $('.AdvSearchBC').click(function () {
                  move();
              });
          });

          function move() {
              var elem = document.getElementById("myBar");
              var width = 1;
              var id = setInterval(frame, 10);
              function frame() {
                  if (width >= 100) {
                      clearInterval(id);
                  } else {
                      width++;
                      elem.style.width = width + '%';
                  }
              }
          }
  </script>


Is This A Good Question/Topic? 0
  • +

Replies To: How can I turn this javascript 'move' function into real time

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5073
  • View blog
  • Posts: 13,696
  • Joined: 18-April 07

Re: How can I turn this javascript 'move' function into real time

Posted 01 September 2017 - 02:23 PM

Well right now you have it setup to be an interval it calls the frame function. All you need to do to make it real time is that when you are doing some work, at appropriate times, you can call the frame function. I don't know if you were planning to tie this into something done on the server side or not, but for a pure Javascript implementation all you need to do is call frame() when you need it to update. Maybe have frame take an integer of how far to progress the bar as well.

:)
Was This Post Helpful? 1
  • +
  • -

#3 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

Re: How can I turn this javascript 'move' function into real time

Posted 03 October 2017 - 07:14 AM

View PostMartyr2, on 01 September 2017 - 02:23 PM, said:

Well right now you have it setup to be an interval it calls the frame function. All you need to do to make it real time is that when you are doing some work, at appropriate times, you can call the frame function. I don't know if you were planning to tie this into something done on the server side or not, but for a pure Javascript implementation all you need to do is call frame() when you need it to update. Maybe have frame take an integer of how far to progress the bar as well.

:)/>



Thanks, still pretty new to javascript. Do you a link i can see as example as how its done?
Was This Post Helpful? 0
  • +
  • -

#4 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

Re: How can I turn this javascript 'move' function into real time

Posted 03 October 2017 - 08:02 AM

So i did try to replace 10 with width variable. but still no luck with real time loading

      <script>
          $(document).ready(function () {
              $('.AdvSearchBC').click(function () {
                  move();
              });
          });

          function move() {
              var elem = document.getElementById("myBar");
              var width = 1;
              var id = setInterval(frame, width);
              function frame() {
                  if (width >= 100) {
                      clearInterval(id);
                  } else {
                      width++;
                      elem.style.width = width + '%';
                  }
              }
          }
  </script>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1