The Book and the Cover » Uncategorized http://benjaminsterling.com Ok, you did not judge the book by it's cover, great. Now, read the whole thing before passing judgment. Mon, 16 Jan 2012 21:58:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Turn that frown right side up http://benjaminsterling.com/turn-that-frown-right-side-up/ http://benjaminsterling.com/turn-that-frown-right-side-up/#comments Tue, 18 Nov 2008 01:25:13 +0000 Benjamin Sterling http://benjaminsterling.com/?p=102 Ok, this is going to be a real quick post, Toby Pitman did a guest post over at CSS-Tricks and it got me thinking what other simple things can be done with the css property "-webkit-transform."  The best I could come up with was to flip those emotional icons upright.

Note: this will only work in WebKit browsers as of this writing so don't tell me it does not work in IE7 or below or in Firefox 3 or below, I know, it is meant to be a test for WebKit.

So, lets assume you have the following conversation:

You are so cute :)

No, you are ;)

But I said it first >:(

Why are you getting mad :O

I don't know :S

:/

Great convo right? Not let's put some JavaScript into the mix here:

PLAIN TEXT
JavaScript:
  1. $(document)
  2. .ready(function(){
  3.     $('p').each(function(){
  4.         var jqthis = $(this);
  5.         var txt = jqthis.html().replace(/\B(:\)|;\)|>:\(|:O|:S|:\/)/g, '<span class="icon">$1</span>');
  6.         jqthis.html( txt );
  7.     });
  8. });

Basically what that is saying is grab all the paragraphs, grab the HTML out of them.  Use some RegEx to search through the characters to find the emotional icons, and then replace them with a SPAN and the characters that are being replaced (that would be the $1).

Now lets add some style to the mix:

PLAIN TEXT
CSS:
  1. <style>
  2. .icon{
  3.    -webkit-transform: rotate(90deg);
  4.    color:#ff0000;
  5.    display:inline-block;
  6.    padding:0 2px;
  7. }
  8. </style>

And this is what we get:

You are so cute :)

No, you are ;)

But I said it first >:(

Why are you getting mad :O

I don't know :S

:/

Neat trick, nothing real special, but the possibilities are really beginning to open up.

]]> http://benjaminsterling.com/turn-that-frown-right-side-up/feed/ 2