Gmail Style Animated Emoticons jQuery Plugin ~ Web Speaks

Gmail Style Animated Emoticons jQuery Plugin

Here is the new jQuery plugin for showing Gmail like animated emoticons. If you have loved the animated emoticons of Gmail then you will love this jQuery plugin. The emoticons start animating when you place the mouse over them. The plugin uses regular expressions to find the symbols and convert them into animated characters. See the emoticons in action.

Live Demo Download Script

Basic Setup

You need to add following files in your web page to use the gEmoticon plugin:

<link href="style/gemoticons.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.gemoticons.js"></script>

Here is the list of icons with their symbol and corresponding codes:

Call the Plugin (Static Block)

If you want to convert the code in a static HTML block into the animated icons, you just need to call the plugin for that HTML block as:

jQuery(document).ready(function(){
    $(".chat").gemoticon();
});

Call the Plugin (Dynamically)

If you want the plugin to convert your text into animated icons dynamically (as in case of chat box), tou need to do something like this:

jQuery(document).ready(function(){
    jQuery('#clickme').click(function(){
        var htm = '';
        var val = jQuery('#text').val();
        jQuery('#text').val('');
        var el = jQuery('<div class="chat">'+val+'</div>');
        jQuery('.chatbox').append(el);
                //Call the plugin for neewly created HTML block
        jQuery(el).gemoticon();
    });
});

Example code

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style/gemoticons.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.gemoticons.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#clickme').click(function(){
            var htm = '';
            var val = jQuery('#text').val();
            jQuery('#text').val('');
            var el = jQuery('<div class="chat">'+val+'</div>');
            jQuery('.chatbox').append(el);
            jQuery(el).gemoticon();
        });
    });
    </script>
</head>
<body>
<h2>Gmail Like Animated Emoticons Plugin</h2>
<div id="main">
    <textarea name="text" id="text">I <3 love you</textarea>
    <button id="clickme">Send chat</button>
</div>
<div class="chatbox"></div>
<body>
</html>