SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Newport, RI
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Single Page site w/ fixed nav, want to change two elements onclick or scroll

    Hey everyone,

    It's been a REALLY long time since I've been on here but I need some help. After about an hour or two of searching around for the solution all I get is broken scripts trying to merge two separate scripts together.

    I have a simple one-page portfolio site I needed to make for myself, and I have a sticky header that will scroll down to four sections. Each section is color coded, and if I scroll to the section I want to add an 'selected' class to the nav item, but I also want to add a class to change the logo color to match the specific section your in.

    Any help would be super appreciated since I've already wasted so much time trying to hack something together.

    Code:
    <div id="header">
        	<div class="container cf">
    	    	<a href="#" class="brand about">SndRcv - SendReceive</a>
    	    	<ul id="nav" class="cf">
    		      <li><a class="about selected" href="#pageAbout">About</a></li>
    		      <li><a class="work" href="#pageWork">Work</a></li>
    		      <li><a class="trampt" href="#pageTrampt">Trampt</a></li>
    		      <li><a class="contact" href="#pageContact">Contact</a></li>
    		    </ul>    	
        	</div><!-- /container -->
        </div><!-- /header -->
    Code:
    #header .brand.about {
    	background: url(../img/bg/logo.png) 0 0 no-repeat; 
    	}
    
    #header .brand.work {
    	background: url(../img/bg/logo.png) -97px 0 no-repeat; 
    	}
    
    #header .brand.trampt {
    	background: url(../img/bg/logo.png) -194px 0 no-repeat; 
    	}
    
    #header .brand.contact {
    	background: url(../img/bg/logo.png) -291px 0 no-repeat; 
    	}
    
    #nav > li > a.about.selected,
    #nav > li > a.about:hover
    	{
    	color: #3da2d6;
    	}
    
    #nav > li > a.work.selected,
    #nav > li > a.work:hover	{
    	color: #f32a64;
    	}
    
    #nav > li > a.trampt.selected,
    #nav > li > a.trampt:hover	{
    	color: #fda033;
    	}
    	
    #nav > li > a.contact.selected,
    #nav > li > a.contact:hover	{
    	color: #9bb34f;
    	}

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Not 100% sure what your asking but here is how you can add and remove a class with jquery on click http://www.websitecodetutorials.com/...move-class.php

  3. #3
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Newport, RI
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That I understand, but at the same time I'm adding a 'selected' class to the <a> on the navigation, I wanted to also add a specific class to <a class="brand"> to match the corresponding nav item.

    Essentially when someone clicks a specific nav item I want to add selected and then switch a class in another link.

    If I click on #pageWork:
    <a href="#pageWork" class="work"> = <a href="#pageWork" class="work selected">
    <a href="#" class="brand about"> = <a href="#" class="brand work">

    If I click on #pageContact:
    <a href="#pageContact" class="contact"> = <a href="#pageContact" class="contact selected">
    <a href="#" class="brand contact"> = <a href="#" class="brand contact">

    Does that make more sense?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by trampt View Post
    Essentially when someone clicks a specific nav item I want to add selected and then switch a class in another link.
    A good way to do that is to setup a click event on a parent element of those links (such as #nav) so that when one of the links is clicked, you can loop through and remove selected from all of those links, then add it just to the one that was clicked on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Newport, RI
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    A good way to do that is to setup a click event on a parent element of those links (such as #nav) so that when one of the links is clicked, you can loop through and remove selected from all of those links, then add it just to the one that was clicked on.
    Thanks Paul, I've got that under control. My problem is triggering a second even to add a specific class to another <a> that will change the color of my logo my moving a background image.

    I have a buddy who knows Javascript better than I do and hopefully he can take a peak for me.

    Thanks for everyones suggestions.


Bookmarks

Posting Permissions

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