PDA

View Full Version : Help tweaking Jquery Nav Script



wyclef
04-30-2009, 05:13 PM
How could I change this nav script to pull the class 'current-___'from the body tag?

Here is the original: http://alistapart.com/d/sprites2/examples/example6-function.html

I think the relevant part is



var parentClass = $(parent).attr('class');

$(parent).children('li').each(function() {
var myClass = ($(this).attr('class'))
var current = parent.substring(1) + ' current-' + ($(this).attr('class'));



but the whole script is...



// Navigation
generateSprites('.nav', 'current-', true, 300, 'fade');


function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style) {
var parentClass = $(parent).attr('class');

$(parent).children('li').each(function() {
var myClass = ($(this).attr('class'))
var current = parent.substring(1) + ' current-' + ($(this).attr('class'));

attachNavEvents(parent, myClass, setActive, hoverSpeed, style);

if (parentClass != current) {
$(this).children('a').css({backgroundImage:'none'});
}

});
}

function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) {
$(parent + ' .' + myClass).mouseover(function() {
$(this).append('<div class="nav-' + myClass + '"></div>');
if (style == 'slide') {
$('div.nav-' + myClass).css({display:'none'}).slideDown(hoverSpeed);
} else {
$('div.nav-' + myClass).css({display:'none'}).fadeIn(hoverSpeed);
}
}).mouseout(function() {
if (style == 'slide') {
$('div.nav-' + myClass).slideUp(hoverSpeed, function() {
$(this).remove();
});
} else {
$('div.nav-' + myClass).fadeOut(hoverSpeed, function() {
$(this).remove();
});
}
});

if (setActive) {
$(parent + ' .' + myClass).mousedown(function() {
$('div.nav-' + myClass).attr('class', 'nav-' + myClass + '-click');
}).mouseup(function() {
$('div.nav-' + myClass + '-click').attr('class', 'nav-' + myClass);
});
}
}

currently a sample css of a nav item looks like


/* home */
.nav .home a:link, .nav .home a:visited {
left: 0;
width: 70px;
}
.nav .home a:hover, .nav .home a:focus {
background: url(../images/nav.png) no-repeat 0px -36px;
}
.nav .home a:active {
background: url(../images/nav.png) no-repeat 0px -72px;
}
.current-home .home a:link, .current-home .home a:visited {
background: url(../images/nav.png) no-repeat 0px -108px;
cursor: default;
}
.nav-home, .nav-home-click {
background: url(../images/nav.png) no-repeat 0px -36px;
position: absolute;
left: 0; top: 0;
height: 35px; width: 70px;