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

    jquery text navigation

    Hi...

    Getting used to jquery, and I'm only on a basic level with javascript.

    I'm taking over somebody else's code, and trying to change some navigation to be text instead of images so it's easier to edit. But it seems a little more complicated than it should be? I can't just delete the image and put in text. Nothing appears? Right now it's doing an image switch for the rollover. I just want to do a simple CSS change on mouseover.

    Here's what it looks like right now:

    The html (and css, if needed to look at):
    Code:
    <div id="navigation">
    			<ul class="navigation">
    				<li class="nav-history"><img src="images/nav_01.gif"/></li>
    				<li class="nav-neighbourhood"><img src="images/nav_04.gif"/></li>			
    				<li class="nav-team"><img src="images/nav_05.gif"/></li>
    			</ul>
    		</div>
    Code:
    #navigation{
    	position:absolute;
    	width:974px;
    	height:24px;
    	left:0px;
    	top:4px;
    	opacity:0;
    	display:none;
    }
    
    #navigation ul{
    	font-size: 0;
    	display:inline-block;
    	list-style-type: none;
    	border:0px;
    	padding:0px;
    	margin:0px;
    }
    
    #navigation ul li{
    	cursor:pointer;
    	display:inline-block;
    	border-collapse:collapse;
    	border-left:0px;
    	border-right:0px;
    	border-spacing:0px;
    	list-style-type: none;
    	padding:0px;
    	margin:0px;
    }
    Here's the snippet of Jquery I'm trying to change to deal with text, not images

    Code:
    $('.nav-history').click(function(){
    		$("#slider-container").stop().animate({left: '0'}, 1000, "easeOutQuint");
    		
    		$('.nav-history img').attr('src', 'images/nav_01.gif');
    		$('.nav-neighbourhood img').attr('src', 'images/nav_04.gif');
    		$('.nav-team img').attr('src', 'images/nav_05.gif');
    
    	});

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    #navigation ul{
    	font-size: 0;
    Looks like it could be your culprit.

    And you are adding a link right?, eg:

    Code:
    <ul class="navigation">
    <li class="nav-history"><a href="">LINK TEXT</a></li>
    ...
    Once you remove the image it self, the jQuery will have nothing to target:
    Code:
    $('.nav-history img').attr('src', 'images/nav_01.gif');
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks


  •  

    Posting Permissions

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