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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    how to simplify this script?

    I have a simple class switcheroo for some navigation that solves a couple problems for me. Works great, but can this be simplified? How should I boil this down to simplest code?

    Code:
    // add class to clicked nav item, remove class from all other nav items - this switches the background image of the div
    
    $('#link_1').click(function(){
    	$('#link_1').toggleClass("selected");
    	$('#link_2,#link_3,#link_4,#link_contact,#link_ii_by_iv,#link_raw,#link_sub1').removeClass("selected");
    }); 
    
    
    $('#link_2').click(function(){
    	$('#link_2').toggleClass("selected");
    	$('#link_1,#link_3,#link_4,#link_5,#link_ii_by_iv,#link_raw,#link_sub1').removeClass("selected");
    }); 
    
    
    $('#link_3little').click(function(){
    	$('#link_3little').toggleClass("selected");
    	$('#link_1,#link_2,#link_4,#link_5,#link_sub2,#link_sub3,#link_sub1').removeClass("selected");
    }); 
    
    
    $('#link_4').click(function(){
    	$('#link_4').toggleClass("selected");
    	$('#link_1,#link_2,#link_3,#link_5,#link_sub2,#link_sub3,#link_sub1').removeClass("selected");
    }); 
    
    
     $('#link_5').click(function(){
     	$('#link_contact').toggleClass("selected");
    	$('#link_1,#link_2,#link_3,#link_4').removeClass("selected");
     }); 
    
    
    
    // now the three subnav items for #link_3 (keep 3 active)
    
    $('#link_sub1').click(function(){
     	$('#link_sub1').toggleClass("selected");
    	$('#link_1,#link_2,#link_4,#link_5,#link_sub2,#link_sub3').removeClass("selected");
     }); 
     
     $('#link_sub2').click(function(){
     	$('#link_sub2').toggleClass("selected");
    	$('#link_1,#link_2,#link_4,#link_5,#link_sub1,#link_sub3').removeClass("selected");
     }); 
     
     $('#link_sub3').click(function(){
     	$('#link_sub3').toggleClass("selected");
    	$('#link_1,#link_2,#link_4,#link_4,#link_sub1,#link_sub2').removeClass("selected");
     });

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    can you show some example html by chance? Looks as thought it could definitely be simplified but seeing the html would help. ( are all of the links int eh same container by chance? if they are this could get really easy)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Sure... here's the div that contains the <ul> list of navigation items.

    The only thing I'm worried about is other javascript that I've been fighting with. I'm paranoid of screwing up any unforeseen function. a lot of the code isn't mine.

    Code:
    <div class="navbox" style="position:absolute;top:-7px;">
    		
    		<ul class="main-nav" >
    			<li id="sp_1" style="height:20px;"><a href="#" class="main ee" id="link_1" style=""><img src="images/transp.gif" style="width:65px;height:20px; border:0px;"></a></li>
    			
    			<li id="sp_2" style="height:20px;"><a href="#" class="main bb" id="link_2" style=""><img src="images/transp.gif" style="width:140px;height:20px; border:0px;"></a></li>
    			
    			<li id="sp_3"  style="height:20px;"><a href="#" class="main cc" id="link_3" style=""><img src="images/transp.gif" style="width:130px;height:20px; border:0px;"></a></li>
    			
    			<li id="sp_4" ><a href="#" class="main dd" id="link_4"><img src="images/transp.gif" style="height:20px;width:170px;"></a>
    				 <ul id="sub-nav">
    				 	<li class="subnav"> <span class="subnav-separators">: :</span> </li>
    				 	<li class="subnav"><a href="#" class="main ff" id="link_sub1"><img src="images/transp.gif" style="width:73px;height:20px; border:0px;"></a></li>   
    				 	<li class="subnav"><span class="subnav-separators">|</span></li>  
    				 	<li class="subnav"><a href="#"class="main gg" id="link_sub2"><img src="images/transp.gif" style="width:47px;height:20px; border:0px;"></a></li>  
    				 	<li class="subnav"><span class="subnav-separators">|</span></li> 
    				 	<li class="subnav"><a href="#" class="main hh" id="link_sub3"><img src="images/transp.gif" style="width:60px;height:20px; border:0px;"></a></li>
    				 	</ul>
    			</li>
    			<li id="sp_5"  style="height:20px;"><a href="#" class="main contact" id="link_5" style=""><img src="images/transp.gif" style="width:65px;border: 0px;height:20px;"></a></li>
    			</ul>
    		</div>
    also, the stylesheet shows a section of code for each one of these, basically like this:
    (menu_three1.png is inactive state, menu_three2.png is active/hover state)
    Code:
    #link_3 {width:130px;height:20px;background-image:url(../images/navigation/menu_three1.png);background-repeat:no-repeat;cursor:pointer;!important }
    #link_3:visited {width:130px;height:20px;background-image:url(../images/navigation/menu_three1.png);background-repeat:no-repeat;cursor:pointer;}
    #link_3:hover {width:130px;height:20px;background-image:url(../images/navigation/menu_three2.png);background-repeat:no-repeat;cursor:pointer; !important }
    #link_3:active {width:130px;height:20px;background-image:url(../images/navigation/menu_three2.png);background-repeat:no-repeat;cursor:pointer;}
    #link_3.selected {width:130px;height:20px;background-image:url(../images/navigation/menu_three2.png);background-repeat:no-repeat;cursor:pointer; !important }

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    replace the first part of your code with this and let's see what happens

    Code:
    $(".main-nav > li a").click(function() {
    	$(".main-nav > li a").removeClass("selected");
    	$(this).addClass("selected");
    });
    side note: I can imagine this design is pretty tough to work with. it looks like they didn't give much though to using classes vs. id in any specific manner and it's weird that they bothered assigning classes at all because they appear to be relying heavily on inline css ( cringe!! )

    note- i removed the preventdefault because you didnt have anything similar in your code. if there is other js/jQ script ion the code that is applied to these elements you may want to make your changes there in the first place as doing it like this will just make the site more and more difficult to maintain.
    Last edited by DanInMa; 03-27-2013 at 04:35 PM.

  • Users who have thanked DanInMa for this post:

    turpentyne (03-27-2013)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts
    dang! I thought I was slick when I found a shorter option, and was about to post it here, but you found even better!

    I came up with this, but still not as simple as yours.

    Code:
    // add class to clicked nav item, remove class from all other nav items - this switches the background image of the div
    
    $('#link_1,#link_2,#link_3,#link_4,#link_5').click(function(){
    	$(this).parent().siblings().children().removeClass('selected');
            $(this).addClass('selected');
    }); 
    
    
    
    // now the three subnav items for #link_3little
    
    $('#link_sub1,#link_sub2,#link_sub3').click(function(){
    	$(this).parent().siblings().children().removeClass('selected');
            $(this).addClass('selected');
    });

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    it's all about the selectors man. jQusery uses the "sizzle" library which is just awesome.

    I didnt write anythong for the seond part there, I had a hard time visluizing what you were trying to with the subnav, so here is a starter fucntion for that


    Code:
    $("#subnav > li a").click(function() {
    
    	$(".main-nav > li a").removeClass("selected");
    	$(this).addClass("selected");
    });

    ( fyi, Id make sub-nav a class nto an id)

    orrrrr you could remove the id of subnav all togehter and do this

    Code:
    $(".main-nav > li > ul li a")
    note: the > symbol in this case Selects all direct child elements of the referenced element, so your code doesnt effect nested lists
    Last edited by DanInMa; 03-27-2013 at 04:47 PM.

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    fyi, I code better than I type ; )


  •  

    Posting Permissions

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