Script is interfering with another

I have two different scripts one is a java slideMoo and the other is a jqurey tab.

Some how the both work fine with out the other but with both in one page only the SlideMoo works.

It has something to do with the javascript in the head tags cause once I take one or the other out either would work just fine.

Does anyone have any ideas on what is going on.

Here are the examples I have.

SlideMooTool - http://site.totallymotorsports.com/scripts/itemslider/index.html

jquery Tabs - http://site.totallymotorsports.com/tabs/tabs.html

My Page I am working on - http://totallymotorsports.com/1sckybu1820m.html

Thanks,
Adam

 

simple way is wrap it with function(){}, but may not always work
complex way is rewrite the code and use unique var name or private var name

 

sigh this page is a mess - its not good to load so many frameworks and ui components into the same site. the closure dodo me suggests is one of several things you can try here.

1. upgrade to latest mootools. basically, it has 'compatibility' mode which means if some other framework (in your case jquery) has defined $, it reverts to using document.id

when doing so, you need to modify the mootools scripts to be behind a closure like so:

(function($) {

// mootools code that relies on $ being a mootools selector...

})(document.id);

Code (javascript):

this is also doable in reverse, i.e.

(function($) {

// jquery code that relies on $ being the jquery singleton

})(jQuery);

Code (javascript):

keep in mind that such scoping is going to be with limited effects when one of the frameworks is prototypical (mootools) and it also affects native prototypes like Array, Element, Number etc. code that iterates through members of these prototypes in the wrong way (for example, for ... in) will also pull data from the prototype.

for instance:

Array.implement({
    foo: function() {
        // some code
    }
});

var foo = [1,2,3];

for (var a in foo) {
    alert(foo[a]);
}

Code (javascript):

this will output not only 1 2 3 but all array functions defined by mootools as well as foo. if any code does not do
if (foo.hasOwnProperty(a)) first, then it will break.

2. think on what you are using and what you need then drop one of the two frameworks. i'd favour this approach as its a bad practice to stuff users for so many includes and it slows browser performance etc. chances are, slidemoo is available for jquery in some shape or another, find it, add it, drop mootools. or, get a mootools tabs plugin and drop jquery (check the http://mootools.net/forge/).

either way you choose, good luck.