Grow your CSS skills. Land your dream job.

jQuery equivalent for css selector progress::-webkit-progress-value

  • # April 17, 2013 at 3:58 am

    I need to adjust the transition time for an HTML5 ` `-Bar with JS (jQuery) but I cannot find the right selector in jQuery doing this.

    My current tries:

    CSS:

    progress::-webkit-progress-value {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s; /* Works like a charm */
    }

    JavaScript (with no success):

    // These lines do nothing when the progress value changes:
    $(“.progressSelectorClass[progress-value]”).css({“-webkit-transition” : “all 6s”});
    $(“.progressSelectorClass > *”).css({“-webkit-transition” : “all 6s”});
    $(“.progressSelectorClass”).css({“-webkit-transition” : “all 6s”});

    // This will return an error:
    $(“.progressSelectorClass::-webkit-progress-value”).css({“-webkit-transition” : “all 6s”});

    Is there any chance to select the `progress::-webkit-progress-value` in JavaScript (with or without jQuery)?

    # April 17, 2013 at 4:24 am

    Hi,

    You’ll want to do this

    $(document).ready(function() {
    $(‘#div’).html($(‘#progress’).val());
    });

    or

    You can try this

    $(‘#progress’).val();

    You can’t select using the entire tag with jQuery.

    # April 17, 2013 at 5:01 am

    Hi rahuldsg,

    Thanks for your reply, but I’m not having problems getting or setting the value of the progress-bar. I try to adjust the css `transition` on the `progress-value`.

    # April 19, 2013 at 10:05 am

    I’ve just created a jsFiddle that should be more clearly what I try to achieve:
    [http://jsfiddle.net/rD5Mc/](http://jsfiddle.net/rD5Mc/ “http://jsfiddle.net/rD5Mc/”)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".