CODEWITHSUNDEEP
jquerycsshtmlinput
noclist
noclist

Reputation: 1819

Manipulate CSS with the HTML5 Color Input

I'm trying to use jQuery and the HTML5 color input type to let a user set the text color of a particular div:

<script>
$('#color').change(function() {
    $('#output').css('color', "$('#color').val()");
});
</script>

<div id="output">
     <h1>Some Text</h1>
</div>
<label for="color">Color</label><input id="color" type="color" value="#ffffff" />

The above code does not seem to do anything, but also throws no Javascript errors. My guess is that .change() may be the wrong method to use but I haven't had success with any other ones either. Has anyone had success in using this input type in this manner?

Upvotes: 2

Views: 5297

Answers (1)

Rick Calder
Rick Calder

Reputation: 18685

Use .on, I think it's because that colour picker is created on the fly:

$("#color").on("change",function(){
    $("#output").css("color",$("#color").val());
});

Fiddle: http://jsfiddle.net/feL6s/

Upvotes: 5

Related Questions