How can I manipulate just the color of a -box-shadow with jquery?

Question

Im attempting to set a box-shadow color using tinycolor. I know I can use

$("CLASS").css("box-shadow", "VALUE");

But I would like to add the color by using tinycolor (a color manipulation framework) on an existing color variable.

I have tried :

$(".riHover").css("box-shadow", "inset 0px 0px 13px 0px tinycolor.lighten($('.Color').css('background-color'))"
);

But I don't think I am building the string properly. Any thoughts on what I am doing wrong?

Thanks in advance.

Should check this of http://stackoverflow.com/questions/3012899/box-shadow-is-there-a-box-shadow-color — Gaurav, Apr 10 '13 at 16:20

score 1 · Answer 1 · answered Apr 10 '13 at 16:19

1

Why don't you make you life easier first by using a variable ? Something like this:

var shadowColor = tinycolor.lighten($('.Color').css('background-color'));
$(".riHover").css("box-shadow", "inset 0px 0px 13px 0px " + shadowColor);

answered Apr 10 '13 at 16:19

Kaloyan

score 1 · Answer 2 · answered Apr 10 '13 at 16:30

1

you need to remove the quotes for the javascript function be invoked...

$(".riHover")
  .css("box-shadow", 
       "inset 0px 0px 13px 0px "+ 
       tinycolor.lighten($('.Color').css('background-color'))
      );

answered Apr 10 '13 at 16:30

PA.

2 Answers2