Joomla上的jQuery和Ajax

Question

Here is the site that I'm talking about: http://imok.ro/demo/drtudor/index.php/our-practice/osteopathic-manual-medicine

It runs on Joomla 2.5, but loads with Ajax (a plugin). This plugin has a "scroll to top" option, but it conflicts with the jQuery script I added (for customized scrolling).

Besides the jQuery library, there is loaded 'jquery.backgroundpos.js' for background animation, and a 'jquery.mcustomscrollbar.concat.min.js' for the customized scrollbar.

So I decided to make a code of my own, that has 2 parts. My problem is, that they don't work together... Separately everything is fine.

(function(jQuery){
jQuery.noConflict();
    jQuery(window).load(function(){
        jQuery("#rt-mainbody").mCustomScrollbar({
            autoHideScrollbar:true,
            theme:"light-thin"  
        });
    });
})(jQuery);     

jQuery(document).ready(function() {
    jQuery('a').click(function(){
        jQuery('#rt-mainbody').animate({scrollTop:0}, 'slow');
            return false;
        });
});

What am I missing here??

Edit:

I am not yet an expert in web programming, and could not debug the mscustomscrollbar.js. I think because of the Ajax call I could not debug through Firebug. ( Is there a solution that I'm not aware of?) The code in the file is 1000 line long, and didn't know what to look for...

I continued to search for a solution, and I found that this plugin has many other functionalities, like a ScrollTo function, or .mCustomScrollbar("update") . This didn't solve the issue, so I figured, that this ("update") function should be called after the page is reloaded. In the Ajax plugins index.php there is a line that scrolls up the page after each event. I added the "update" function here, but for some reaseon it's not working... Is this written in Ajax, thus it's not compatible with the jQuery?

if($this->params->get('scrlUp', 1) == 1){
        //for nice scroll ;)
        JHTML::_('behavior.framework', true);
        $cnfg_data .= "\nFLAX.Html.onall('response', function(){new Fx.Scroll(
            document.getElementById('rt-mainbody')).toTop().mCustomScrollbar('update');    
        });";
    }

Thanks!

Answer 1

The first function is invoked immediately, when jQuery might not yet be available, and I'm not sure it makes sense to hook to both ready and load, it might be easier to debug it like this:

jQuery(function($) {
    $("#rt-mainbody").mCustomScrollbar({
        autoHideScrollbar:true,
        theme:"light-thin"  
    });
    $('a').click(function(){
        $('#rt-mainbody').animate({scrollTop:0}, 'slow');
            return false;
        });
});

then inside your mCustomScrollbar do some debug.log to see where it gets stuck