6

I have the following code:

var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";
var usboxshadow="0px "+oneHeight+" 0px rgba(0,140,255,1), 0px "+oneHeight+" 25px rgba(0,0,0,.7)";
console.log(usboxshadow);
$(".unselected").css("-webkit-box-shadow",usboxshadow);

When I output usboxshadow to the console, I get what I should: 

0px 20px 0px rgba(0,140,255,1), 0px 20px 25px rgba(0,0,0,.7)

(the -webkit-box-shadow property)
However, when I retrieve the property with Jquery.css(),

console.log($(".unselected").css("-webkit-box-shadow"));

I get a very different result: 

rgb(0, 140, 255) 0px 20px 0px 0px, rgba(0, 0, 0, 0.701961) 0px 20px 25px 0px

First, where did the extra 0px come from in each of the arguments?

Second, why is the rgba alpha(opacity) 0.701961, when it should be 0.7?

Please tell me what I have done wrong.

Edit:

After running the code, the box-shadow of the elements with the class unselected doesn't display.

programmers5
  • 326
  • 2
  • 13

1 Answers1

4

[Updated for second question, see at the bottom.]

1) In CSS, you can specify the box-shadow by using two, three or for pixel values. First two are x,y offsets, two others are spread value & radius. See MDN for more infos.

When you set a CSS rule (with CSS or jQuery), the browser automatically put full values (in this case, four px values). That's why you get the extra one when targetting with jQuery: the last one is given by the browser default behaviour (see the computed panel in Chrome inspector: it shows you values you didn't have to set because they are default ones).

2) .7 or .701961 isn't very different. I think your code seems good, but sometimes, conversion issues can exists in float numbers (= decimals). The way a computer stores a decimal number may vary following various complex criterias, I think. See this subject on StackOverflow.

I think you should'nt worry about that. There's maybe a way to force proper conversion in JS or jQuery. Can't tell more.

Hope I could help. :)

Update

Here are experimentations on JS Fiddle (updated version than my Comment on this answer). The problem comes from var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";

I didn't paid much attention to it (sorry), but what window.innerheight returns is the height of the Window. Therefore, the y offset of the shadow will vary depending on the browser window size. That's why we obtain a very different shadow.

Once again, I have no other explanations for the decimal issue. ^^

Community
  • 1
  • 1
meduz'
  • 555
  • 4
  • 12
  • Another thing, after applying this box shadow css, it doesn't affect the element with the class unselected ... (+1) – programmers5 May 31 '15 at 03:36
  • OK I found the problem by experimenting on [this JS Fiddle](http://jsfiddle.net/qjdwrzfn/). I'll update the base answer in a few minutes. – meduz' May 31 '15 at 10:43
  • 1
    Good answer. I would expand that jQuery has nothing to do with it — you could do it with javascript `HTMLElement.style` and get the same result: http://jsfiddle.net/sergdenisov/50eLezko/. – sergdenisov May 31 '15 at 11:01
  • Updated the Fiddle linked in my previous comment. Updated the answer. :) – meduz' May 31 '15 at 11:10
  • (BTW, I realize it doesn't really solve your shadow not applying to the unselected class. Maybe my answer will put you on the way, maybe you could provide a bunch of HTML ^^.) – meduz' May 31 '15 at 11:20