jQuery Variable with .css() concatenation issue?

Question

I am trying to change CSS of a button on blur. I suspect it might be a concatenation issue but am unable to figure out what I am doing wrong. Here is my code...

HTML

<input type="text" value="blue" id="textinput">
<button>Button</button>
<span id="color">red</span>

CSS

button {
 background-color:blue;
 background-image: -webkit-linear-gradient(top, white 0%, black 100%);    
}

jQuery

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + '100%)'       });
     }, 500);
});

FIDDLE LINK

http://jsfiddle.net/krishollenbeck/p2jah/20/

It works fine when I remove the gradient CSS. So I am guessing I am concatenating the variable wrong. However I have tried it multiple ways but just can't seem to figure it out. It is probably something really obvious.

Also note. I am using webkit gradient so test in chrome or safari. Thanks in advance for the help.

Community · Accepted Answer · 2017-05-23 11:52:27Z

6

You are missing a whitespace between your variable holding the color and the percentage string.

'-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'
                                                        ^
                                                        |
                                                        +-- Here

A good way to debug this kind of situations is to use console.log to see the result of the concatenated string. In this case, for example, you'd get red100% instead of red 100%.

An alternative, which imho, is less error-prone, is to use String.format(). This way, you can (more) clearly see if you are missing something:

'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)

_{Note that some browsers don't support this function, but you can use this pollyfill to define it.}

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Aug 30, 2012 at 19:36

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

4 Comments

khollenbeck Over a year ago

Yep that is what it was. I have been looking at this for a good half hour and didn't pick that up. Sometimes it just takes a second pair of eyes. Thanks a lot.

João Silva Over a year ago

@KrisHollenbeck: You're welcome. An alternative, which is less error-prone, is to use format. For example: '-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format("red"). This way, you can easily see where the spaces are.

khollenbeck Over a year ago

I have never used .format() before.. Thanks for the info. I didn't even know that was part of the jQuery library.

João Silva Over a year ago

It's not. It's pure JavaScript, although some browsers don't support it. However, you can easily create it stackoverflow.com/a/1038930/140816.

Steve Robbins · Accepted Answer · 2013-04-11 06:39:45Z

5

You're missing a comma, and space (see Joao's answer)

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor, // < here        -> this way too               v here
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'       });
     }, 500);
});

edited Apr 11, 2013 at 6:39

answered Aug 30, 2012 at 19:37

Steve Robbins

13.8k12 gold badges81 silver badges129 bronze badges

1 Comment

khollenbeck Over a year ago

Thanks.. I acutally had the comma in there before. That was a copy mistake on my part. I forgot to add it back in when messing around in my fiddle. However the whitespace is what was actually causing the problem...

Collectives™ on Stack Overflow

jQuery Variable with .css() concatenation issue?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related