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>
