Here is another interesting jQuery plugin from theonlytutorials.com. Emotion icons jQuery plugin, shortly emoticons jquery plugin.
You might wonder how Facebook, Skype or any other social networking websites changing the smileys to emoticons when you type. The answer is JavaScript.
In this post, I’m giving a jQuery plugin that you can immediately use it in any of your projects and the emoticons script is very simple to implement.
Demo or Download the plugin here:
How to use the plugin?
var res = $('inputSelector').emoticons();
$('outputSelector').html(res);
inputSelector can be a text box or a textarea
outputSelector can be a div or a span
If you want to give your own folder location and image extension:
var res =
$('.inputSelector').emoticons({
folder: 'my',
img_ext: 'gif'
});
$('outputSelector').html(res);
Here is a complete usage example of emoticons plugin:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.emoticons.js"></script>
<script>
$(function(){
//call the emoticons function on load
var res = $('.mytextbox').emoticons();
$('#output').html(res);
//call the functions while typing
$('.mytextbox').keyup(function(){
var res =
$('.mytextbox').emoticons();
$('#output').html(res);
});
});
</script>
</head>
<body>
<table align="center" width="500px">
<tr><td>
<p>Copy paste the below symbols and see the result</p>
:) :( :D 8=) ;) :o ;( (:| :| :* :p :$ :^) |-) |( ]:) :& x( 8-|
<br /><br />
</td></tr>
<tr><td>
<h3>Emoticons jQuery Plugin by Theonlytutorials.com</h3>
<textarea class="mytextbox" style="width:100%; border: 1px lightgray solid;">this is good :)</textarea>
<div id="output" style="width: 100%; margin-top: 10px;"></div>
</td></tr>
</table>
</body>
</html>
To keep the jQuery plugin easily understandable, I have written it very simple. Enjoy the day!