optimize jquery progress bar

this is part 49 of jQuery tutorial in this video we'll discuss how to enhance and optimize the progress bar that we created in part 48 so please watch part 48 before proceeding this is the progress bar that we created in a previous video session there are two problems with this progress bar notice when we select 30 it starts counting from 1 and goes till 30 that's great but when we select 16 we wanted to count from 31 till 60 but instead it's going to start from 1 and then goes all the way till 60 look at that so that's one problem and the other problem is when we wanted to count backwards so we want to go from 60% to 30% so we expect it to count it backwards from 60 till 30 but instead of that it's going to again start at 1 and go till 30 so let's see how to solve these two problems that ease and why it always starts at 1 is because if you look at the code that we worked with in the previous video session notice the counter is always set to 1 that's the reason why it's always starting at 1 now if we can somehow remember the previous percentage value that the user has selected then we can solve the problem because instead of starting at 1 we can start at the previous percentage value that the user has selected and then continue counting till the current percentage right so to keep track of previous percentage and current percentage I'm going to create two variables so let's name this previous percentage and let's initialize that to zero similarly let's create another variable and let's name this current percentage and when we click the button so previous percentage equals whatever we have in the current percentage variable and current percentage equals whatever the user has selected from the drop-down list so now we are keeping track of both the values the value that the user selected last time and the current percentage value at the moment if you look at this animate progress bar function it has got only one percentage value is the current percentage so let's actually change the value I mean name of the parameter current percentage and in addition to current percentage we also want to pass previous percentage to this function so now this function has got two parameters so this one was current percentage so let's change the name to current percentage and the counter instead of starting at one let's start at previous percentage and go to current percentage right and here you know notice that our function now has two parameters but when we are calling the function we only passing value for one parameter instead let's go ahead and pass the values for both the parameters and the values are present in these variables so let's use those variables so previous percentage and current percentage so let's save the changes reload this page and look at this when we select 30 it's going to start from one go till 30 that's great now when we select 60 look at what's going to happen it's going to continue from 31 to 60 and that's what we expect now let's count backwards let's go from 60 till 30 look at this it's going to count backwards but instead of going all the way till 30 it's actually stopping at 31 so this means when our previous percentage value is greater than the current percentage so here the previous percentage was 60 and the turan percentage is 60 so we want to count backward so when the previous percentage is greater than current percentage we want to subtract one from the current percentage and that's going to solve the problem so within our code here I'm going to check F previous percentage if that is greater than current percentage then what we want to do is current percentage minus equals one so basically we're subtracting one from the current percentage so let's save the changes reload the page and look at this let's go till 50 so it should start from one go till 50 now let's count backwards so it should not stop at 21 it should go till 20 let's count there 10 look at that alright so to achieve this look at the amount of code that we have written it's a lot of code one of our youtube subscribers by name Optim a he has sent me as you know the version of code which does exactly the same thing but his version of the code is much smaller easy to read and cleaner let's rewrite this program using his version thanks to him for his valuable contribution so with his version we don't require these two variables here so let's get rid of that and since we don't have those two variables we don't need these two variables as well so what I'm going to do is copy this and animate progress bar to this function we are only going to pass the value that the user has selected from the drop-down list so these two lines are going to go and this animate progress bar function doesn't require two parameters it only requires the current percentage that the user has selected so that's going to stay there now if you look at this animate function look at this we're using you know there are two variations of this animate function so if you look at the jQuery documentation so this is the first variation where we specify the properties that we want to animate using a JSON object so here we want to animate the vet so we're using a JSON object and specifying the property name and a value for that one and then we are you saying you know the next parameter which is the duration and passing 2,000 milliseconds so here we are using you know this variation at the moment within our example now we have another variation so this variation of the animate method notice that you know here we specify the properties and the additional options that we want to pass to the animate method both using a JSON object so I'm going to use this variation in a bit you will understand why so here instead of passing beautician like that I'm going to use a JSON object and when we use JSON object to specify the options now we want to specify duration so the name of the option is duration okay so duration we want that to be 2,000 milliseconds and in addition to that I also want to specify the step option right and notice what does this option represents this option represents a function and the function that is associated with the step option is called at every step in the animation right and notice this function has got two parameters now and tween in a bit we'll discuss what those two parameters are first let me implement the code and then we'll quickly walk over that so I'm going to use the step option and this represents a function so this is going to be an anonymous function and you know this is going to do pretty much similar to what this function is doing so I'm going to copy this code and from the jQuery documentation remember this D function that is associated with the step option has two parameters now when tween so I'm going to pass those two parameters here in a bit we'll discus what these parameters mean okay and instead of using count that we don't have counter anymore here I'm going to use this now parameter so I'm going to use now divide that by 500 and multiply whatever result we get by 100 okay and that means we can get rid of all of this code okay so let's format this a bit look at the amount of code now it's a lot less than what we have previously okay so let's save the changes let us look at this in action let's see if this is going to work the same way look at that first let's select 30 so it should start from one go till 30 and now when we select 60 it should continue from 31 till 60 look at that it works and now let's count backwards so we want this to go from 60 till 30 look at that it's counting backwards and it goes all the way till 30 now let's select 10 it should go from 30 till 10 okay so it's working but the amount of code that we have to write is a lot less now let's look at what's going on here so this is pretty straightforward so we are animating the width of the inner development right now let's take an example let's say when we select current percentage from the drop-down list as 10 right when we select 10 what gets passed to this function is 10 right now here we want to animate the width of the inner development now the firth you know of the outer div that we have is 500 so inside that in outer day we have another day which is in a div so the width of that one initially what is the width the width of the inner div is zero so we want to set the width of the inner development to 10% of 500 pixels which is the width of the outer devil right so 10% of 500 pixels what is that 10% of 500 is 50 pixels so we want to increase the width from 0 till 50 pixels so that's what this is going to do we're passing the percentage and we are computing the width of the in a development the final width okay so now the width is going to be increased from 0 till 50 so at every step of the animation while it's increasing it you know the function that is associated with the step option is called and this now parameter is going to contain that value which we are animating so actually let's log the value of that now parameter to the console and we can see what we get so console dot log and let's write the value to the console window right so let's reload this page let's launch developer tools so we are on the console window and let's click start animation so look at that we get the value of the width look at that the vet starts at zero zero point one two zero point one nine it goes all the way till 50 right because we selected 10 percent 10 percent of 500 is 50 so it starts at zero and go till 50 and we get in at every step of the animation you know whatever width it is increasing that is passed to this function and look at what we are doing here as we are increasing the width we are passing the null value so now contains the width you know whatever you see here that is what is passed you know to this function so when 0.13 is passed what we are doing here we are dividing that by 500 and multiplying it by 100 now to understand this properly let's take the example of 10 when the value is 10 and the percentage value is 10 you know the you know this no value will be 50 now to get the percentage you know what is 50 pixels of 500 what percentage is 50 pixels of 500 how do we compute that you know divide that 50 by the total which is 500 so now which contains 50 we are dividing that by 500 and then multiply that by 100 that is going to give us the percentage so that's a simple percentage calculation right so and we are taking ceiling here so when we take ceiling what's going to happen let's take for example you know current percentage when it is zero zero divided by 500 is zero and that multiplied by 100 is zero and ceiling of zero is zero now when we pass let's have one for example 1 divided by 500 into 100 so what do we get there 1/5 right ceiling of 1/5 is 1 but then if you look at the values that are being you know logged here it's not incrementing it as 0 1 2 instead it's doing a very small increment 0.12 where zero point one nine and then it goes to point two seven and it does it all the way till fifty pixels right now if we select for example 20 it should do it till 100 look at that so and here we have the formula C link it will give us the nearest you know higher value the integer okay so pretty straightforward so now parameter so if you look at the function that is associated with this step option that function gets called you know at each step in the animation and that method has two parameters now when tween now contains the value being animated in our example we are animating the width of the inner development so it contains the width value and tween is a complex object and Escott several properties and in this table right here we have a few properties listed it has got element property and that represents the Dom element that is being animated in our case in a development is being animated and 2 has also now when the end parameter our properties no parameter represents the value the animation is currently at and property represents the value the animation will end at and in addition to these three there are several more and if you want to look at all these properties of this complex object you know you can set a break point and inspect that object in fact you know let's actually browse the web page using Internet Explorer and we can actually set a break point and see the values so let's set that as default let's throw in a break point here and let's run this in debug mode so now it's going to stop at that break point so let's leave that at 10 and click start animation and look at this when we hover over tween look at that it has got several properties you can see element property and if I expand that and if I go to the ID property we can actually see the ID look at that it's in a day that's the element that is being animated similarly we have now when the end now represents you know actually starts at zero and it ends at you know 50 when the width of the unitive is 50 that's when the animation starts in addition to that we have several other parameters I mean properties thank you for listening and have a great day

Channel: kudvenkat

Views: 29,080

Keywords: jquery progress bar countdown, jquery countdown progress bar example, jquery progress bar percentage text, jquery progress bar with percentage example, jquery tutorial, jquery tutorial for beginners

Id: wAUmwTiUOng

Length: 15min 57sec (957 seconds)

Published: Thu May 21 2015