<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.text').emoticonize({
//delay: 800,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
$('#toggle-headline').toggle(
function(){
$('#large').unemoticonize({
//delay: 800,
//animate: false
})
},
function(){
$('#large').emoticonize({
//delay: 800,
//animate: false
})
}
);
})
</script>
<style type="text/css">
#small { font-size: 8px; }
#large { font-size: 72px; }
#regular { font-size: 20px; }
.wrapped { width: 350px; }
</style>
</head>
<body>
<h1 class="text" id="large">
It's a pirate ?-) ARGHHH!!!! :)
</h1>
<p>^^ <i>I made this one up, but it's my plugin so it's supported</i> ^^</p>
<p><a href="#" id="toggle-headline">Click here</a> to toggle the "emoticonization" of the headline above.</p>
<p class="text" id="small">
Yo, this is some tiny text. :-)<br />
This is how emoticons stack up in a paragraph B)
</p>
<p class="text wrapped" id="regular">:O
Here is an example of what emoticons look like in a paragraph :-) You can tell here that the emoticons don't break the line-height in paragraphs like most of the image-replacement methods.
Also, here is a printed URL: http://www.alfajango.com. Notice the <code>:/</code> doesn't get styled. And one in a nested element
<span>:-)</span>
</p>
<p class="text no-emoticons">
This entire paragraph is excluded from being emoticonized ;-)
</p>
<p class="text">
This paragraph has specific elements excluded. So this works B) <span class="no-emoticons">But this doesn't :(</span>
</p>
<hr />
<p class="text" id="regular">
Here are all of the emoticons currently supported (though it's easy to add your own):
:-)
:-) :) :o) :c) :^) :-D :-( :-9 ;-) :-P :-p :-Þ :-b :-O :-/ :-X :-# :'( B-) 8-) :-\ ;*( :-*
:] :> =] =) 8) :} :D 8D XD xD =D :( :< :[ :{ =( ;) ;] ;D :P :p =P =p :b :Þ :O 8O :/ =/ :S :# :X B) O:)
</p>
<p class="text" id="regular">
And some special emoticons: <3 ;( >:) >;) >:( O_o O_O o_o 0_o T_T ^_^ ?-) [+=..]
</p>
<hr />
</body>