My javascript fails when I load prototype.js, how to fix it?

Question

I'm trying to make a new design for a friend's Summer Cart system. The system usually has appearing/disappearing subcategory menus, but then I downloaded a javascript plugin called "lightbox" that shows an image in the current window while it keeps the page, instead of opening up a new window where to show the image. Now the problem is that this "lightbox" plugin has a file called "prototype.js" which causes the subcategories not to work...

Prototype.js: http://www.mediafire.com/?sj3xzdw2gchmca0

The code that makes the submenus appear/disappear:

$(function () {
var stepOver = 20; // The number of pixels of the upper box that are going to cover its parent.
    $("#DropdownCategories ul li").hover(
    function () {
        var firstUls = $(this).find('ul:first');
        firstUls.show();    
                var positionLeft = $(this).position().left - stepOver + $(this).outerWidth();
        var offsetLeft = $(this).offset().left - stepOver + $(this).outerWidth();   
    // Find the position that the box is going to end in.
        var wouldEnd = offsetLeft + firstUls.outerWidth();
                    // If the box ends out of the body we move the box on the left side.
        if (wouldEnd > $('body').innerWidth()) {
            positionLeft = $(this).position().left - firstUls.outerWidth() + stepOver;
        }
                    firstUls.css('position', 'absolute')
            .css('top', $(this).position().top + 'px')
            .css('left', positionLeft + 'px');
    },
    function () {
        $(this).find('ul:first').hide();
    }
);
});

The actual website: http://www.sladurko.com/product/277/bluza-kas-rakav.html

Try to load it on jsfiddle and then post in a neater format. — Sid, Feb 02 '12 at 21:18
possible duplicate of [jQuery & Prototype Conflict](http://stackoverflow.com/questions/134572/jquery-prototype-conflict) — zzzzBov, Feb 02 '12 at 21:21
Also: http://stackoverflow.com/questions/3128427/jquery-prototype-conflict — zzzzBov, Feb 02 '12 at 21:22
There is no need to upload to mediafire if your copy of [prototype.js](http://prototypejs.org/) is unchanged from the official version. — clockworkgeek, Feb 02 '12 at 22:00

score 1 · Answer 1 · answered Feb 02 '12 at 21:18

1

you're using jQuery, so you'll need to use noConflict

answered Feb 02 '12 at 21:18

zzzzBov

174,988
54
320
367

I tried putting jQuery.noConflict(); right above the code I posted above but it didn't solve anything :S – Biser Krustev Feb 02 '12 at 21:30
@BiserKrustev, because you're continuing to misuse `$`. Take the time to read through the page that I linked to and change your code. – zzzzBov Feb 02 '12 at 21:55

score 1 · Answer 2 · answered Feb 02 '12 at 22:02

Since you already use jQuery then choose a jQuery compatible lightbox plugin instead. Adding a whole separate library like Prototype is overkill for a simple task so avoid it. If you were already using Prototype then I would suggest avoid adding jQuery for the same reasons.

My javascript fails when I load prototype.js, how to fix it?

2 Answers2