Resizing font of div won't work in Chrome or Firefox
Posted: Fri Sep 24, 2010 9:02 am
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:
The html code:
Would anyone be able to modify this script so that it works in all browsers?
The javascript:
Code: Select all
/*#######################################*/
/* 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);
}
}
Code: Select all
<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>