JQuery to Prototype for AddThis

Question

I need to put a custom hover menu from http://www.addthis.com/help/toolbox, but Rails uses Prototype whereas the code given is in JQuery. I do not have much experience with either JavaScript library, if someone can help it'd be much appreciated!

$(function()
{
    $('.custom_button, .hover_menu').mouseenter(function()
    {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
    }).mouseleave(function()
    {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
    });

    var delay = 400;
    function hideMenu()
    {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden'))
        {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
});

Answer 1

So if you're not tied down to using Prototype and want to use jQuery instead, there's a plugin called jRails which serves as a drop-in replacement for Prototype.

Not that there's anything wrong with Prototype, but getting jQuery installed may end up being easier than trying to port it to Prototype. Hope that helps (sorry if it isn't exactly what you were looking for).

EDIT: This page has some good information about jQuery and Rails. Hope that helps.

Answer 2

You can replace Prototype with the jRails plugin. Or you can also extend prototype to your needs here is a simple example of a prototype equivalent for data:

Element.addMethods({
/**
 * Element#saveData(@element, key, value) -> @element
 * Caches given data
 * $('foo).saveData('keyName', 'Some random data');
 *
 */
saveData: function(element, key, value){
    if (Object.isUndefined(this['ATMCCache']) || !Object.isHash(this['ATMCCache'])){
        this['ATMCCache'] = $H();
    }
    this['ATMCCache'].set(key,value);
    return element;
},
/**
 * Element#getData(@element, key) -> Value or Hash
 * Returns requested key or entire hash
 * $('foo).getData('keyName');
 *
 */
getData: function(element, key){
    return this['ATMCCache'].get(key) || this['ATMCCache'];
},
/**
 * Element#hasData(@element) -> Boolean
 * Returns Boolean if element has any data stored
 * $('foo).hasData();
 *
 */
hasData: function(){
    return !Object.isUndefined(this['ATMCCache']);
}});

Just follow the documentation im sure you can take over from here and modify or do as you wish with this code.