jQuery One Page Navigation Plugin

great and thank you for sharing ! but it doesn’t seem to work with ie 6 - well .. i know but ...    :/ 
any idea ? ....

Hello,

This script is great and what I was looking for however it creates a conflict with the other scripts of my site and I don’t know how can I add noconflict? Can you help me please? Thanks in advance.

Trevor,
There is a small bug with internet explorer (all versions, including 9),

For some reason IE does not bind the ‘scroll.onePageNav’, and therefore the currentClass does not get applied when scrolling the page.

I know that there is an IE issue with binding event to absolutely positioned elements, but i did not look into it.

Hello,

When I put an external link to the menu, other than links with anchors, the script stops working and makes some other scripts stop working as well. What may be the reason of this?

@Trevor-
Thanks for getting back to us. We just emailed you the link. Thank you in advance.

@Underlog-
You can ignore that if you just want to use the plugin. But if you want to know just so that you understand, it is appending a paragraph to the 4th section when the link it clicked. It’s purpose was to demonstrate that the plugin would still work even if content was dynamically added.

Hey,
I have a bug and dont know how do I fix it.
Im using your JS scripts and the JS scripts from “colorbox”.
An he is using “http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”

When I use
“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”
it doesnt scroll to the section it jumps to it and “colorbox” is working.

And when I delete
[removed][removed]

it scrolls to the section (your part is working) but colorbox works not.

Can you or somebody else help me?

thx

@Mark-
Make sure you are using the latest version of Colorbox.

Trevor, Im using the last version of colorbox.
I’ve seen you’re using too the colorbox, is’nt it?
I dont know where the problem is. I’ve also already dowloaded the latest 1.4. jquery to my pc. Maybe there are the same varaibles in your script and in colorbox which were using?

Hi, I got a little question.
Here they only use one menu, I want to use the script on a website with 3 menu’s, this is what I did:

$(document).ready(function() {
  $(’#nav2’).onePageNav();
$(’#nav3’).onePageNav();
$(’#nav’).onePageNav();

Now this works but sometimes if i go from lets say #nav2 to #nav1 one of the 3 links (I got 3 links each #nav) will be dead, not doing anything. Is there a better way to use multiple menu’s?

Thanks

@Trevor

Thanks for quick reply,

this is the link http://www.hetstilleseizoen.be/purt/index.html

Again thanks for the quick reply.

Can u tell me what I did wrong and for the short code, can u give me some information? I m not that good with Jquery or Javascript. Don’t realy know how to get started at the script.

@VJ-
I emailed you back on 12/26 to the email address that you submitted in the contact form. Did you not receive it?

Sorry we just checked our spam folder as well but couldn’t find your email. Maybe we missed it somehow. Can you email us again if it is possible to this address? Thank you for your response. We appreciate it.

My menu isn’t at the top and I wanted to change the scrollTo to match my menu offset, so I added offset to the code. And it worked wonderful!

here:
  onePageNav.bindNav = function($el, $this, curClass, changeHash, scrollSpeed, navOffset)

here:
  $.scrollTo(newLoc, scrollSpeed, { offset: -navOffset,

and here:
  $.fn.onePageNav.defaults = {
  currentClass: ‘current’,
  changeHash: false,
  scrollSpeed: 750,
  navOffset: 0
  };

Now I can give the offset during the menu initiate!

Is there a way so the menu is no longer fixed after the last menu-item is reached?

@Trevor

Nevermind the fixed question, after some thinking I believe my problem is one I have to deal with outside your plugin. But thnx for your answer!

I have an other problem and don’t know how to fix.

I want to change the highlight/ current class of the “#menu li”, when the “#menu”-top is equal to “#section”-top.

Now it looks like the highlight/ current class changes when the “#section” passes 50% of the windows height.

Can I change this?

@Trevor
Thnx, that did the trick!

I have it now like this: 

  onePageNav.getSection = function(windowPos, navOffset) {
    // edit this section for change “current”-class on scroll
    var returnValue = ‘’,
      windowHeight =  navOffset || Math.round($(window).height() / 2);
   
    for(var section in onePageNav.sections) {
      if((onePageNav.sections[section] - windowHeight) < windowPos) {
      returnValue = section;
      }
    }
    return returnValue;
  };

And if I don’t set the navOffset, it will revert to it’s normal behaviour.

@Ivaylo-
Do you have a link to your page?

Everything worked fine for me, following your advice to do the rest of IDs referenced in the anchor links. However, Opera does not highlight the navigation sections while scrolling. I tested your demo page, just in case I’d screwed something up…

Thanks, I will be using this soon. You are a gentleman and a scholar.

I found this trick on the internet to make it work
put this in your css.

html {
overflow:hidden;
}

sorry for the dum question :P

@Chris-
Did you modify the jquery.nav.js file like Kris mentioned?

@Chris-
I think you need to do more than just that. Kris changed the onePageNav.getSection function.

@Chris-
Sorry man, I’m not sure what else Kris had to do to make those changes.

Great thing. I’ve used it for my website with x and y scrolling.

@Chad Kaufman-
You will want to change this line:

$.scrollTo(newLoc, scrollSpeed, {

To account for the offset of your navigation.

THIS IS AMAZING!!!

@sanch3z-
You can just use the CSS background-image property to style your navigation.

@Sanch

I’ve used that technique here:
http://www.ollykillick.com/test

Hi Trevor,

does this have to be used for anchor links? I’m looking at line 52:  onePageNav.getPositions = function($this) {

I have a set of buttons which already scroll down the page using ScrollTo, I’m trying to see if this script can be modified to change the class of the buttons.

@Trevor

Thanks for a quick reply. I made my life easier by putting <a> tags inside the buttons. It works a treat.

I’m now trying to get it to work with an offset. I change the 3 lines of code as per Kris’ post in the comments, but nothing seems to change regardless of values I put in. The quest continues…

Good job though!

Hi Trevor,

I am having an issue with linking directly to a particular section of the page.
For instance if you want to link a page to a portfolio section you would use http://myportfolio.com#portfoliosection

So when it lands on the page you don’t have to scroll to the section you want.

This works fine but I noticed when you do it, it highlights the first section of the nav even though you are in a different section of the page. For instance if you copy/paste the following URL into a browser window it highlights ‘section-1’ even though you have landed in ‘section-4’:

http://trevordavis.net/play/jquery-one-page-nav/#section-4

Is there a way to detect what section you are in, not on loading the page but on entering the page without having to click the nav?

Thanks,
Olly.

Thanks Trevor. I am experiencing the problem on Opera/IE8/Firefox 4—Win XP and OSX respectively, will try on Win 7 later. It works correctly on Chrome and Safari.

Hope this helps, I’m trying to find a way around it.

Hello Trevor, thank you very much for this plugin, i’ve been searching for something like this for hours!

I’m quite a newbie on this kind of stuff so sorry if i’m asking a dumb question, but i really don’t know how to solve this.

The buttons of my menu are images and i want them to change to another images. I followed your steps, i checked and compared my code with your code and even with Olly Killick’s test page, but i don’t really know where is my mistake. I’ll leave you my link so you can see what is happening: http://oupasdesign.com/cla/segunda.html . Has you can see, when in top, the correspondent button to that section is “pushed” (orange) but when i start scrolling it changes to white (the original image) and i can never see it again pushed, even if i scroll back to the same position.

Can you understand my point? :x and if so can you help me, please?

Thank you very much, and sorry for any kind of inconvenience that i may have caused.

Take care :)

Thank you Trevor! It worked in part. Now it’s giving me some kind of error, but i think that is my fault and have nothing to do with this. I’ll try to fix it somehow. Thanks! :D

@Olly-
Feel free to fork the code and make that change because I don’t think that is something that I will add into the plugin.

Hi there,

I’m using your plug-in on a new project and it works pretty fine!

I was wondering if it’s planned to have an “easing” option soon (maybe working with the easing plug-in?)...
I have tried to hack your code adding an easing method line 34:

$.scrollTo(newLoc, scrollSpeed, {easing:‘elasout’}

Works.
But now, if I click my nav, the highlight on the menu on scroll doesn’t work anymore.
I don’t understand what’s going on. Do you have a clue?

Thx =)

I’m trying to figure out how to get this plugin to work with a logo that links back to the top of the page, much like the way they do it on the Crush+Lovely site. The logo is in an <h1> right above the <ul> with the nav items.

@Trevor
No, the nav doesn’t have an item that goes to the top. The logo goes to the top of the page, where a header section is located. The first item in the nav goes to a section just below the header.

@Trevor
Thanks for taking the time to reply. I’m pretty new to jQuery (and JavaScript), so I may just be doing something wrong. This is what I have:

$(’#logo a’).click(function(){
$.scrollTo(0, 750);
$(’#nav .current’).removeClass(‘current’);
return false;
});

I think it doesn’t work because the onePageNav function is still watching the page for scrolling, and it re-adds the current class to the nearest section as the page scrolls.

@Trevor
That fixed it! Thanks for all the help, and thanks for the great plugin.

@Andrew-
Looks like it has to do with the scrollTo plugin. In the settings, it defaults to scrolling both the x & y axes. You should be able to specify just y and you should be good to go.