Jquery Show Current Page in Navigation Sliding Doors

Question

I'm currently building www.scenes-online.co.uk/test/

I've got this code sliding up and down the links on hover using jquery...

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;

<script type="text/javascript">

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery

google.setOnLoadCallback(function() {
  jQuery(
     function($) {
$("a.button").hover(   function() {      $(this).animate({"marginTop": "-     4px"}, "800");   },   function() {      $(this).animate({"marginTop": "-     14px"}, "800");   });  

  });
});
</script>

What i need is for the current page to have it's link in the 'down' state at margin-top:-4px but everything I'm trying is getting rid of my sliding doors...

thanks in advance

Cheers

Stu

Answer 1

well you have a bug here:

function($)  {

it must be:

$(function () {

maybe that's is the problem

Answer 2

While it's awesome, you don't really need jQuery for this as you have a separate HTML file for each page. You could just style each specific button for its corresponding page so that its initial state is down. for example, you could add the 'current' class to the home button on index.html. And current would have margin-top: -4px declared in css.

If you really want to do this, you'll need to iterate over the buttons on page load and check that the href for that element is the current location.

 $('a.button').each( function(idx, el) {
    if (el.href === window.location.toString()) {
      $(el).css('marginTop','-4px');
    }
 });

This breaks down very easily though. For instance, if you use query strings or hashes and don't update the href. actually, the above sample doesn't work on the landing page for instance (as the href is "index.html") but window.location is only "/". But works on the others so it should get you going.