Sunday, November 28, 2010

jQuery UI Keyboard Widget

If you need support, please contact me here:

I found this widget by Jeremy Satterfield which adds an virtual keyboard to any input or text area. I really liked it and had a lot of ideas that I wanted to add :P

So, I made a github repository, added a few of my ideas to the widget so now I present to you updated keyboard widget! (more updates to come!)

Here are some of the changes I made to version 1.5:
  • Changed class of preview window from 'ui-state-active' to 'ui-widget-content' because it looks bad in some themes.
  • Added 'ui-widget-content' class to the element (input or textarea).
  • Added International keyboard Layout (AltGr key) and expanded the keysets up to four.
  • Added more special/"action" keys:
    • Previous text only keys now have a companion symbol only key. The abbreviated names contain only a symbol so as to fit the layout style as desired.
    • Added alt key to allow accessing two additional key sets.
    • Changed name of {neg} to {sign}. This key changes the sign of the input.
    • Added tab key
  • Fixed positioning utility problem I added in the last version - show the popup before positioning (duh).
  • Added position option to allow positioning the keyboard anywhere around the input/textarea.
  • Added display option to support multiple languages or change key symbols.
  • Added actionClass option to allow changing the style of the accept and cancel keys.
  • Added lockInput option to lock or unlock the ability to access the preview window.
  • Added keyBinding option to change the keyboard key behaviour.
  • Added useCombos to enable the dead key emulation which allows entering diacritic key combinations.
  • Using the escape key now closes the keyboard.
  • Added mousewheel support to allow scrolling through the other keysets while hovering over a key.
  • Added ARIA support (may not be complete).
And on my to do list are:
  • Allow inserting text at the caret inside the preview window.
  • Add max length setting.
  • Add additional buttons to change key sets (similar to the alt key).
  • Add callbacks.
  • Add _destroy function.
  • Work on setting up one keyboard per layout to speed up initialization.

Wednesday, November 17, 2010


There is a very cool sliding accordion on Apple's Store site to compare various computers (click compare then scroll).

SqueezeBox is a jQuery plugin written to emulate that effect. It was designed to use the same themes available for jQuery UI, or you can add your own theme.

Click on the image or go to the demo page.

  • Easily change the theme but just loading in a different jQuery UI theme (Redmond theme shown).
  • SqueezeBox works with both collapsible and non-collapsible blocks.
  • Activate a header numerous ways:

    1. Use browser hash marks to target the header ID - used on initial page load.
    2. Click on any header to make it active - all headers above it will collapse using a smooth animation.
    3. Use the script to set the active header.
Download it from my github repository.

Monday, November 8, 2010

Kwicks for jQuery v2.0

I was recently was inspired to work on Kwicks for jQuery v1.5.1 by Jeremy Martin because it hasn't been updated for a few years. So, I ended up changing the plugin structure to make it easier (for me) to add a getter, setter, event hooks and custom events.

Check out the demo. Hopefully there is enough documentation to make adding a kwick to your own site easy! Download Kwicks for jQuery 2.0 here.