Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
jQuery Character Table

The other day I was looking for the HTML code for the ⌘ (in case you can't see it, that's the command key symbol), found in mac keyboards. It was not the first time I was looking for the HTML code for one of those funky characters. I remember having a hard time trying to represent some Math symbols, like sums and integral equations from my college Calculus days.

I thought this would be a nice opportunity to create a small jQuery sample that renders a range (or ranges) of HTML characters along with their codes.

I started with a simple HTML page, leaving all the JavaScript in an external file.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>HTML Characters</title>
    <meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8">
    <script type="text/javascript" 
      src="jquery-1.2.6.js"></script>
    <script type="text/javascript" 
      src="char-table.js"></script>
  </head>
  <body>
    From (hex): <input id="range_from" type="text"  /> <br/>
    To (hex): <input id="range_to" type="text"  /> <br/>
    <input type="button" value="Load" id="btnLoad" />
    <input type="button" value="Load Example" id="btnLoadEx" />
    <input type="button" value="Load Keyboard Symbols" 
         onclick="CHARTABLE.loadKeyboardSymbols();" />
    <table id="char_table" border="1" />
  </body>
</html>

Here's the JavaScript in the file char-table.js.

$(function(){
  //here we put everything that will run when the page is ready

  $('#btnLoad').click(function(){
    // notice how we get the value of the input fields using val()
    // notice how to parse hex numbers in JS
    var from = parseInt($('#range_from').val(), 16);
    var to = parseInt($('#range_to').val(), 16);
    CHARTABLE.loadRange(from, to);
  });

  $('#btnLoadEx').click(function(){
  //setting the value of each input field
    $('#range_from').val('2190');
    $('#range_to').val('2195');
  //fire the click event of the Load button
    $('#btnLoad').click();
  });

});

// the CHARTABLE object acts as a namespace
var CHARTABLE = {
   loadRanges: function() {
    this.clearTable();
    for(var i=0; i<arguments.length; i++) {
      this.appendRange(
        parseInt(arguments[i][0], 16), 
        parseInt(arguments[i][1], 16)
        );
    }
  },

  loadRange: function(from, to) {
    this.clearTable();
    this.appendRange(from, to);
  },

  clearTable: function(){
    //the html() function is how we replace the innerHTML with jQuery
    $('#char_table').        
      html('<tr><th>Character</th><th>Code</th></tr>');
  },

  appendRange: function(from, to){
    //we can create stand alone DOM elements with $()
    var tbody = $('<tbody/>');
    for(var i=from; i<=to; i++) {
      //notice how we can convert a number to hex
      $('<tr>').
        append('<td>&#x' + i.toString(16) + ';</td>').
        append('<td>&amp;#x' + i.toString(16) + ';</td>').
        appendTo(tbody);
    }
    //adding the tbody to the table at the end
    //  renders faster than adding each row to
    //  the table as we go
    $('#char_table').append(tbody);
  },

  loadKeyboardSymbols: function(){
    this.loadRanges(
      ['21e7', '21e7'],
      ['21a9', '21a9'],
      ['2303', '2305'],
      ['2318', '2318'],
      ['2324', '2327'],
      ['232b', '232b'],
      ['2190', '2198'],
      ['21de', '21df'],
      ['21e4', '21e9']
    );
  }
};

Now enter the range from 2100 to 2400 and stare at a whole bunch of characters that can become useful in some situations.

Note: The characters don't render equally in IE and Firefox, but a large number of them render just fine in both browsers.


Posted 12-29-2008 7:31 PM by sergiopereira

[Advertisement]

Comments

Ed wrote re: jQuery Character Table
on 12-30-2008 9:28 AM

Could you add some explanation or at least comments to that JS code?

sergiopereira wrote re: jQuery Character Table
on 12-30-2008 9:35 AM

@Ed, I was actually planning to do just that anyway. I also modified the code a little bit to use a namespacing object to hold all those stinking global functions that the original code had. It works almost the same way, you just need to remember to prefix the calls with "CHARTABLE" or "this" (for code inside CHARTABLE.)

Dew Drop - December 30, 2008 | Alvin Ashcraft's Morning Dew wrote Dew Drop - December 30, 2008 | Alvin Ashcraft's Morning Dew
on 12-30-2008 6:40 PM

Pingback from  Dew Drop - December 30, 2008 | Alvin Ashcraft's Morning Dew

DotNetShoutout wrote jQuery Character Table
on 12-31-2008 5:00 PM

Thank you for submitting this cool story - Trackback from DotNetShoutout

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)