Friday, September 21, 2012

Gmail Style Animated Emoticons jQuery Plugin

9/21/2012

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>

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

7 comments :

  1. 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?

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

      Delete
    2. Plese note that <3 isnt working!!

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

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

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

      Delete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism