Jquery size text

Question

I've created a script which is supposed to increase or decrease the size of the text (shown below) but the problem is that the text is remaining the same size when I click on one of the images and pass the parameter menos

<script>

function increase_text(size,mode) {

    var size_ini=16;
    var size_max=20;
    var size_min=16;


    if (mode=="mas")
    {
        var size_increase = size_ini++;

        alert("ok"+size_increase);

        if (size_increase<20)
        {
            $(".content").css("font-size",""+size_increase+"px");
        }
        else
        {
            $(".content").css("font-size",""+size_max+"px");
        }
    }


    if (mode=="menos")
    {
        var size_increase = size_ini--;

        if (size_increase>=20 || size_increase>=size_min)
        {
            $(".content").css("font-size",""+size_increase+"px");
        }
        else
        {
            $(".content").css("font-size",""+size_min+"px");
        }
    }
}
</script>

Markup

<div style="position:relative;width:100%;border:0px solid;height:40px;">
<img src="http://127.0.0.1/tfw_end/wp-content/themes/thefactoyweb/images/text_decrease.png" onclick="increase_text('1','menos');" style="display:block;float:right;cursor:pointer;cursor:hand;" alt="Aumentar Texto" title="Aumentar Texto">
<img src="http://127.0.0.1/tfw_end/wp-content/themes/thefactoyweb/images/text_increase.png" onclick="increase_text('1','mas');" style="display:block;float:right;cursor:pointer;cursor:hand;" alt="Reducir Texto" title="Reducir Texto"></div>

http://jsfiddle.net/Wn6YJ/

Regards

Answer 1

There are multiple problems where
1. size_ini is a local variable, means it is reset on every call of increase_text
2. There is a problem in your incremental/decremental logic also, even though size_ini is more than size_max it is kept incremented, so on the next decrease click text will be shown in a much bigger font than allowed.

Use

var size_ini = 16;
var size_max = 20;
var size_min = 16;

function increase_text(size, mode) {
    if (mode == "mas") {
        size_ini = size_ini >= size_max ? size_max : size_ini + 1;
    } else if (mode == "menos") {
        size_ini = size_ini <= size_min ? size_min : size_ini - 1;
    }
    $(".content").css("font-size", size_ini + "px");
}

Demo: Fiddle