Question

I have a webpage which I’m updating, this page uses Prototype together with Lightbox. I would not like to change the current page to jQuery-only as I’m not sure what else uses Prototype and would break subsequently if I don’t include Prototype anymore.

My problem is the following:

I have a few TD’s which I would like to fade in and fade out with the click of a button. This works perfectly when I temporarily take out Prototype. As soon as I put Prototype back in, the fadeOut() jQuery function breaks completely. I suspect this is because Prototype also has a fadeIn() & fadeOut() function.

Is there a way I can force Prototype not to recognise these functions as its functions and still have jQuery perform them perfectly?

Here is my jQuery-code:

var $j = jQuery.noConflict();

$j(document).ready(function () {    
    $j("a.archiveBtn.2009").click(function () {
        $j("td.archive.2009").fadeIn();
        $j("tr td.archiveBtn").css("paddingBottom", 20);
        $j("tr td.archiveBtn").css("borderBottom", "#999 1px dashed");
        $j("a.hideArchive.2009").show();

        return false;
    });

    $j("a.hideArchive.2009").click(function () {
        $j("td.archive.2009").fadeOut(function () {
            $j("tr td.archiveBtn").css("paddingBottom", 0);
            $j("tr td.archiveBtn").css("borderBottom", "none");
        });
        $j(this).hide();

        return false;
    });

    $j("tr td.archiveBtn").parent().prev("tr").children("td").css("paddingBottom", 20);
});

Any help would be appreciated and thanks in advance.

Answer 1

In the end, I determined that Prototype.js was only there for Lightbox to work, so I disabled Prototype.js and incorporated the Lightbox jQuery plugin.

My code now works perfectly.