Question

The website in question:

http://harrisonfjord.com/folio2/

As you can see, there is a menu at the bottom which uses jquery scrollTo to move up and down the page. The menu code is:

<ul id="menu" style="list-style:none">
        <li><a href="#" class="current" onclick="jQuery.scrollTo('#home', 1000 )"><img class="hoverImage" src="img/home_highlight.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#asics', 1000 )"><img class="hoverImage" src="img/asics.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#tooheys', 1000 )"><img class="hoverImage" src="img/tooheys.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#olympics', 1000 )"><img class="hoverImage" src="img/olymp.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#panadol', 1000 )"><img class="hoverImage" src="img/panadol.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#plants', 1000 )"><img class="hoverImage" src="img/plantsplus.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#kia', 1000 )"><img class="hoverImage" src="img/kia.png"/></a></li>
    </ul>

There are two elements at play here. First, clicking the li.a uses scrollTo to go up and down the page. Second, hovering/clicking on the images toggles a “_highlight.png” source change, as follows:

// MENU HOVER IMAGE:
$(function () { 
    $('img.hoverImage').mouseover(function () {
        if ($(this).is('.activeImage')) return;
        var src = $(this).attr("src").match(/[^\.]+/) + "_highlight.png";
        $(this).attr("src", src);
    }).mouseout(function () {
        if ($(this).is('.activeImage')) return; // Skip mouseout for active image
        var src = $(this).attr("src").replace("_highlight", "");
        $(this).attr("src", src);
    }).click(function () {
        // remove previous active state
        $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
        // set new active state
        $(this).addClass('activeImage');
    });
});

This all works fine. However, when I try to add keyboard controls to the page, the whole thing falls apart. I’d like to use up/down arrows to move to the previous/next menu items, which uses the following code:

// Add "current" class to #menu links when clicked

$("#menu a").click(function(e) {
    $(".current").removeClass("current");
    $(this).addClass("current");    
});


// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document.documentElement).keyup(function (event) {
  // handle cursor keys
  if (event.keyCode == 38) {
    // go up
    $("a.current")
      .parent() // moves up to the li element
      .prev() // moves to the adjacent li element
      .find("a") // moves down to the link
      .click(); // triggers a click on the previous link
  } else if (event.keyCode == 40) {
    // go right
    // same as above, but just on one line and next instead of prev
    $("a.current").parent().next().find('a').click();
  }
});

This works, however (obviously) this triggers the click event which does not successfully toggle the _highlight.png function. What’s the best way to go about changing the code so that the keypress event not only scrolls to the correct div, but also highlights/un-highlights the correct menu items?

Answer 1

The short, and almost needs more work, answer:

$(function() {
  function highlight(e) {
    var _this = $(this),
        src = _this.attr("src").replace("_highlight", "").slice(0, -4) + "_highlight.png";

    _this.attr("src", src);
  }

  function refresh() {
    $("#menu a img").each(function(e) {
      var _this = $(this),
          src = _this.attr("src").replace("_highlight", "");

      _this.attr("src", src);
    });

    highlight.call($("#menu a.current img"));
  }

  function scroll(item) {
    jQuery.scrollTo(item, 1000);

    // Add "current" class to appropriate link
    $("#menu a").removeClass("current");

    var link = $("#menu a[href=" + item + "]");
    link.addClass("current");

    refresh();
  }

  $("#menu a").click(function(e) {
    // Pull the hash URI from the href.
    scroll($(this).attr('href'));
  }).find("img").hover(highlight, refresh);
});

// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document).keyup(function(e) {
  var p = $("a.current").parent();
  if (e.keyCode === 38) {
    p.prev().find("a").click();
  } else if (e.keyCode === 40) {
    p.next().find('a').click();
  }
});

The longer answer: abstract, use idempotent methods, and I’ll be back later to give a full rundown of the strategies used in here.