May 2009 – Tanya Nam

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<script>

function init() {

  if($('container'))
    textSize.init();
}


var textSize = {
  small:  '80%',
  medium: '100%',
  large:  '120%',
  
  init: function() {
    var small_text  = $('small_text');
    var medium_text = $('medium_text');
    var large_text  = $('large_text');
    var container   = $('container');
    
    var textSizeCookie     = readCookie('textSize');
    var textSizeCookieName = readCookie('textSizeName');
    if(textSizeCookie && textSizeCookieName) {
      container.style.fontSize = textSizeCookie;
      textSize.resetClassNames();
      eval(textSizeCookieName + '_text').className = 'current';
    }
    
    small_text.onclick = function() {
      textSize.resetClassNames();
      this.className = 'current';
      createCookie('textSize', textSize.small, 14);
      createCookie('textSizeName', 'small', 14);
      container.style.fontSize = textSize.small;
      $('header').style.fontSize = '11px';
    }
    medium_text.onclick = function() {
      textSize.resetClassNames();
      this.className = 'current';
      createCookie('textSize', textSize.medium, 14);
      createCookie('textSizeName', 'medium', 14);
      container.style.fontSize = textSize.medium;
      $('header').style.fontSize = '11px';
    }
    large_text.onclick = function() {
      textSize.resetClassNames();
      this.className = 'current';
      createCookie('textSize', textSize.large, 14);
      createCookie('textSizeName', 'large', 14);
      container.style.fontSize = textSize.large;
      $('header').style.fontSize = '11px';
    }
  },
  
  resetClassNames: function() {
    $('small_text').className  = '';
    $('medium_text').className = '';
    $('large_text').className  = '';
  }
};

function $(element_id) {
  var element = document.getElementById(element_id);
  return (element == null) ? (false) : (element);
}


function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    var expires = '; expires=' + date.toGMTString();
  }
  else var expires = '';
  document.cookie = name + '=' + value + expires + '; path=/';
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name, '', -1);
}


if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)></script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}
/* for other browsers */
window.onload = init;


</script>
 </HEAD>

 <BODY>
      <p id="accessibility">
        
         Text Size: 
         <a href="#" id="small_text" class="current">S</a> 
         <a href="#" id="medium_text">M</a> 
         <a href="#" id="large_text">L</a>

    </p>
    <div id="container">
<p>Text example</p>
</div>
 </BODY>
</HTML>
Tanya Nam

Month: May 2009

Text resizing with JavaScript
