CODEWITHSUNDEEP
jquerycss
Peter
Peter

Reputation: 11835

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

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

Upvotes: 3

Views: 7040

Answers (4)

Stefanvds
Stefanvds

Reputation: 5916

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.

Upvotes: 3

Yi Jiang
Yi Jiang

Reputation: 50105

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

Upvotes: 5

Umakanta.Swain
Umakanta.Swain

Reputation: 1117

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.

Upvotes: 2

G&#244;T&#244;
G&#244;T&#244;

Reputation: 8053

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.

Upvotes: 0

Related Questions