Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin to style emoticons with pure CSS3 properties (no images)
JavaScript
tag: v0.2.1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
javascripts
stylesheets
README
index.html

README

jQuery CSSEmoticons plugin 0.2.1

Copyright (c) 2010 Steve Schwartz (JangoSteve)

Dual licensed under the MIT and GPL licenses:
  http://www.opensource.org/licenses/mit-license.php
  http://www.gnu.org/licenses/gpl.html

-------------------------------------------------------------------------------------------

VIEW FULL DOCUMENTATION AND DEMOS AT: http://www.alfajango.com/blog/jquery-css-emoticons-plugin/

DOWNLOAD AND RATE JQUERY CSSEMOTICONS AT: http://plugins.jquery.com/project/cssemoticons

FORK AND VIEW SOURCECODE AT: http://github.com/JangoSteve/jQuery-CSSEmoticons

-------------------------------------------------------------------------------------------

Welcome to the homepage for the CSS Emoticons jQuery Plugin. If you are unsure what this is or why you would want to use pure CSS3/javascript to display emoticons, please see our introduction: http://www.alfajango.com/blog/the-perfect-application-for-css3-icons-emoticons (The Perfect Application for CSS3 Icons: Emoticons)

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).

The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported).

So, you have a block of text like this:

<div class="comment">
  Hi, this is a great plugin! :-)
</div>

And in the head of your document, you include the files and cssEmoticonize the desired DOM elements:

<html>
<head>
  <link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script src="javascripts/jquery.cssemoticons.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.comment').emoticonize({
			  //delay: 800,
        //animate: false
      });
    })
  </script>
</head>
<body>
  ...
</body>

There are two optional parameters. One called animate (true by default), which animates the emoticons on page load and when you hover over them to show you the transition from the original text to the stylized emoticon. To see this animation effect, view the demo with Chrome or Safari. The other is delay (500 by default), which allows you to set how long the browser waits (in milliseconds) before styling up the emoticons (which makes the animation stand out more, otherwise it happens too quickly and loses some of its effect).

If for some reason, you’d like to “unemoticonize” any of your elements, well there’s a function for that.

$('.comment').unemoticonize();

I’d write more documentation, but really that’s all there is to it. Enjoy!

View the Live Demo: http://www.alfajango.com/blog/jquery-css-emoticons-plugin/jquery-css-emoticons-demo/
Something went wrong with that request. Please try again.