Question

I’m trying to create (or update?) CSS based on input value. In short, I have a color picker that’s run from a text input field. When the input value changes (aka the color hex value), I need to update the css background on another element on my page with this value.

What I’m doing is not working. What am I doing wrong? Or what’s the best way to update/replace CSS based on live input value?

Script:

    // Bar Background Color - Live Preview
    $('.bg_color').live("change", function() {

        var bg_color = $(this).val(); // grab color input value

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.campaignBar').css('background', bg_color);  
        } 
        else
        {
            //resorts back to default if no value entered
            $('.campaignBar').css('background', '#4575A1' });   
        }         

    });

Answer 1

This works for me jsfiddle

$(document).ready(function() {
  $('.bg_color').miniColors({
    change: function(hex, rgba) {    
      if (hex.length > 0)
      {
       // replace css value on live preview 
       $('.campaignBar').css('backgroundColor', hex);  
      } 
      else
      {
        //resorts back to default if no value entered
        $('.campaignBar').css('backgroundColor', '#4575A1');   
      }         
     }
   }); 
 });