jQuery Font Selector – version 2

A guy called Rob just commented on the jQuery Font picker I posted a while back – and asked whether I could provide an example.

Looking at the code I thought it was in need of a refresh, so have just rewritten it. You can see the jQuery font selector demo here.

The plugin hasn’t been extensively tested, but does seem to work OK in Chrome, Firefox and IE7 and 8. Enjoy!

/**
* Font selector plugin
* turns an ordinary input field into a list of web-safe fonts
* Usage: $('select').fontSelector();
*
* Author     : James Carmichael
* Website    : www.siteclick.co.uk
* License    : MIT
*/
jQuery.fn.fontSelector = function() {

  var fonts = new Array(
'Arial,Arial,Helvetica,sans-serif',
'Arial Black,Arial Black,Gadget,sans-serif',
'Comic Sans MS,Comic Sans MS,cursive',
'Courier New,Courier New,Courier,monospace',
'Georgia,Georgia,serif',
'Impact,Charcoal,sans-serif',
'Lucida Console,Monaco,monospace',
'Lucida Sans Unicode,Lucida Grande,sans-serif',
'Palatino Linotype,Book Antiqua,Palatino,serif',
'Tahoma,Geneva,sans-serif',
'Times New Roman,Times,serif',
'Trebuchet MS,Helvetica,sans-serif',
'Verdana,Geneva,sans-serif' );

  return this.each(function(){

    // Get input field
    var sel = this;

    // Add a ul to hold fonts
    var ul = $('<ul class="fontselector"></ul>');
    $('body').prepend(ul);
    $(ul).hide();

    jQuery.each(fonts, function(i, item) {

      $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a></li>');

      // Prevent real select from working
      $(sel).focus(function(ev) {

        ev.preventDefault();

        // Show font list
        $(ul).show();

        // Position font list
        $(ul).css({ top:  $(sel).offset().top + $(sel).height() + 4,
                    left: $(sel).offset().left});

        // Blur field
        $(this).blur();
        return false;
      });

      $(ul).find('a').click(function() {
        var font = fonts[$(this).attr('class').split('_')[1]];
        $(sel).val(font);
        $(ul).hide();
        return false;
      });
    });

  });

}

And here is the required CSS:

ul.fontselector {
  background: white;
  border: 1px solid #ccc;
  border-top: 0;
  font-size: 14px;
  float: left;
  list-style: none;
  margin: 0;
  padding:0;
  line-height: 1.2;
  z-index:    10;
  position:   absolute;
}
ul.fontselector li {
  margin:   0;
  padding:  0;
  list-style: none;
}
ul.fontselector a {
  display:    block;
  padding:    3px;
  color:      black;
  text-decoration: none;
}
ul.fontselector a:hover {
  background: #ddd;
  cursor:     pointer;
}