GitHub - JangoSteve/jQuery-CSSEmoticons: jQuery plugin to style emoticons with pure CSS3 properties (no images)

JangoSteve / jQuery-CSSEmoticons Public

Notifications You must be signed in to change notification settings
Fork 35
Star 102

jQuery plugin to style emoticons with pure CSS3 properties (no images)

102 stars 35 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
javascripts		javascripts
stylesheets		stylesheets
README		README
index.html		index.html

Repository files navigation

jQuery CSSEmoticons plugin 0.2.7

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
        //exclude: 'pre, code, .no-emoticons'
      });
    })
  </script>
</head>
<body>
  ...
</body>

There are three 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 second parameter 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). That third parameter is exclude (''pre, code, .no-emoticons' by default), which allows you to exclude elements from being emoticonized using CSS selectors.

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/