How do I dynamicly change the css font size using an input in jquery?

Question

I am trying to re-size the font size of one of my divs in jquery using an input. Ideally, the number put inside the input box would be added on to the existing font size but so far my attempts have been unsuccessful.

Here is what I have so far but it does not seem to be working:

HTML

<div class="resizeable" style="font-size: 30px;">test</div>
<input type="text" name="size" class="size" />

JQuery

$(document).ready(function() {
    $('.size').keyup(function() {
        var currentFontSize = $('this').css('font-size');
        var input = $(this).val(); // grab the input value
        var newsize = input + currentFontSize;
        console.log(size);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize);  
        } 
    }); 
});

JSFiddle http://jsfiddle.net/eqE2R/36/

Any help would be appreciated.

Dhaval Marthak · Accepted Answer · 2013-10-29 10:41:51Z

2

You need to add px value and use parseInt() for addition:

$('.size').keyup(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    var input = $(this).val(); // grab the input value
       alert(currentFontSize)
    var newsize =parseInt(input,10) + parseInt(currentFontSize,10);
    console.log(newsize);

    if ($(this).val().length > 0)
    {
        // replace css value on live preview 
        $('.resizeable').css('font-size', newsize + 'px');  
    } 
  });

Demo

answered Oct 29, 2013 at 10:41

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matewka · Accepted Answer · 2013-10-29 10:42:29Z

1

FIDDLE

You forgot to add px to the value. You must also parse the values to the int

$(document).ready(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    $('.size').keyup(function() {
        var input = $(this).val(); // grab the input value
        var newsize = parseInt(input) + parseInt(currentFontSize);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize + 'px');  
        } 
    }); 
});

EDIT: I moved the currentFontSize variable deifnition outside the keyup function, so it will be declared only once at the begining.

edited Oct 29, 2013 at 10:42

answered Oct 29, 2013 at 10:34

matewka

10.2k3 gold badges36 silver badges43 bronze badges

4 Comments

user1831430 Over a year ago

Thanks! That fixed it. The only problem now is that it is always adding to the size and won't downsize. Ex: change from 10 to 5 will make it 15.

matewka Over a year ago

That's right. You added currentFontSize to the newsize. You want it to be back 30px when the input is empty?

user1831430 Over a year ago

Ideally, I want it to be able to reduce in size if the new value is greater than the last value but I want to avoid hard coding the original size in the jquery.

user1831430 Over a year ago

Thanks! I am still learning JQuery. Hopefully I will get the hang of it soon :D

Collectives™ on Stack Overflow

How do I dynamicly change the css font size using an input in jquery?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related