Resizing font of div won't work in Chrome or Firefox

[swarfega]

Hi. I have a javascript which is designed to increase and decrease the text size of a particular div so that reaaders can feel more comfortable. However it works in IE, but not firefox or chrome. My guess is that it could be using some functions that are not supported by those browsers.

Would anyone be able to modify this script so that it works in all browsers?

The javascript:

/*#######################################*/
/*            Beta FONT SIZER                 */
/*#######################################*/
window.onload = function() {
    _LSfontSizer.init(null);
}
 
origSize = new Array();
 
var _LSfontSizer = {
    contentID:'content',// The outer most element of the text you want to resize
    debug: false,        // Allow alert of tracking values
    enabeled: true,        // Enable the fontsize tool to function single point to disable
    maxChange: 5,         // Max number of increase/decreases in font size
    changeCnt: 0,         // Track change counts
    defaultSize: '14',    // NA - default font size
    maxSize: '20',        // NA - max font size
    minSize: '8',        // NA - minimum font size
    curSize: null,        // loop container for current size and manipulation
    origSizeCnt: 0,        // Track the item change count for reset value mapping
    echo: '',            // debug value outputs
    activeFunc: null,    // Store the active function that was called
    init: function(call){
            this.echo='';
            this.activeFunc = call;
            if(this.activeFunc == null) { // Setup Listeners onload
                try {
                    Event.add($('fntSizeInc'),'mouseup',function() { _LSfontSizer.init('add'); });
                    Event.add($('fntSizeDec'),'mouseup',function() { _LSfontSizer.init('dec'); });
                    Event.add($('fntSizeReset'),'mouseup',function() { _LSfontSizer.subSetFunc('get'); });
                    if(document.all) {
                        $('fntSizeInc').style.cursor = "hand";
                        $('fntSizeDec').style.cursor = "hand";
                        $('fntSizeReset').style.cursor = "hand";
                    } else {
                        $('fntSizeInc').style.cursor = "pointer";
                        $('fntSizeDec').style.cursor = "pointer";
                        $('fntSizeReset').style.cursor = "pointer";
                    }
                } catch(e) { 
                    //do nothing since the fontSizer interface is not present
                }
                //return; //End
            }
 
            if(this.activeFunc=='add') {
                if(this.changeCnt+1>this.maxChange)
                    this.enabeled = false;
                else {
                    this.changeCnt++; this.enabeled = true;
                }
            } else if (this.activeFunc=='dec') {
                if(this.changeCnt-1<(0-this.maxChange))
                    this.enabeled = false;
                else {
                    this.changeCnt--; this.enabeled = true;
                }
            }
            if(this.enabeled) {
                bodyObjs = $(this.contentID).childNodes;
                for(var i=0;i<bodyObjs.length;i++){
                    if(bodyObjs[i].nodeType == 1)  // IE 
                        this.traverseTree(bodyObjs[i])
                    // END nodeType
                } // END for loop
                if(this.debug) alert(this.echo);
            }
        },
    set: function(obj) {
            this.curSize = getStyle(obj.parentNode,'font-size');
            if( this.curSize != 'undefined' && obj.nodeName=="#text" && obj.parentNode.nodeName != "DIV") {
                origSize.push(this.curSize);
                this.echo += "\n\rSET DEFAULT = " + this.curSize;
            }
        },
    get: function(obj) {
            this.curSize = origSize[this.origSizeCnt];
            if( this.curSize != 'undefined' && obj.nodeName=="#text" && obj.parentNode.nodeName != "DIV") {
                    var newSize = parseInt((this.curSize.substring(0,this.curSize.length-2))) + 1;
                    obj.parentNode.style.fontSize = newSize + this.curSize.substring(this.curSize.length-2,this.curSize.length);
                    this.echo += "\n\rRESET TO DEFAULT:: "+this.curSize+" >> Parent = "+obj.parentNode.nodeName+" >> This = "+obj.nodeName;//+" :: nodeValue "+obj.nodeValue;
                    this.origSizeCnt++;
            }
    },
    add: function(obj) {
            this.curSize = getStyle(obj.parentNode,'font-size');
            if( this.curSize != 'undefined' && obj.nodeName=="#text" && obj.parentNode.nodeName != "DIV") {
                    var newSize = parseInt((this.curSize.substring(0,this.curSize.length-2))) + 1;
                    obj.parentNode.style.fontSize = newSize + this.curSize.substring(this.curSize.length-2,this.curSize.length);
                    this.echo += "\n\rADD:: "+this.curSize+" >> Parent = "+obj.parentNode.nodeName+" >> This = "+obj.nodeName;//+" :: nodeValue "+obj.nodeValue;
                    this.origSizeCnt++;
            }
        },
    dec: function(obj) {
            this.curSize = getStyle(obj.parentNode,'font-size');
            if( this.curSize != 'undefined' && obj.nodeName=="#text" && obj.parentNode.nodeName != "DIV") {
                    var newSize = parseInt((this.curSize.substring(0,this.curSize.length-2))) - 1;
                    obj.parentNode.style.fontSize = newSize + this.curSize.substring(this.curSize.length-2,this.curSize.length);
                    this.echo += "\n\rDEC:: "+this.curSize+" >> Parent = "+obj.parentNode.nodeName+" >> This = "+obj.nodeName;//+" :: nodeValue "+obj.nodeValue;
                    this.origSizeCnt++;
            }
        },
    traverseTree: function(tree){
            var cnt = null;
            if(tree.hasChildNodes() && tree.nodeName != "P") { // Don't process paragraph sub elements
                var nodes = tree.childNodes.length;
                for(var i=0; i<tree.childNodes.length; i++) {
                    if(tree.childNodes[i].nodeName != "A"){
                        this.traverseTree(tree.childNodes[i]);
                        cnt++;
                    }
                    this.echo += " :: "+cnt+" :: ";
                } 
            } else if (tree.nodeName == "P") { // Only pass the outer paragraph tag once to limit is change occurance to one
                if(this.activeFunc == 'add') 
                    this.add(tree.childNodes[0]);
                else if (this.activeFunc == 'dec')
                    this.dec(tree.childNodes[0]);
                else if (this.activeFunc == 'get')
                    this.get(tree.childNodes[0]);
                else 
                    this.set(tree.childNodes[0]);
            } else {
                if(this.activeFunc == 'add') 
                    this.add(tree);
                else if (this.activeFunc == 'dec')
                    this.dec(tree);
                else if (this.activeFunc == 'get')
                    this.get(tree);
                else 
                    this.set(tree);
            }
        },
        subSetFunc: function(val) {
            this.origSizeCnt = 0;
            this.echo += "\n\rOrigSize Length = "+ origSize.length;
            for(i=0;i<origSize.length;i++) {
                this.echo += "\n\rOrigSize["+ i + "] = "+origSize[i];
            }
            this.enabeled = true;
            this.changeCnt = 0;
            this.init(val);
        }
}
 
function $(element) {
    var elements = new Array();
    for (var i=0;i<arguments.length;i++) {
        var element = arguments[i];
        if (typeof element == 'string') element = document.getElementById(element);
        if (arguments.length == 1) return element;
        elements.push(element);
    }
    return elements;
}
 
function getStyle(el,styleProp)
{
    var x = el;
    if (x.currentStyle)
        var y = x.currentStyle['fontSize'];
    else if (window.getComputedStyle)
        try { var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('font-size'); }
        catch(e) {
            //donothing
        }
    return y;
}
 
var Event = {
    add: function(obj,type,fn) {
        if (obj.attachEvent) {
            obj['e'+type+fn] = fn;
            obj[type+fn] = function() { obj['e'+type+fn](window.event); }
            obj.attachEvent('on'+type,obj[type+fn]);
        } else
        obj.addEventListener(type,fn,false);
    },
    remove: function(obj,type,fn) {
        if (obj.detachEvent) {
            obj.detachEvent('on'+type,obj[type+fn]);
            obj[type+fn] = null;
        } else
        obj.removeEventListener(type,fn,false);
    }
}

The html code:

<img src="fnt_sizer_sub.gif" id="fntSizeDec" alt="decrease font size" />
<span id="fntSizeReset" style="padding:0 3px;" >Font Resize</span>
<img src="fnt_sizer_add.gif" alt="Increase font size"  id="fntSizeInc" />
 
 
<div id="content">
<p>This is pages font..I want to resize it.</p>
</div>

[dlite922]

Is this your script? Looks like you grabbed it from somewhere and looking to get some free code to make it compatible with other browsers.

You don't need all that to change font size. you could do it in two lines of code in javascript. Just edit the CSS!

 
function increaseSize()
{
  var curSize =   parseInt(document.getElementById('mydiv').style.fontSize);
  curSize = ; 
  document.getElementById('mydiv').style.fontSize = (curSize+5)+'px'; 
{
 
 

I have not tested the above code. It's just to give you an idea.


Dan