Live Update CSS on input change with jQuery

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' });   
        }         

    });

If you're sure it's returning a value that contains the pound sign, you can try changing the line to $('.campaignBar').css('backgroundColor', bg_color);. Have you tried debugging with the console to make sure that that is the format that is being returned? Also, any errors? Oh, and FYI .live() has been deprecated in favor of .on() — j08691
– j08691, Commented Nov 19, 2012 at 17:49

Magicmarkker · Accepted Answer · 2012-11-19 18:17:47Z

2

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');   
      }         
     }
   }); 
 });

edited Nov 19, 2012 at 18:17

answered Nov 19, 2012 at 17:55

Magicmarkker

1,0637 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mike Barwick Over a year ago

Okay, I had keyup before...but since i'm selecting the color from a color picker and no necessary writing it out, I can't use this. So my original code works if I manually type in the hex value, however when I select the code via the color picker, which most people will do, the live change doesn't happen. Any ideas? Here's the plug-in... github.com/claviska/jquery-miniColors

Magicmarkker Over a year ago

Check my edits, there's a change callback for the minicolors, so just call it when you initialize the miniColors call for the text input

user1211577 Over a year ago

For some reason, this won't change the colours for me..!

Magicmarkker Over a year ago

Works perfectly fine for me, maybe you need to post your entire js code and html so we can see more of what you're doing.

Mike Barwick Over a year ago

Okay, let me test this (Joshua was not the poster ;)). On first glace, shouldn't var bg_color point somewhere??

|

user1211577 · Accepted Answer · 2012-11-19 17:59:32Z

0

JSFiddle

$('.bg_color').on("change", function() {
    var bg_color = $(this).val(); 
    if (bg_color.length > 2)
    {
        $('.campaignBar').css("background-color",'#'+bg_color);
    } 
    else
    {
        $('.campaignBar').css('background-color','#4575A1');   
    }         
});

I've set it to be greater than 2, as with a hex value you need to have 3 or more numbers for it to be recognised as a number.

answered Nov 19, 2012 at 17:59

user1211577

Collectives™ on Stack Overflow

Live Update CSS on input change with jQuery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related