Question

My problem is probably rather simple, but I’m not at that skill level yet. I’d like to apply a text-scrambling effect with jQuery on my H3’s in my WordPress sidebar. I found the H3 tags here (before_title and after_title):

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title" >',
    'after_title' => '</h3>',
) );

I tried adding onmouseover='$("#unscramble").unscramble(); return false;' in the opening h3 tag, but it broke my page, unsurprisingly. I’m not sure how I’d go about applying this effect anyway. The way it’s arranged now, I suppose mousing over one trigger will trigger all h3s on the page, whereas I only want to trigger the current h3 I’m mousing over. I’m trying to use the ‘unscramble’ effect which can be found here at https://github.com/jaz303/jquery-grab-bag

Any help greatly appreciated 🙂

Answer 1

You have to make sure you are applying the ID (unscramble) that you are selecting in your jQuery (the $('#unscramble')-part) to your h3s (although this would not work with more than one h3 so forget about this) OR select the element that triggers the function via $(this) (this is strongly preferred as you can use it with as many elements as you like).

Would read: onmouseover='$(this).unscramble();'
You can skip the return false; btw as this is not a link or something else with default mouseover behavior (at least that’s what I think).

See those examples: http://jsfiddle.net/uZvYw/1/ and http://jsfiddle.net/uZvYw

Edit: As others have stated I too would think it would be a little better to generate this behavior in a seperate <script>, but that’s just a side note