Script Conflict
November 24, 2010 1:45 PM   Subscribe

I'm making a web page that has two scripts on it - a mootools script that shows/hides a div, and a JQuery cycle slideshow. And they aren't working together.

When both scripts are included, the mootools one works, and the JQuery cycle slideshow does not.

If I remove the mootools effect (i.e. remove the mootools.js include) , the slideshow works fine.

Is there a way to make these two plugins work together? It seems there is something in the mootools.js that breaks the cycle slideshow.
posted by bonsai forest to Computers & Internet (9 answers total) 2 users marked this as a favorite
Best answer: You may have a conflict with both of them using the $ namespace, in which for the JQuery you can prefix it with JQuery instead of $. A more direct approach would be to use JQuery entirely to do the show/hide behavior. If you have a div with "foo" for it's id, you can hide it with:


And likewise you can show it with:

posted by dgran at 1:49 PM on November 24, 2010

Best answer: You should probably try to avoid mixing frameworks as much as possible if you aren't comfortable with debugging javascript. Find a jQuery plugin that does what the mootools script does.
posted by empath at 1:50 PM on November 24, 2010

Best answer: May I suggest that you simple remove the mootools script & use jQuery's built in .slidetoggle function?
posted by romakimmy at 1:51 PM on November 24, 2010 [2 favorites]

er, simply
posted by romakimmy at 1:52 PM on November 24, 2010

Best answer: Yep, .slidetoggle would work. Or you could use the jQuery UI slide. Loading up both libraries for something like this is a bit wasteful.
posted by le morte de bea arthur at 1:54 PM on November 24, 2010

I would also suggest ditching mootools.

If you are dead set on running both of them I would read this: Using jQuery with Other Libraries
posted by Artw at 2:56 PM on November 24, 2010 [1 favorite]

Best answer: $('foo').show();

or $('#foo').toggle();
posted by rhizome at 4:08 PM on November 24, 2010 [1 favorite]

Response by poster: Thank you all, problem solved.

I ended up using this tutorial from Learning jQuery to get all the details right, and I recommend the site to others seeking how to implement simple jQuery functions.
posted by bonsai forest at 5:28 PM on November 24, 2010

Best answer: I'd also check out the documentation on the jQuery site -it's very well done.
posted by Artw at 6:51 PM on November 24, 2010

« Older Ouagadougou or Bust.   |   Stuck key on a digital piano Newer »
This thread is closed to new comments.