New Code View

I've been working for the past day on integrating jQuery and user defined javascript functions, and finally figured out what I was trying to finish. Coming here to show off the results, I realized that I'm quite tired of scripts/HTML/CSS looking terrible. So I've finally gotten around to adding a special view for code, using the open-source Syntax Highlighter. Great code, and very useful as you can see below.

So on to what I was showing off. In the members section of the CESAC website, I'm building up a set of tools that will allow future webmasters to edit the site without touching code. The current section I'm working on is the members database. One tool in that section is an Add New page. On that page, one item is an HTML textarea, for the member's description. Since the description field in the SQL database is limited to 1000 characters, I don't want people putting more than 1000 characters into the textbox. I also wanted to give them a live updating monitor of how many characters they have typed.

I gave the textarea a class of 'new_description', and the monitor 'new_description_monitor'. Below is my initial script.

$(document).ready(function(){

  if      ($(".new_description").val().length < 1)    { $(".new_description_monitor").css("color","black"); }

  else if ($(".new_description").val().length < 1001) { $(".new_description_monitor").css("color","green"); }

  else                                  { $(".new_description_monitor").css("color","red"); }

  $(".new_description_monitor").text( $(".new_description").val().length + "/1000" );

  $(text).keypress(function(event) {

    window.setTimeout(function(){

      if      ($(".new_description").val().length < 1)    { $(".new_description_monitor").css("color","black"); }

      else if ($(".new_description").val().length < 1001) { $(".new_description_monitor").css("color","green"); }

      else                                  { $(".new_description_monitor").css("color","red"); }

      $(".new_description_monitor").text( $(".new_description").val().length + "/1000" );

    }, 0);

  });
  
});

It works perfectly. It annoyed me though, because I'm using the same code twice, once on pageload, and once each type a key is typed. I wanted to be able to type out the function once, then just reference it twice. So I dove into it, went through about 10 iterations, stopped by the jQuery forums for some help, and finally arrived at what you see below.

$(document).ready(function() {

  $("textarea").each(function(){ update_monitor('.' + $(this).attr('class')); });

  $("textarea").keypress(function(event) {

    var text = '.' + $(this).attr('class');

    window.setTimeout(function() { update_monitor(text);},0);

  });

});

function update_monitor(text)
{
  var value = $(text).val().length;

  var colour = (value < 1 ? 'black' : (value < 1001 ? 'green' : 'red'));

  $(text + '_monitor').text(value + '/1000').css('color', colour);
}

The function is declared and separated entirely from the main code. Additionally, this script will handle infinite textarea/monitors on a single page, as long as the monitor has a classname that is the classname of the linked textarea plus '_monitor'.