Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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!

#80028
dcp3450
Participant

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):

Code:
<script>
$(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>