March 12, 2024 4:05 am

How to create Emoticons with CSS & jQuery Plugin

We use emoticons all the time in our chat conversions, messaging, comments and even in our emails to show that your feelings through some symbols like smile, sad and laugh etc. So this tutorial is all about emoticons using this tutorials demo and download code you can show your emoticons in your web projects very easily. We use a jQuery plugin with CSS to perform this task and make it very simple and easy to understand for our readers.

How to create emoticons with CSS & jQuery Plugin

[wpdm_file id=78]DEMO

Let’s explain it and use it in our websites comments start with a smile 🙂

Used a jQuery plugin Oleg Slobodskoi its a very simple to integrate and string based parser  and very dynamic where you can add your own emoticons keywords, and any thing in emoticons you want to you can do.

Here is the list of all emoticons supported by this plugin.

Basically it replace your symbols with a graphic image using CSS class for each icon there is a separate class when we write a text with symbols ( “:)”, “:D” ) it uses regular expression to find these emoticons and replace them with a span with emoticon class.

We have created its demo on demo.phpgang.com where you can test its functionality live.

Include CSS and jQuery Libraries:

<link href="emoticons.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="emoticons.js"></script>

We have included CSS and jQuery library for emoticons.

jQuery initializing the plugin:

<script>
$(document).ready(function() {
    var definition = {"smile":{"title":"Smile","codes":[":)",":=)",":-)"]},"sad-smile":{"title":"Sad Smile","codes":[":(",":=(",":-("]},"big-smile":{"title":"Big Smile","codes":[":D",":=D",":-D",":d",":=d",":-d"]}};
    $.emoticons.define(definition);

    $('#comment').keyup(function(e)
    {
        if(e.keyCode == 13) // Check Enter key pressed
        {
            var comment = $('#comment').val(); // Assign value to a variable.
            if(comment == "") //Validation
            {
                alert("Please write something in comment.");
            }
            else
            {
                var textWithEmoticons = $.emoticons.replace(comment); // Replace your plain text with emoticons.
                $("#commentbox").append("<div class='commentarea'>"+textWithEmoticons+"</div>"); // Append in comments box with emoticons.

                $('#comment').val(""); // Empty textbox.
            }
        }
    });
});
</script>

This jQuery initialize Plugin and serve you emoticons on your posted comments. var definition define all emoticons in this which can be replaced on text submission here is only few, in our demo define all emoticons defined.

All together in HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>How to create a comment system with jQuery | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="emoticons.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="emoticons.js"></script>
<script>
$(document).ready(function() {
    var definition = {"smile":{"title":"Smile","codes":[":)",":=)",":-)"]},"sad-smile":{"title":"Sad Smile","codes":[":(",":=(",":-("]},"big-smile":{"title":"Big Smile","codes":[":D",":=D",":-D",":d",":=d",":-d"]},"cool":{"title":"Cool","codes":["8)","8=)","8-)","B)","B=)","B-)","(cool)"]},"wink":{"title":"Wink","codes":[":o",":=o",":-o",":O",":=O",":-O"]},"crying":{"title":"Crying","codes":[";(",";-(",";=("]},"sweating":{"title":"Sweating","codes":["(sweat)","(:|"]},"speechless":{"title":"Speechless","codes":[":|",":=|",":-|"]},"kiss":{"title":"Kiss","codes":[":*",":=*",":-*"]},"tongue-out":{"title":"Tongue Out","codes":[":P",":=P",":-P",":p",":=p",":-p"]},"blush":{"title":"Blush","codes":["(blush)",":$",":-$",":=$",":\">"]},"wondering":{"title":"Wondering","codes":[":^)"]}}};
    $.emoticons.define(definition);

    $('#comment').keyup(function(e)
    {
        if(e.keyCode == 13)
        {
            var comment = $('#comment').val()
            if(comment == "")
            {
                alert("Please write something in comment.");
            }
            else
            {
                var textWithEmoticons = $.emoticons.replace(comment);
                $("#commentbox").append("<div class='commentarea'>"+textWithEmoticons+"</div>");

                $('#comment').val("");
            }
        }
    });
});
</script>
<style>
.status
{
    width:350px;
    font-size: 14px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.commentarea
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    border: thin;
    border-color: white;
    border-style: solid;
    background-color: hsl(0, 0%, 96%);
    padding: 5px;
}
#comment
{
    width: 357px;
    height: 23px;
    font-size: 15px;
}
.main
{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}
</style>
  </head>
  <body>
    <h2>How to create emoticons with CSS & jQuery Plugin example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div class="main">
<div class="status"If you are doing web application development then you have to separate templates from your controller code and make your application simple.</div>
<div id="commentbox">
<div class="commentarea">WOW thats great..... 
<span title="Heart" class="emoticon emoticon-heart">(h)</span>
<span title="Smile" class="emoticon emoticon-smile">:)</span>
</div>
<div class="commentarea">is it really great <span title="Yes" class="emoticon emoticon-yes">(y)</span></div>
<div class="commentarea">
<span title="Covered Laugh" class="emoticon emoticon-covered-laugh">(giggle)</span> 
<span title="Clapping Hands" class="emoticon emoticon-clapping-hands">(clap)</span> 
<span title="Rolling on the floor laughing" class="emoticon emoticon-rofl">(rofl)</span> 
<span title="Heart" class="emoticon emoticon-heart">(h)</span> <span title="Cash" class="emoticon emoticon-cash">(cash)</span>
</div>
</div>
<input type="text" name="comment" id="comment" placeholder="Write a comment...." />
</div>
</body>
</html>

This is the complete code of our demo I hope it helps you with a smile 🙂

[wpdm_file id=78]DEMO

Please don’t forget to give us your feedback in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

7 responses to “How to create Emoticons with CSS & jQuery Plugin”

  1. Frank says:

    Hello there. Nice script. I’ve tried implementing it into my shout box but i’ve been having some problems with the javascript. How do I go about adding it to my shout messages? i can get them to display, but not append to the smilies in the posts. this is how the data is posted:

    $(“#shout_message”).keypress(function(evt) {
    if(evt.which == 13) {
    var iusername = $(‘#shout_username’).val();
    var imessage = $(‘#shout_message’).val();
    var textWithEmoticons = $.emoticons.replace(imessage);
    post_data = {‘username’:iusername, ‘message’:imessage};
    $.post(‘includes/shout.php’, post_data, function(data) {
    $(data).hide().appendTo(‘.message_box’).fadeIn();

    any ideas? 🙂

    • huzoorbux says:

      Here is your problem

      post_data = {'username':iusername, 'message':imessage};

      replace with "post_data = {'username':iusername, 'message':textWithEmoticons};"

      You are sending simple text in your post send textWithEmoticons variable.

  2. tom says:

    how to replace all smiles on a Page?

    example

    🙁

  3. mmk says:

    Hello Huzoor,

    thank you very much, that’s fantastic!

    Am I allowed to use this in an commercial app?

    Kind regards from Germany,
    Martina Maria

Leave a Reply

Your email address will not be published. Required fields are marked *