javascriptjqueryselectorcss-transitionsprogress

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


I need to adjust the transition time for a HTML5 <progress>-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 gets 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)?

In this jsFiddle you will see more clearly what I try to do: http://jsfiddle.net/rD5Mc/1/

Update:

I got the effect with an ugly workaround by adding/change a data-animation-time parameter to the <progress>-element and created several css-classes like this:

progress[data-animation-time="5"]::-webkit-progress-value { -webkit-transition: all 5s; }
progress[data-animation-time="10"]::-webkit-progress-value {    -webkit-transition: all 10s;    }
progress[data-animation-time="15"]::-webkit-progress-value {    -webkit-transition: all 15s;    }
progress[data-animation-time="20"]::-webkit-progress-value {    -webkit-transition: all 20s;    }
progress[data-animation-time="25"]::-webkit-progress-value {    -webkit-transition: all 25s;    }
...

It works, but I'm very unhappy with my solution. There must be a better way...


Solution

  • You can use the javascript to modify the css rules!

    var rule;
    
    $(".animationtimeFirst").change(function() {
        time = $(this).val();
    
    
        // Write out out full CSS selector + declaration
        s = '.progressselector::-webkit-progress-value { -webkit-transition: all ' + time + 's; }';
    
        // Check the rules
        // If there's no rules,
        if ((!rule && rule !== 0) || !document.styleSheets[0].cssRules.length) {
            // Make one! -- Insert our CSS string into the page stylesheet
            rule = document.styleSheets[0].insertRule(s, 0);
            // I think this code is different in IE, beware!
            console.log('Our rule is #' + rule);
        } else {
        // If we already have a rule we can change the style we've implement for the psuedo class
        document.styleSheets[0].rules[rule].style.webkitTransitionDuration = time.toString() + 's';
        }
    });
    

    Here's an updated fiddle: http://jsfiddle.net/trolleymusic/MHYY8/3/ -- hope it helps :)