So I am trying to get a border around buttons on my page when the user clicks them.
To set up the handler I am going:
$(".reportButtons").click(function(){ //change border color });
I have tried 2 ways to change the border color of the buttons in there. The first way is using the .css() function.
$(this).css({"border-color": "#C1E0FF",
"border-weight":"1px",
"border-style":"solid"});
But when I do it this way, the border is really fat (I want it to be hairline, like it normally would be if I set the width to 1px)
The other way I have tried is by downloading the jquery-color plugin, and doing something like:
$(this).animate({borderTopColor: "#000000"}, "fast");
When I do that, nothing happens. There is no error - just nothing happens. But if instead of trying to change the border color, I try to change the background color, it works fine....so am I using the jquery-color wrong? For reference, here is how I would change the background:
$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');
like I said, that works. When I downloaded jquery-color, I only downloaded the one file (jquery-color.js), if that makes a difference....
So how do I go about getting a hairline border? (I would prefer to use the animate() method if you have anyideas how to get that to work)
This question is related to
javascript
jquery
colors
border
You need to define border-width:1px
Your code should read:
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
You should ideally use a class and addClass/removeClass
$(this).addClass('borderClass');
$(this).removeClass('borderClass');
and in your CSS:
.borderClass{
border-color: #C1E0FF;
border-width:1px;
border-style: solid;
/** OR USE INLINE
border: 1px solid #C1E0FF;
**/
}
jsfiddle working example: http://jsfiddle.net/gorelative/tVbvF/\
jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/
This just gives you an example of how it could work, you should get the idea.. There are better ways of doing this most likely.. like using a toggle()
After a few futile hours battling with a 'SyntaxError: missing : after property id' message I can now expand on this topic:
border-width is a valid css property but it is not included in the jQuery css oject definition, so .css({border-width: '2px'}) will cause an error, but it's quite happy with .css({'border-width': '2px'}), presumably property names in quotes are just passed on as received.
Maybe just "border-width" instead of "border-weight"? There is no "border-weight" and this property is just ignored and default width is used instead.
I'd recommend using a class instead of setting css properties. So instead of this:
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
Define a css class:
.border
{
border-color: #C1E0FF;
border-width:1px;
border-style:solid;
}
And then change your javascript to:
$(this).addClass("border");
Source: Stackoverflow.com