Before you fans of JavaScript libraries (e.g. jQuery, MooTools, Prototype/scriptaculous, etc.) form a mob and beat me to death with your coffee mugs, let me quickly state that I am a BIG fan of JS libraries. They make life much easier in most programming scenarios, BUT…

Sometimes using them for smaller JavaScript tasks and effects is simply overkill. It does not justify the loading of a whole library of 30/40/or 60kB just to use a small portion of it, especially for client-side effects.

Case in point: I wanted to add the text resizer tools to my blog posts as you see on the right hand side and I started to determine the best solution to achieve this.

I like using jQuery for its elegance and simplicity but I find myself using MooTools a lot because it accommodates the use of classic JavaScript without complaining. It also keeps things simple for me since I also code in ActionScript, so the differences are not that varied.

I started coding the text resizer code in MooTools speak as following:

window.addEvent('domready', function(){
   var currentSize = 12;

   $('increase').addEvent('click', function(){
       sizeUp();
    });

     $('decrease').addEvent('click', function(){
        sizeDown();
     });

     $('txtreset').addEvent('click', function(){
        resetCurrentsize();
     });
});

function getCurrentsize() {
   return currentSize;
}

function setCurrentsize(newsize) {
  currentSize = newsize;
  if (document.getElementById) {
  	$("resizeableText").setStyle('font-size', currentSize+'px');
  }
}

function resetCurrentsize(){
  currentSize = 12;
  if (document.getElementById) {
  	$("resizeableText").setStyle('font-size', currentSize+'px');
  }
}

function sizeUp(){
  if (document.getElementById) {
    if (currentSize != 14){
      currentSize++;
      $("resizeableText").setStyle('font-size', currentSize+'px');
    }
  }
}

function sizeDown(){
  if (document.getElementById) {
    if (currentSize != 11){
     currentSize = currentSize - 1;
     $("resizeableText").setStyle('font-size', currentSize+'px');
    }
  }
}

On top of that I needed to load the MooTools library and I wasn’t happy with the additional footprint this implies, so I set about refactoring my code to being plain old JavaScript with no additional library to load.

Here’s how it turned out:

/* **************************************************************
 *  Text-resizing script
 *  Plain JS. No Mootools, jQuery, Prototype, or any of that bulk
 *
 *  Copyright (c) 2008-2009 Figo Mago. All rights reserved.
 *
 *  Released under the GPL license
 *  http://www.opensource.org/licenses/gpl-license.php
 *  Use this script as you wish, but please leave the notice intact
 *
 * Author: Sifiso Khumalo a.k.a figomago
 * Author URI: http://figo.tandolin.co.za/
 * **************************************************************/
var currentSize = 12;
    el = document.getElementById("resizeableText");

function getCurrentsize(){
  return currentSize;
}

function setCurrentsize(newsize){
  currentSize = newsize;
  if (document.getElementById) {
    el.style.cssText = "font-size:"+currentSize+"px";
  }
}

function resetCurrentsize(){
  currentSize = 12;
  if (typeof(preDefaultSize) != "undefined") {
    currentSize = preDefaultSize;
  }
  if (document.getElementById) {
    el.style.cssText = "font-size:"+currentSize+"px";
  }
}

function sizeUp(){
  if (document.getElementById) {
    if (currentSize != 14){
      currentSize++;
      el.style.cssText = "font-size:"+currentSize+"px";
    }
  }
}

function sizeDown(){
  if (document.getElementById) {
    if (currentSize != 11){
      currentSize = currentSize - 1;
      el.style.cssText = "font-size:"+currentSize+"px";
    }
  }
}

(For some strange reason using “currentSize–;” in the code display messes up the front page display on this blog. Substituting the longer version “currentSize = currentSize – 1;” fixes that. Either version should work fine in your code)

The only downside is the addition of adding “onClick()=appropriateFunction();” to your tags, which I can happily live with.