The following demos are provided to show how to use JoyPixels to its fullest potential. Feel free to dig in and take these demos apart to see how it all works.

Javascript Conversion

• .toShort(str) - native unicode -> shortnames

  This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it to their corresponding shortnames. (we recommend this for database storage)

• .shortnameToImage(str) - shortname -> images

  This demo shows you how to take input containing only shortnames and translate it directly to JoyPixels images. (when displaying the unified input to clients)

• .toImage(str) - native unicode + shortnames -> images (mixed input)

  This demo shows you how to take input containing both native unicode emoji and shortnames, and translate it into JoyPixels images for display.

PHP Conversion (recommended)

• toShort($str) - native unicode -> shortnames

  This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it to their corresponding shortnames. (we recommend this for database storage)

• ASCIItoShort($str) - ASCII characters -> shortnames

  This demo shows you how to take ASCII input and translate it to their corresponding shortnames. (we recommend this for database storage)

• shortnameToImage($str) - shortname -> images

  This demo shows you how to take input containing only shortnames and translate it directly to JoyPixels images. (when displaying the unified input to clients)

• shortnameToUnicode($str) - shortname -> unicode

  This demo shows you how to take input containing only shortnames and translate it to native unicode

• toImage($str) - native unicode + shortnames -> images (mixed input)

  This demo shows you how to take input containing both native unicode emoji and shortnames, and translate it into JoyPixels images for display.

Extras

• JoyPixels Web Font

  Integrate our new WOFF font into your website.

• shortnameToUnicode(str)

  Change from shortnames to native unicode emoji.

• Shortname Autocomplete

  Easily add shortname autocomplete functionality to any text input on your page.

• ASCII Smiley Conversion

  With one quick step you can start converting common ASCII smileys to their corresponding images.

• Alternate Alt Tags

  Change from the native unicode emoji in the resulting alt tags to their shortnames insteads.

• Live Preview Box

  Display converted Emoji in a preview box as the user is typing.

• Conversion HTML Class

  Stick a class of .convert-emoji on any HTML element and automatically convert native unicode emoji and/or shortnames to images after page load.

• Convert on Form Submission

  Converts unicode input to shortnames once the user submits the form.

• JoyPixels Awesome

  By using the joypixels-awesome CSS you can easily display CDN-sourced images just by adding a class to your element.

• Sprites (PNG)

  With an additional CSS file you can use JoyPixels as resizeable PNG sprites (up to 64x64).