Question

How do I prevent 2 .js files to be overwrite in my html code?
I have 2 .js files one for scroll bars and another one for dropdown menu.
when I import both files in my template code, the first one won’t work (second one will overwrite the first one).

I’m confused how to prevent this and make both working.

Answer 1

well, overwrite is not the correct word for it. They might be conflicting eachother, due to global variables having the same name, perhaps. It’s impossible to find out what the problem is, without looking at them…

jQuery and MooTools are known for interfering with eachother. You should use, in YOUR code, before anything else:
In the begining of you login.js file put the following line:

var J = jQuery.noConflict();

and replace every $ for J

then, on scroll.js, where you see this at the end:

window.addEvent('domready', function(){             
    // -- first example, vertical scrollbar --
    makeScrollbar( $('scrollbox'), $('scrollbar'), $('handle') );
});

replace the makeScrollbar line for

makeScrollbar( J('#scrollbox')[0], J('#scrollbar')[0], J('#handle')[0] );

It should work fine but, as i said, you should look for a solution that uses only jQuery or Mootools