Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    204
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Help tweaking Jquery Nav Script

    How could I change this nav script to pull the class 'current-___'from the body tag?

    I think the relevant part is

    Code:
    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...
    Code:
    // 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

    Code:
    /* 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;
    Last edited by wyclef; 04-29-2009 at 09:54 PM. Reason: trying to reclarify

  • #2
    New Coder
    Join Date
    Feb 2009
    Location
    Uzbekistan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you are trying to check for class existance you can use .hasClass() method.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •