JQuery - Changing a button's font-weight without changing its size

Question

Hi,

When I change a button's font-weight, the size will also be changed. My problem is that I can't give the button a predefined size, so I tried to fix it with .css('width','-=4px');

But that will not work. Hope somebody can help me.

HTML

<input id="b1" type="button" value="Hello world" />
<input id="b2" type="button" value="Blubba blib" />
<input id="b3" type="button" value="Bl" />
<input id="b4" type="button" value="Blubba 55" />

JS

$('input:button').click(function() {

  $('*').css('font-weight','normal');  
  $(this).css('font-weight','bold');    
  $(this).css('width','-=4px');      

});

Exmaple http://www.jsfiddle.net/V9Euk/618/

Thanks in advance!
Peter

Answer 1

You should try to set a larger size to your buttons from the start, so that when the text gets bold the size does not change.

Answer 2

Edit:

Just add some extra width before making it bold.

$('input:button').width(function(){
    return $(this).outerWidth() + 20;
}).click(function() {
    $(this).css('font-weight', 'bold').siblings().css('font-weight', 'normal');
});

http://www.jsfiddle.net/djhRB/

there you go.

Answer 3

Hey Peter.

I got Ur Problem

and U can find out the width of the button and decrease width of that button like bellow.

            $('*').css('font-weight', 'normal');
            $(this).css('font-weight', 'bold');
            var wdth = $(this).width();
            wdth = wdth - 4;
            $(this).css({ width: wdth+'px' });

So When You ll click that button it ll find out the width of button and Decrease the width.

ultimately You can check the font-wight attribute and make it decrease or increase alternately according to your requirement.

Also you can make the size percentage to implement.

Answer 4

Before going anywhere with this code you have to give the buttons some padding, so that when the text inside them expand, they don't overflow. This code uses .outerWidth to obtain the correct width and adjust the button accordingly.

$('input:button').click(function() {
    var w = $(this).outerWidth();

    $(this).css({
        'font-weight': 'bold',
        'width': w
    }).siblings().css({
        'width': 'auto',
        'font-weight': 'normal'
    });
});

See: http://www.jsfiddle.net/CegfY/2