increase descrease font size with line height using jquery

Question

I want some jquery code which will increase or descrease font. I tried some codes but its not running well.

here is the link of my demo (am first time using fiddle so please can you set as needed)

I have different sizes font here, but at the time of increasing font size its makes all font of same size.so how to fix that?

My Code:

<div id='contents'><div><strong>Lorem Ipsum</strong> is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard dummy
 <div><font face="Comic Sans MS" size="5" color="#c2c2c2">text ever since the 1500s, when an unknown printer took a galley of 
type and scrambled it to make a type specimen book. It has survived not  </font></div><font face="Comic Sans MS" size="5" color="#c2c2c2">
only five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised in the 1960s with 
the release of Letraset sheets containing Lorem Ipsum </font>passages, and more
 recently with desktop publishing software like <font size="1">Aldus PageMaker 
including versions of  </font><div><font size="1">Lorem Ipsum. </font></div></div></div>
<a href="#" onclick="increaseFont()">increaseFont</a>
<a href="#" onclick="decreaseFont()">decreaseFont</a>
    <script type="text/javascript">
var $ = jQuery
var section = '#contents *';
var originalFontSize = $(section).css('font-size');
var originalLineHeight = $(section).css('line-height');

function resetFont() {
    $(section).css('font-size', originalFontSize);
    $(section).css('font-size', originalLineHeight);
}

function increaseFont() {
    var currentFontSize = $(section).css('font-size');
    var currentLineHeight = $(section).css('line-height');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum * 1.2;
    $(section).css('font-size', newFontSize);
    var currentLineHeightNum = parseFloat(currentLineHeight, 10);
    var newLineHeight = currentLineHeightNum * 0.1;
    $(section).css('line-height', newLineHeight);
    return false;
}

function decreaseFont() {
    var currentFontSize = $(section).css('font-size');
    var currentLineHeight = $(section).css('line-height');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum * 0.8;
    $(section).css('font-size', newFontSize);
    var currentLineHeightNum = parseFloat(currentLineHeight, 10);
    var newLineHeight = currentLineHeightNum * 0.8;
    $(section).css('line-height', newLineHeight);
    return false;
}
</script>

Answer 1

The primary issue is that you're calling $(section).css(), which is returning a single value (16px), but applying it to all sections. Getting your code to work isn't too difficult - what you'll want to do is call $(section), but use .each() to loop through each section and update the value that way.

I've updated your fiddle, which has the increaseFont function updated to illustrate the workaround. Hopefully this will help you!

http://jsfiddle.net/p4NbG/2/

And the change I made:

function increaseFont() {
    $(section).each(function(idx, el){
        var currentFontSize = $(this).css('font-size'),
            currentLineHeight = $(this).css('line-height'),
            currentFontSizeNum = parseFloat(currentFontSize, 10),
            newFontSize = currentFontSizeNum * 1.2;

        $(this).css('font-size', newFontSize);

        var currentLineHeightNum = parseFloat(currentLineHeight, 10),
            newLineHeight = currentLineHeightNum * 0.1;

        $(this).css('line-height', newLineHeight);        
    });
}

Happy JavaScripting!