help please got in a tangle
[CODE]
It appears that the function(s) aren;t being fired
What I want to happen is for the nav-indicator to smoothly animate to the position of the selected menu item
<script type="text/javascript">
$(document).ready(function() {
$('#nav').append('<img src="/media/images/base/nav-indicator.png" id="nav-indicator" alt="indicator"/>');
$('.slow-scroll').click(function() {
alert("SL SC TRIGGERED");
if ($(this).parents('#nav').length > 0) {
setNavIndicatorPosition($(this));
}
$('#nav a').bind('click', function() {
alert("CLICK");
window.location.href = this.href;
return false;
});
});
function setNavIndicatorPosition(object)
{
var fromLeft = $(object).context.offsetLeft + ($(object).context.offsetWidth / 2) - 11;
$('#nav-indicator').clearQueue().stop().animate({left: fromLeft}, 'slow');
}
</script>
</head>
<body>
<div id="nav-shadow"></div>
<div id="nav">
{% load smartpage_tags %}{% smartpage_list "main-menu" as pages %}
{% for page in pages %}
<a {% ifequal request_meta.PATH_INFO page.url %}class="slow-scroll zcurrent_link"{% else %}{% ifequal sp.url page.url %}class="slow-scroll zcurrent_link"{% else %}class="slow-scroll noncurrent_link"{% endifequal %}{% endifequal %} href="{{page.url}}">{{ page.name }}</a>
{% endfor %}
</div>
[/CODE]