minddust / bootstrap-progressbar Goto Github PK

http://jsbin.com/vivipuha/1/edit -- look at console

Because of this odd logic here decimal number inputs will work when the value was less than the previous transition goal; otherwise it will show round(value - aria-valuemin). What?!

I'm going to sleep let me know if the issue isn't clear enough

Love the work you've done here, making it easy for me to animate but am I missing something? This is just rendering the progress bars each starting at 0 so one always covers another instead of actually stacking them as expected.

<div class="progress">
  <div class="bar bar-success" aria-valuetransitiongoal="10"></div>
  <div class="bar bar-warning" aria-valuetransitiongoal="10"></div>
</div>

$('.bar').progressbar();

I love the vertical progress bar. Is it possible to render the progress after the page loads, automatically, without a click to trigger?

Thank you!

thanks !

I'm trying to make a progressbar which has a title inside and percentage value side of there.

So my markup is like this:

                    <!--Progress bar-->
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="95" aria-valuemin="0" aria-valuemax="100">
                            Title<span>95%</span>
                        </div>
                    </div><!--Progress bar-->

When I use this : $('.progress-bar').progressbar({display_text: 'center'}); my title goes away and the too. What I want is to keep my title and show the percentage value inside the . Is it possible?

Thanks
Sohan

Hello, first of all thank you so much for these great progress bars.

I would like to know what is the best way to include many progress bars on a single page each having different styles/options.

At the moment I am using inline javascript, is their a better way? something dynamic like using data attributes.

I have applied 'center' to the display_text variable, but as the progress bar animates from zero to targetgoal, I'm seeing the current value displayed on the right-hand edge of the progress bar.

I'm seeing this in Chrome, Firefox and Opera but not IE11 or Safari. Apart from that it's an excellent plugin. :-)

Thanks in advance.
Stu

File bootstrap-progressbar.js got a version 0.8.2 in header. Is it real or you just forgot to change number?

As some of you may noticed:

the styling in bs 3.2 for low percentage causes some flickering of the progressbar.

bs set's some min-width styles for aria-valuenow 0-2. (+ some more overrides)

the value calculation is based on the width of the bar so it's not that trivial to solve.

i decided to revert those changes in order to preserve correct progressbar functionality + appearance

After the progress bar animation is done, I need to reset it to zero.

I do this with: $('.progress-bar').width(0);

The animation reverses but the percentage stays 100%

go load the demo page, click the 25% trigger.. everything is good. click 100% then click 25%. notice the text is bolded/fuzzy.

Maybe it's nice to update the README.MD to include that :)

Hi,

thanks a lot for the work.

I wondering if it's possible to trigger the progress bar everytime we click on a button or we define a action (as if the progress bar was loaded the first time with the first values)
My issue is that once the progress bar is triggered, I can't reload it for the same div/class because the values have been saved.

For example, on the demo page, when you click on the "start" button, the progress bar is triggered. But if you click again on the "start" button, nothing happens ( first you have to reset the values to trigger once again the progress bar).
I would like the progress bar triggers everytime you click on the start button, with the animation, from the begining values. (for example, aria-valuemin ="0" data-transitiongoal="75")

Is it possible ? And how I can program this ?

Thanks

Hi,

I made a custum progressbar for my company and therefore i had to give the progressbar a position: relative. After that i couldn't give the text inside a padding. So it would be best for me if you put the text for example between a span so i can give padding to the span.

greetz
Jan

Hi,

When a progressbar is reset like $pb.attr('data-transitiongoal', 0), its done function will be triggered too early.

Please check this out.

Thanks.

i get percentage of a task and i want that percentage in style of progressbar that whenever i update thet percentage it automatically updated at style...how can i do this..?

I'm coding your library into my site, but when I try to use the vertical bars in any div (Even without a class or id and the div is the first element in the body tag) the vertical bar fails to show. It does show on my site when the vertical bar code (mind you I'm copying and pasting this from the demo site) is directly in the body tag.

I've looked at your site a bit to discover what's going on, but I haven't quite figured it out yet. PHP is my strong suit, not CSS, but I know my way around it fairly well. From what I can gather from other elements that seem to have disappeared from the site while programming, it's usually a positioning error. Hopefully you can tell us what's going on with all of that so everyone who has this issue can fix it.

Thanks again for the cool plugin!

Outside of a table the progress bars work and look fabulous, however if the display_text: 'center' is used on a progress bar contained within a table cell the span with "progressbar-back-text" is rendered mostly outside of view.

How can I go about disabling the animations completely? I am only looking to use this plugin for having centered text within bootstrap progress bars.

so remove the unused code that bricks

twbs/bootstrap#2516 (comment)

https://groups.google.com/forum/#!topic/dotless/zJd-5JJwmes

Currently, the progressbar is refreshed initially and upon window resize.
It would be useful to have a public method or event to allow manual/external refresh.
For instance when a screen element containing the progressbar is resized.

Hello there.
I was trying to combine datatables plugin and progress bars. On the first page of the table all bars work fine, but on the second page bars don't have values.
Haven't tried them with tabs, when they placed inside hidden tab, but i think there is the same issue.

Is there a way to update values dynamically?

inherit from the wrong less file

            bs_3_0_1:     { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.1.css' },
            bs_3_0_1_min: { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.1.min.css', options: { compress: true } },
            bs_3_0_2:     { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.2.css' },
            bs_3_0_2_min: { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.2.min.css', options: { compress: true } },
            bs_3_0_3:     { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.3.css' },
            bs_3_0_3_min: { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.0.3.min.css', options: { compress: true } },
            bs_3_1_0:     { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.1.0.css' },
            bs_3_1_0_min: { src: ['resources/bootstrap-progressbar-3.0.0.less'], dest: 'css/bootstrap-progressbar-3.1.0.min.css', options: { compress: true } }

http://api.jquery.com/addClass/

does the trick

Hey, when implementing my needs of your progressbar plugin, I came across a bug. I wrote some code to initially hide my progress bar so I could show it at a later point. It works like a charm but I randomly see a piece of my 'amount_format' text displayed at the very left of the bar.

I created a fiddle to simulate the problem: http://jsfiddle.net/kLvje0o6/4/

It happens almost randomly but I found a way to reproduce it 100%. if you risize the window between my function call 'progressTo(0)' and 'progressTo(1)', it will show.

I wrote a timeout in the fiddle, just resize your browser window (width or height) in the 4 seconds of the timeout when you run the fiddle.

Interesting to note that, if you resize it again after that, the piece of text dissapears again.

Screenshot: http://oi62.tinypic.com/2lsbm7k.jpg

When I initializing with setting { display_text: "center" }, it will looks like

------------------------------------------------
|      10%     |         10%                    |
------------------------------------------------

When I add vertical to the progress bar it goes away. I am using bootstrap 3.

Hi,

is it somehow possible to have your extension running with stacked progressbars like them on http://twitter.github.com/bootstrap/components.html#progress ?

Thanks for the cool extension! 😄

I have the progressbar in a dynamic list. I tried to place the script in many places and it never worked.
What am I missing?
Is there anyything like ...we need to place the below script in a specific place or declaring the variables upfront?
$(document).ready(function() {
$('.progress .progress-bar').progressbar({display_text: 'center'});
});

thanks so much for this wonderful tool. I've had the following problem with it. Following your instructions I get the error:

Uncaught TypeError: Object [object Object] has no method 'progressbar'

all other bootstrap js tools, like popovers, work fine on my page. I have also verified that bootstrap-progressbar.js and jquery-1.7.2.min.js load as they should

If you have any suggestions, I would greatly appreciate it. If not, no worries, and thanks again

Is it just me or the stripes are not working with vertical bars in v2.3.2?

Strange bug, progress bar is not changing dynamicly in Chrome 40 , Opera.

Code from demo:

<div class="progress">
    <div class="progress-bar" role="progressbar"></div>
</div>
<button type="button" id="trigger-0">0</button>
<button type="button" id="trigger-50">50</button>
<button type="button" id="trigger-100">100</button>

$(document).ready(function() {
    var $pb = $('.progress .progress-bar');
    $('#m-multi-trigger-0').click(function() {
        $pb.attr('data-transitiongoal', 0).progressbar({display_text: 'center'});
    });
    $('#m-multi-trigger-50').click(function() {
        $pb.attr('data-transitiongoal', 50).progressbar({display_text: 'center'});
    });
    $('#m-multi-trigger-100').click(function() {
        $pb.attr('data-transitiongoal', 100).progressbar({display_text: 'center'});
    });
});

When I am clicking button, progres bar % is not changing (ui also). But when i am clicking few more times at a row, some progress is strangely changing...

Can anyone help to solve, and answer the question what is wrong ? o_O
Thanks!

P.S.Firefox/IE - all ok.

Thanks so much for putting together this great plug-in. I don't know if it is possible or not, but is there a way to make transitions work in IE? Currently (in IE 8 and 9) the bar renders the full length immediately, regardless of the CSS transition time. I'm not sure whether this is something that is impossible due to the quirks of IE, just curious if there is any known work around.

Hi MindDuster!
thanks for the plugin.
I noticed the Done callback can and will fire before the last Update callback is fired.

This was an issue for me when queuing additional jquery page animation during update and when done.

Thanks!.

I'm trying to show a progress bar in my Angular reactive form to show the percentage of completion of the form.

I followed the bootstrap page to the 'T', but I just get a static grey bar.
How do I 'power' the progress bar ?

`

What I do not understand. I set display_text: 'fill' , text displayed in progress bar but just as a text without any div, so I can't use any css to custom it. What do progressbar-back-text class? When it is visible?

Hello,
I am using bootstrap and I get the following error
"Aspect ratio of should be 1
progressbar.js:2266 Incorrect aspect ratio of container <div class=​"c7" style=​"position:​ relative;​">​…​​ detected: 185.547px(width) / 559.094px(height) = 0.33187084819368473"
And copying himself, I think have a bug.

I would like to change the color of the progress bar at runtime with a transition. For example changing the color from 'progress-bar-success' to 'progress-bar-warning' or even a custom defined color. Currently it's only possible to abruptly change the color by changing the background or setting the class.

A suggestion on a smooth transition on a color change would be welcome.

Hi, I'm not good with js/jquery, can you please let me know why this isn't working? It removes/replaces the class before the progress bar loads.

I have this at the bottom of my html file, before the closing body tag, after bootstrap-progressbar.js:

<script>
    $(document).ready(function() {
        $('.progress .progress-bar').progressbar({
          done: $('.loading').removeClass('loading').addClass('loaded')
        });
    });
</script>

may need to review if there is anything broken with jquery 1.8 or bootstrap 2.1.0
also look at the Stacked example on, http://twitter.github.com/bootstrap/components.html#progress

.attr has been deprecated with jQuery 1.9 and 2.0 - so I expected to be able to call .data("percentage", 50) - but I had to call .attr("data-percentage", 50) - which is not compliant with the latest versions of jQuery.

Right now, I am just making both calls to be safe:

    $("#editingProgressBar").find(".bar").data("percentage", percentage); // correct
    $("#editingProgressBar").find(".bar").attr("data-percentage", percentage); // deprecated
    $("#editingProgressBar").find(".bar").progressbar();

is the 'update' callback suitable for making an ajax request to update the percent value or is that only for reacting to a value change? I need to update a progress bar dynamically based on the result of an ajax call.

Is there an example of this somewhere?

twbs/bootstrap@575f18a

Hi.
I tried to run the demo code that you provided here (vertical progressbar bottom) but I get 2 errors when I open the console and nothing shows at all. The Errors are as follows:
1- Uncaught TypeError: Cannot read property 'noop' of undefined
2- Uncaught TypeError: undefined is not a function (meaning the function "progressbar").
Is it possible for you to send me the whole source code for that demo, so I can run it on my computer and see where my mistake is...?
Best Regards.

Hi there,

Two questions:

1. Is it possible to load the animation, when the user views the poll (without button)?
2. I use a system and the only way, the value is given is this way: "75%". How can I remove the % sign, so the script can use only the number?

Thank you

Bad links to css files

When you validate site when is use bootstrap-progressbar plugin get a validation errors from aria-... atributes.
To fix this problem add "data-" before aria-.. atributes, for example:

Change aria-valuetransitiongoal to data-aria-valuetransitiongoal

These changes should be made in the html file and in the file plugin.

40.        var aria_valuetransitiongoal = $this.attr('data-aria-valuetransitiongoal');
41.        var aria_valuemin = $this.attr('data-aria-valuemin') || 0;
42.        var aria_valuemax = $this.attr('data-aria-valuemax') || 100;
.
.
.
127.       $this.attr('data-aria-valuenow', current_value);

I am trying to run .progressbar() on every button click but it does not work after one click. I mean .progressbar() grabs and stores the first values only and does not update the values on subsequent clicks.

How can I run it with new values every time the button is clicked?

I am using the below jQuery -

$('#progress-bars-preview').click(function(){
    var percent = $('#progress_bar-percent').val();
    if(percent=="percentage"){
        percent = true;
    }else{
        percent = false;
    }
    $("#demo-progress-bar .bar").progressbar({
        display_text: "fill",
        done: function(current_percentage) {
            $("#demo-progress-bar .bar span").show("slow");
        },
        use_percentage: percent
    });
});

The current setup doesn't pass HTML5 validation. Can you add support for data- attributes(i.e. data-aria-valuetransitiongoal instead of aria-valuetransitiongoal)?
Or can you instruct how to modify to code to support this tags?