Gmail Style Animated Emoticons jQuery Plugin

7 comments
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>

7 comments

It would really be nice if the stupid Box page would finish loading so you could actually download the archive.

Maybe provide an alternate link?

Easy to Download ! i Downloaded just now!
May be your internet like a snail :P

Plese note that <3 isnt working!!

Splendid. Good job Arvind. Keep up the hard work. Probably the easiest way to create gmail type animated emotions.

Giving Error : TypeError: Object doesn't support property or method 'live'

The plugin was written at the times of $.live
Please switch to $.on

We would love to hear from you...

back to top