Emcro - Making IT Better.

There’s a lot of misinformation out there about using the jQuery and Prototype JavaScript libraries together on the same page. Here’s the quick how-to:

1. The jQuery library needs to be loaded AFTER the Prototype library, and BEFORE any Prototype functions are called.
2. Immediately after loading the jQuery library, add the following to your code:
   <script type=”text/javascript”>
     jQuery.noConflict();
     var $j = jQuery;
   </script>
3. Any time you want to call jQuery functions, you can do so with the new shortcut $j, or in long-form, jQuery. The following code is equivalent after defining the $j variable as outlined above:
   $j(“#some_div”).show();

   jQuery(“#some_div”).show();

As an aside, remember that if you’re switching from Prototype to jQuery, any time you want to reference a div you need to add the ‘#’ symbol in front of the name of the div. So this Prototype code:

Would become:

There you go, now you can get Prototype’s superior AJAX functions, and jQuery’s awesome effects, without having to deal with Scriptaculous.

Just finished implementing keyboard shortcuts throughout the Emcro site. I’ll be posting a full-length how-to on the blog this week, but here’s the cheat sheet:

0 – Homepage
1 – About
2 – Services
3 – Blog
4 – Contact
! – Latest blog post

I wish every website would implement shortcuts for the main navigation. It’s kind of like having Quicksilver on your website (and if you don’t know about Quicksilver for the Mac, get thee to Google pronto, check out some screencasts, and bask in its glory!)