jQuery Gooey Menu VS Nivo Slider

[tominator360]

Hi! I love this website and have been its resource for quite some time. However, this time I'm having a conflict with two of my js (jQuery Gooey Menu and Nivo Slider). jQuery Gooey Menu overrides Slider and therefore Slider does not work. Please help! I'd debug it myself but I don't know much on js, unfortunately. Please get back to me asap as my website will go live next week!

-------------------------------------

/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.noConflict()

jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
})


var gooeymenu={
effectmarkup: '<li class="active"></li>',

setup:function(usersetting){
jQuery(function($){ //on document.ready
function snapback(dur){
if ($selectedlink.length>0)
$effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
}
var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
var $menulinks=$menu.find('li a')
var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
$effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
}
else{
var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
}
setting.defaultselectedBool=$selectedlink.length
$menulinks.mouseover(function(){
clearTimeout(setting.snapbacktimer)
var $target=$(this)
//alert($target.position().left+" "+$target.get(0).offsetLeft)

$effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
if (setting.defaultselectedBool==0) //if there is no default selected menu item
$selectedlink=$target //set current mouseover element to selected element
})
if ($selectedlink.length>0){
snapback(0)
$menu.mouseleave(function(){
setting.snapbacktimer=setTimeout(function(){
snapback(setting.fxtime)
}, setting.snapdelay)
})
}
$(window).bind('resize', function(){
snapback(setting.fxtime)
})
})
}
}

---------------------------------------------------
Slider code can be downloaded here
http://nivo.dev7studios.com/

Thanks!

[jscheuer1]

Both odf these scripts use jQuery so you should be fine simply by commenting out the noConflict line in the Gooey Menu like so:


/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//jQuery.noConflict()

jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
})


var gooeymenu={
effectmarkup: '<li cla . . .

One other thing to look out for is to use only one external script tag jQuery for the page, and to use the latest version (1.7.2 last I checked). Place the external script tag for jQuery before the other scripts.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.