Home › Forums › JavaScript › Can’t make work 2 jQuery plugins at the same time! › Re: Can’t make work 2 jQuery plugins at the same time!
its something in <script type=’text/javascript’ src=’js/magicLine.js’></script>
I created my own to see what was going on. Once I added that file accordion quit working.
However, when i placed accordion and the magicline in the same script they both worked (note- I have this in the header not a different file):
$(function()
{
$("#accordion").accordion();
var $el, leftPos, newWidth,
$mainNav = $("#example-one"),
$mainNav2 = $("#example-two");
/*
EXAMPLE ONE
*/
$mainNav.append("<li id=’magic-line’></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
/*
EXAMPLE TWO
*/
$mainNav2.append("<li id=’magic-line-two’></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current_page_item_two a").attr("rel"));
$("#example-two li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});
</script>