Question

I have some document in a div that is being displayed, and I want the user to be able to adjust the font size of what is inside it. Some sort of code like this:

$("#fontPlusBtn").click(function (){
    $("#textDiv").css("font-size", "*=1.1");
}):

How can I resize all the text nodes (which vary in size) proportionally in this div?

Update: (Working version)

I combined a few answers here plus altered what I had earlier, so for anyone else stumbling upon this problem later on, here’s what I did:

var upFontSize = function($obj) {
    $obj.children().each(function(index){
        if($(this).children().length > 0){
            upFontSize($(this));
        }else {
            $(this).css({
                "font-size": function(index, value) {
                    return parseFloat(value) * 1.1;
                },
            });
        }
    });
}

Answer 1

This is answers your question and accounts for the multiple text sizes, and sizing them accordingly:

…And here is a working example:

http://jsfiddle.net/Xr2gj/44/

js:

$(document).ready(function (){
    $("#fontPlusBtn").click(function (){
        $(".textDiv, .textDiv > *").each( function(index){
            $(this).css( {
                "font-size": function(index, value) {
                    return parseFloat(value) * 1.1;
              }
            });
        });
    });
});

css:

#world{
    font-size: 8pt;
}

#solarSystem{
    font-size: 12pt;
}
#galaxy{
    font-size: 14pt;
}

#universe{
    font-size: 16pt;
}

html:

<a id="fontPlusBtn" href="#">
    Click to increase font-size
</a>

<div class="textDiv" id="world">
    Hello World!
</div>

<div class="textDiv" id="solarSystem">
    <p><b>Hello Solar System!</b></p>
</div>

<div class="textDiv" id="galaxy">
    <p>Hello Galaxy!</p>
</div>

<div class="textDiv" id="universe">
    <p><div><b><a href="#">Hello Universe!</a></b></div></p>
</div>

​You may be able to mix with some of the other answers, but this http://jsfiddle.net/Xr2gj/44/ shows it working just as you specified.