I need to create a progress bar to sow received funds/total funds to show % progress as a bar.
I have two fields that a user enters values number and a Js that auto formats it while data entry is done. I.E when user enters 1200500 the script changes it to $ 1,200,500.00. It inserts the $ sign and space, the thousand separator and the decimal separator.
The problem is that the progress element does not work because of the extra characters.
<progress value="total_field" max="raised_field"></progress>
So now I need a script to strip the "$ " and the thousand separator out.
Here is the script that formats the data entry....
// this shows options being passed - details on allowed options are below
jQuery(function($) {
$('.number_format').autoNumeric('init', {aSign:'$ ', pSign:'p' });
});
and the class
class="number_format" data-a-sign="$ " data-a-dec="," data-a-sep="."
I then also need to style the progress bar to look like the attached picture.
Thanks.
Hi,
I see you have explained your project well enough. I also see that you are using jQuery to format the number.
Can I ask you to provide the URL of the page so I can check out the code? I'm ready to start immediately.
Kind regards
pixelke
Dear Sir,
I am really interested to work on this project, I can start the work now , and can provide the best services from my end.
Please come on chat to discuss more about the project.
Regards,
Akil Khatri
Hello sir,
I understood you need some javascript and jquery help with your progress bar , i am an experienced web designer and i can help you.
Waiting for your positive reply.
Thank you
Bidding as low as possible since I'm looking for a good review to get started here :) I believe the task is within my capability.
I was thinking, wouldn't it be easier if you take the raw value entered before formatting it? and to display the formatted value separately?
I know exactly what it needs to be done, and I can write good quality Javascript (raw, or using jquery, or other frameworks if needed).
I also know how to use css to achieve the progress bar effect described in the image.