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.
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. => <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 🙂
Please don’t forget to give us your feedback in comments.
Tutorial Categories:
Thats great 🙂 How about http://js-emotifier.appspot.com ?
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? 🙂
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.
how to replace all smiles on a Page?
example
🙁
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
You can use it in commercial app.
Great, thanks again!