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