Question

I’m currently working on a website for a Danish company. The content is all in one page and I’ve included some jQuery-scrolling and stuff. Works nice!

For the menu I’m asked to programme the elements so the active element is bold. That I’ve done too.

The problem comes here:
The client wants a home button and a next and previous button. But when I click them and the page scrolls the CSS-classes do not change for the active element – so the bold element in the menu is still the last clicked page.

I hope that anyone can help.

The page can be seen at:
http://vedelform.dk/new/intro/

Answer 1

In addition to calling the serialscroll plugin, the event handler for the images needs to update the appropriate class name on your navigation link. When you click on a navigation link directly, you call the changeActiveStates function, but that isn’t happening with the home, next, and previous buttons.

You should use the onBefore attribute of the serialScroll plugin to define a method that will figure out which navigation link is supposed to receive the class name. It can then call the changeActiveStates function.

It doesn’t look like it would take more than a few more lines of code to fix your problem. If you need more help getting it to work, let me know.

---

edit:

If you add this (starting at line 84 of init.js), you should be in business:

easing: 'swing',
onBefore:function(e, elem, $pane, $items, pos){
    if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos));
    return true;
}

You will then need to call changeActiveStates (probably after you initialize the function) on page load to initialize the correct menu item.

I hope that helps; let me know if it gives you any more trouble.