JQuery Text Resizing not working with IE

Question

Hi

I am using the following script (that requires the cookies plugin for jquery) to allow javascript enabled users to change the font size on a medical charity website:

var sitefunctions = {
    textresize: function () {        
        var $cookie_name = "TextSize";
        var originalFontSize = $("html").css("font-size");
        // if exists load saved value, otherwise store it
        if ($.cookie($cookie_name)) {
            var $getSize = $.cookie($cookie_name);
            $("html").css({ fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px") }); // IE fix for double "pxpx" error
        } else {
            $.cookie($cookie_name, originalFontSize);
        }
        // reset link
        $(".reset").bind("click", function () {
            $("html").css({ "font-size": originalFontSize });
            $.cookie($cookie_name, originalFontSize);
        });
        // text "+" link
        $(".increase").bind("click", function () {
            var currentFontSize = $("html").css("font-size");
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum * 1.2;
            if (newFontSize, 11) {
                $("html").css({ "font-size": newFontSize });
                $.cookie($cookie_name, newFontSize);
            }
            return false;
        });
        $(".decrease").bind("click", function () {
            var currentFontSize = $("html").css("font-size");
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum / 1.2;
            if (newFontSize, 11) {
                $("html").css({ "font-size": newFontSize });
                $.cookie($cookie_name, newFontSize);
            }
            return false;
        });
    }
}

You can then call it from your page like so:

       $(document).ready(function () {
            // show text resizing links
            $(".AccessibilityControls").show();
            sitefunctions.textresize();
        })

You can then put some links in your page like so:

<div class="AccessibilityControls" style="display:none;">            
        Text Size:<br />
        <a class="increaseFont" style="font-size: 14pt;" title="Increase Text Size" href="#" rel="nofollow">A+</a> | 
        <a class="decreaseFont" style="font-size: 11pt;" title="Decrease Text Size" href="#" rel="nofollow">A-</a> | 
        <a class="resetFont" href="#" rel="nofollow">Reset </a>
    </div>

So far, so good. The above presuposes you have set a font-size in a style sheet for the html tag as follows:

html { font-size: x-small; }

PROBLEM 1:

It works fine all browsers except IE.

WHY?!

PROBLEM 2:

I am fine debugging in Firefox, but this is an IE problem! Have tried attaching the process to the VS debugger, but this seems to work intermitently...

Answer 1

OK, that was quick and instructive.

1. Asking the question is half the answer...

2. IE is not able to interpret x-small as a numerical size, which is what the Mozilla browsers do.

3. As the script I am using tries to attach a px to the font-size property, you end up with:

x-smallpx

Whereupon jQuery tells you to naff off.

Changing to:

html { font-size:65%; }

solved the issue. This does get evaluated to a number by IE and so jQuery is happy.

I am still confused by Visual Studio and the js debugging. There seem to be many ways to skin the cat and none work all the time.

Having first encountered this problem yesterday, I am relieved to have it solved and to have found how to debug in IE. Double whammy.

The problem I am left with is that I have read somewhere that it is desirable to use x-small to set the font-size and then make all other sizes relative to that. So am left feeling a bit naked by this font-size:65% malarkey...

Still, will have to work around that as the Accessiblity issues are an issue.