Error with Magic-Line’s JavaScript file?

[TyeNewton]

Hey folks,

I’m working on implementing Chris’ Magic-Line JavaScript into a WordPress menu in a child theme of Thematic. I thought I had done a really great job of carefully copying all of the necessary code into what seem to be the correct places, and tweaking the css and js to point to the correct classes and ids.

For some reason, the magic-line effect just isn’t showing up!

The one clue I noticed is that, in Chrome’s inspector panel, I’m getting the following error at the 5th line of of the js file:
“magicline.js:5 Uncaught TypeError: property ‘$’ of object [object DOMWindow] is not a function”

So it’s somehow not finding a function it needs?? This appears to be crucial to making sure the #magic-line id is appended properly to the menu markup, so I think it must be the problem, but I don’t know how to solve it.

Here’s the full JavaScript (copied from Chris’ demo, but tweaked to my needs – I’m using the “Example 2”):

// DOM Ready

$(function() {



var $el, leftPos, newWidth;

$mainNav = $("#menu-primary");



/*

EXAMPLE TWO

*/



$mainNav.append("
");



var $magicLine = $("#magic-line");



$magicLine

.width($(".current_page_item").width())

.height($mainNav.height())

.css("left", $(".current_page_item a").position().left)

.data("origLeft", $(".current_page_item a").position().left)

.data("origWidth", $magicLine.width())

.data("origColor", $(".current_page_item a").attr("rel"));



$("#menu-primary a").hover(function() {

$el = $(this);

leftPos = $el.position().left;

newWidth = $el.parent().width();

$magicLine.stop().animate({

left: leftPos,

width: newWidth,

backgroundColor: $el.attr("rel")

})

}, function() {

$magicLine.stop().animate({

left: $magicLine.data("origLeft"),

width: $magicLine.data("origWidth"),

backgroundColor: $magicLine.data("origColor")

});

});



/* Kick IE into gear */

$(".current_page_item a").mouseenter();



});

Here’s the CSS, also stripped down and tweaked to my needs, but I don’t think there is a problem here:

/* Clearfix */

.sf-menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }

*:first-child+html .sf-menu { zoom: 1; } /* IE7 */





/* Example Two */

#menu-primary {

margin: 0 auto;

list-style: none;

position: relative;

width: 960px;

}

#menu-primary li {

display: inline-block;

}

#menu-primary li a {

position: relative;

z-index: 200;

display: block;

float: left;

text-decoration: none;

text-transform: uppercase;

}

#menu-primary li a:hover {

color: white;

}

#menu-primary #magic-line {

position: absolute;

top: 0;

left: 0;

width: 100px;

background: #900;

z-index: 100;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

.current_page_item a {

color: white !important;

}

.ie6 #menu-primary li, .ie7 #menu-primary li {

display: inline;

}

In case it matters, here’s what I copied into the functions.php of my child theme in order to link to the correct jquery files (This markup is showing up in the markup, so I don’t think this is problematic):

function magicline_js() {

echo '







';

}

add_action('wp_head','magicline_js');

I sure hope the solution is obvious to someone more knowledgeable than myself. This would be a killer trick for the site I’m working on. Thanks!

[Author]

Posts