Help with wrapping character with CSS span using Jquery

Question

I have this jfiddle working (http://jsfiddle.net/FJxcG/), but the same code does not work on my Drupal 7 website. I added the JS file to my theme .info file, and the JS is showing up in the source; it's just not displaying the end result on-screen.

The reason I need this is so that I can wrap a span class around all instances of the Trademark special character (™). That character is too large in the font I am using, and I'd like to use that css/jquery function to apply the span so I can give the TM a smaller font size without affecting the rest of the text around it. Some of the TM's are within menu links, so I can't simply hard-code the new span class.

Thanks!

Answer 1

Two things I can think of that could possibly cause the problem:

1. Your code runs before the document is fully loaded. To fix it try wrapping the function call inside $(document).ready:

   $(document).ready(function() {
     $('div').wrapInTag({
       words: ['™'],
       tag: '<span class="trademark">'
     });
   });
   

2. The CSS style are being overridden. Quickfix would be to add !important at the end.

   .trademark {
     font-size: 9px !important;
     vertical-align: top !important;
   }