Question

I’m a novice at Javascript, so bear with me. 😛

So I have a nav which currently utilizes the jQuery Blend plugin by Color Powered (http://colorpowered.com/blend/). Upon clicking one of the links in the nav, it executes a javascript function, which in turn uses the jquery load function to get the content from a div on another page and loads it into the current page.

Essentially, I’ve made it so that instead of taking you to a different page, it just loads the content in. Here’s my javascript code:

function load(file) {
$('#wrapper').fadeOut('slow', function() {
        $('#container').load('/' + file + '.html #container', function() {
            $('#wrapper').fadeIn('slow', function() {
            $(document).ready(function(){
                $("#nav a").blend();
            });

            $(document).ready(function(){
                $("#pagenav a").blend();
            });

            Cufon('h1', { fontFamily: 'Myriad Pro Condensed', fontWeight: 'bold', color: '#ffc000', textShadow: '-1.5px 0px #783012', textTransform: 'lowercase' }); 
            Cufon.replace('#nav a', { fontFamily: 'Vegur' });
            Cufon.replace('#pagenav a', { fontFamily: 'Vegur' });
        });
    });
});
}

What the blend plugin is restricting me from doing is making it so that when you click the nav link, the background image is modified to appear as an indicator that the nav link that was just pressed is the current link.

Here’s the css associated with the blend plugin, as well as the nav in general:

#nav a:link {
  font-weight:bold;
  text-align:center;
  color:#000000;
  width:120px;
  height:100px;
  font-size:90%;
  font-family:Arial;
  margin-right:0px;
  border-left:1px white solid;
  display:inline-block;
  line-height:75px;
  text-decoration:none;
  background-image:url('img/img-nav.png');
  background-repeat:no-repeat;
}

#nav a:visited {
  font-weight:bold;
  text-align:center;
  color:#000000;
  font-size:90%;
  font-family:Arial;
  width:120px;
  height:100px;
  margin-right:0px;
  border-left:1px white solid;
  display:inline-block;
  line-height:75px;
  text-decoration:none;
  background-image:url('img/img-nav.png');
  background-repeat:no-repeat;
}  

#nav_home {background-position:0 0;}
#nav_home:hover,#nav_home.hover {
  background-position:0 -100px;
}

#nav_about {background-position:0 0;}
#nav_about:hover,#nav_about.hover {
  background-position:0 -100px;
}

#nav_services {background-position:0 0;}
#nav_services:hover,#nav_services.hover {
  background-position:0 -100px;
}

#nav_contact {background-position:0 0;}
#nav_contact:hover,#nav_contact.hover {
  background-position:0 -100px;
}

Using getElementById to change the background position of the specific element (like nav_home or nav_about) works, but since the blend plugin adds the second class over the element (for example, #nav_about.hover), it hides it.

All I need is a way to change the background position of the clicked nav link and make it visible, which the blend plugin is not letting me do easily.

Answer 1

You probably want to manually add/remove a class to style the current anchor:

// JavaScript
$('#nav a').click(function(event){
  $(this).addClass('current').siblings().removeClass('current');
  load(this.href);
  event.preventDefault; // or return false
});

// CSS
a.current { background-position: 0 -100px; z-index: 100 }

z-index might resolve the problem of the element added by blend obscuring the anchor’s background image.