/* To implement this script in your Web page, configure this file as shown below, then put this file on your Web server. Next, insert the following at the beginning of the section of your Web page: where [path] is the path to this file on your server. Insert the following right after the tag: Finally, insert the following where you wish the links to change the text size to appear: */ /* efa_increment = percentage by which each click increases/decreases size efa_bigger = array of properties for 'increase font size' link efa_reset = array of properties for 'reset font size' link efa_smaller = array of properties for 'decrease font size' link properties array format: ['before HTML', 'inside HTML', 'title text', 'class text', 'id text', 'name text', 'accesskey text', 'onmouseover JavaScript', 'onmouseout JavaScript', 'on focus JavaScript', 'after HTML' ] */ var efa_default = 83; //default text size as percentage of user default var efa_increment = 6; //percentage to increase/decrease font size var efa_bigger = ['

Font size: ', //HTML to go before 'bigger' link 'large', //HTML to go inside 'bigger' anchor tag 'place largely font size', //title attribute 'mehr', //class attribute '', //id attribute '', //name attribute '', //accesskey attribute '', //onmouseover attribute '', //onmouseout attribute '', //onfocus attribute ' | ' //HTML to go after 'bigger' link ] var efa_reset = ['', 'normal', //HTML to go before 'reset' link 'place normal font size', //HTML to go inside 'reset' anchor tag 'mehr', //class attribute '', //id attribute '', //name attribute '', //accesskey attribute '', //onmouseover attribute '', //onmouseout attribute '', //onfocus attribute ' | ' //HTML to go after 'reset' link ] var efa_smaller = ['', 'small', //HTML to go before 'smaller' link 'place smaller font size', //HTML to go inside 'smaller' anchor tag 'mehr', //class attribute '', //id attribute '', //name attribute '', //accesskey attribute '', //onmouseover attribute '', //onmouseout attribute '', //onfocus attribute '<' + '/p>' //HTML to go after 'smaller' link ] function Efa_Fontsize(increment,bigger,reset,smaller,def) { // check for the W3C DOM this.w3c = (document.getElementById); // check for the MS DOM this.ms = (document.all); // get the userAgent string and normalize case this.userAgent = navigator.userAgent.toLowerCase(); // check for Opera and that the version is 7 or higher; note that because of Opera's spoofing we need to // resort to some fancy string trickery to extract the version from the userAgent string rather than // just using appVersion this.isOldOp = ((this.userAgent.indexOf('opera') != -1)&&(parseFloat(this.userAgent.substr(this.userAgent.indexOf('opera')+5)) <= 7)); // check for Mac IE; this has been commented out because there is a simple fix for Mac IE's 'no resizing // text in table cells' bug--namely, make sure there is at least one tag (a

, ,

, whatever) // containing any content in the table cell; that is, use

text

or text // instead of text or text; if you'd prefer not to use the workaround, then uncomment // the following line: // this.isMacIE = ((this.userAgent.indexOf('msie') != -1) && (this.userAgent.indexOf('mac') != -1) && (this.userAgent.indexOf('opera') == -1)); // check whether the W3C DOM or the MS DOM is present and that the browser isn't Mac IE (if above line is // uncommented) or an old version of Opera if ((this.w3c || this.ms) && !this.isOldOp && !this.isMacIE) { // set the name of the function so we can create event handlers later this.name = "efa_fontSize"; // set the cookie name to get/save preferences this.cookieName = 'efaSize'; // set the increment value to the appropriate parameter this.increment = increment; //default text size as percentage of user default this.def = def; //intended default text size in pixels as a percentage of the assumed 16px this.defPx = Math.round(16*(def/100)) //base multiplier to correct for small user defaults this.base = 1; // call the getPrefs function to get preferences saved as a cookie, if any this.pref = this.getPref(); // stuff the HTML for the test

into the testHTML property this.testHTML = '

'; // get the HTML for the 'bigger' link this.biggerLink = this.getLinkHtml(1,bigger); // get the HTML for the 'reset' link this.resetLink = this.getLinkHtml(0,reset); // get the HTML for the 'smaller' link this.smallerLink = this.getLinkHtml(-1,smaller); // set up an onlunload handler to save the user's font size preferences } else { // set the link html properties to an empty string so the links don't show up // in unsupported browsers this.biggerLink = ''; this.resetLink = ''; this.smallerLink = ''; // set the efaInit method to a function that only returns true so //we don't get errors in unsupported browsers this.efaInit = new Function('return true;'); } // concatenate the individual links into a single property to write all the HTML // for them in one shot this.allLinks = this.biggerLink + this.resetLink + this.smallerLink; } // check the user's current base text size and adjust as necessary Efa_Fontsize.prototype.efaInit = function() { // write the test

into the document document.writeln(this.testHTML); // get a reference to the body tag this.body = (this.w3c)?document.getElementsByTagName('body')[0].style:document.all.tags('body')[0].style; // get a reference to the test element this.efaTest = (this.w3c)?document.getElementById('efaTest'):document.all['efaTest']; // get the height of the test element var h = (this.efaTest.clientHeight)?parseInt(this.efaTest.clientHeight):(this.efaTest.offsetHeight)?parseInt(this.efaTest.offsetHeight):999; // check that the current base size is at least as large as the browser default (16px) adjusted // by our base percentage; if not, divide 16 by the base size and multiply our base multiplier // by the result to compensate if (h < this.defPx) this.base = this.defPx/h; // now we set the body font size to the appropriate percentage so the user gets the // font size they selected or our default if they haven't chosen one this.body.fontSize = Math.round(this.pref*this.base) + '%'; } // construct the HTML for the links; we expect -1, 1 or 0 for the direction, an array // of properties to add to the tag and HTML to go before, after and inside the tag Efa_Fontsize.prototype.getLinkHtml = function(direction,properties) { // declare the HTML variable and add the HTML to go before the link, the start of the link // and the onclick handler; we insert the direction argument as a parameter passed to the // setSize method of this object var html = properties[0] + '' + properties[10]; } // get the saved preferences out of the cookie, if any Efa_Fontsize.prototype.getPref = function() { // get the value of the cookie for this object var pref = this.getCookie(this.cookieName); // if there was a cookie value return it as a number if (pref) return parseInt(pref); // if no cookie value, return the default else return this.def; } // change the text size; expects a direction parameter of 1 (increase size), -1 (decrease size) // or 0 (reset to default) Efa_Fontsize.prototype.setSize = function(direction) { // see if we were passed a nonzero direction parameter; // if so, multiply it by the increment and add it to the current percentage size; // if the direction was negative, it will reduce the size; if the direction was positive, // it will increase the size; if the direction parameter is undefined or zero, reset // current percentage to the default this.pref = (direction)?this.pref+(direction*this.increment):this.def; this.setCookie(this.cookieName,this.pref); // set the text size this.body.fontSize = Math.round(this.pref*this.base) + '%'; } // get the value of the cookie with the name equal to a string passed as an argument Efa_Fontsize.prototype.getCookie = function(cookieName) { var cookie = cookieManager.getCookie(cookieName); return (cookie)?cookie:false; } // set a cookie with a supplied name and value Efa_Fontsize.prototype.setCookie = function(cookieName,cookieValue) { return cookieManager.setCookie(cookieName,cookieValue); } var efa_fontSize = new Efa_Fontsize(efa_increment,efa_bigger,efa_reset,efa_smaller,efa_default);