border-bottom-width in jQuery

Question

I'm trying to set the width's for the border using jQuery, so it'll be adjusted to the screensize.

What I'm using right now is:

$("#content").css("border-bottom-width", "(1/20)*theHeight", "border-right-width", "(1/10)*theWidth", "border-left-width", "(1/10)*theWidth", "border-top-width", "0");

But this does not seem to do the trick. I know values theHeight and theWidth are filled, so that can't be the problem.

What am I doing wrong? If it's a really lame bug then I'm really sorry for being such a noob.

Answer 1

Should be like this:

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0});

The problem is that you're, first of all using the css() wrong. If you have more than one css properties then you need to make it an objet {key: value, key: value}. Second, if you put variables and calculations in quotes, the result will be just plain text.

Answer 2

It's because you have your values in quotes and in the wrong format, just removes the quotes and make your argument an object, like this:

$("#content").css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

The format for an object literal is always { key: value, key2: value2 }. To be safe, quote your keys, since border-bottom-width isn't a valid key (because of the -), but "border-bottom-width" is just fine. Also you can simplify it a bit, like this:

$("#content").css({"border-bottom-width": theHeight/20,
                   "border-right-width": theWidth/10, 
                   "border-left-width": theWidth/10, 
                   "border-top-width": 0});