Solved

Menu Trouble

Posted on 2014-02-26
8
35 Views
Last Modified: 2016-05-18
Hello,

After I clicked on "Portfolio" on the menu, the "About Me" is highlighted. For some reason, it thinks the start of Portfolio (page3) is part of About Me (page2). I've looked over all the CSS files and can't figure out why. Any help is appreciated it!

http://www.lucychen.me

Thank you!
0
Comment
Question by:Nana00
  • 3
  • 2
  • 2
8 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39888926
Look at your <header class=" on each page.
About me and Portfolio are both
<header class="page2">

Open in new window

Change Portfolio to
<header class="page3">

Open in new window

Should fix the problem
0
 

Author Comment

by:Nana00
ID: 39888958
Hello, thank you for your quick response. In the html page, I have <div id="page3" class="content"> for the Portfolio. I'm not seeing <header class="page2"> for Portfolio. Where are you seeing this? Thanks!
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39890086
The problem is being caused in the way the javascript is responding to the scroll event. For some reason (as yet unknow - still investigating) the scroll event (which is triggered when you click a menu item) is not resulting in the correct page index being selected - the same one is being selected when you click About as when you click Portfolio.

The way the menu works is you click an item it then scrolls to the corresponding section on the page. It uses the scrollTop value as an index into a precalculated array to work out which item was clicked and then uses this value to index another array to get a class value (page1, page2 etc) which it then assigns to the <header> element at the top of the page. The css is linked to this class value.

So because the two menu items in question are resulting in the same class value being selected you are seeing the About being selected when you are on the Portfolio section.

I am still debugging ....
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 39890331
@jullianH, maybe we can figure this out together.

The scroll event fires repeatedly when the document is being scrolled. Inside the scroll event there is a while loop. Inside that, a conditional that says whenever the currClass is NOT equal to the current indexed section name in the array. So it's true more often than false. What I think is happening is that the statements inside the conditional are busy changing the currClass to say "page2" then "page3" etc. while the outer scroll event is still firing and finishing well past the scroll position of "page2". The match up is just being missed because the scrolling is too fast when automated so the last update of currClass sticks. The major clue is that the code inside the scroll event works perfectly when scrolling the page manually. In that situation, there's plenty of time for the while loop and the conditional statements to finish.

I came close to a solution by creating a global boolean variable called userScroll, set to true, and wrapped everything inside the scroll event handler with a conditional:

if (userScroll) {
...
}

That prevents the scroll event from firing automatically when goToByScroll() is called to animate the scroll.

Then I set up the goToByScroll function like this:

function goToByScroll(id){
      userScroll = false;                              
      $('header').removeAttr("class").addClass(id);
      $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow', function(){
            userScroll = true;
      });
}

The scroll event handler is bypassed for the animated scroll. And it worked except that the active navigation box would not slide into place unless you remained hovered over it while the page scrolled.

Still have not figured out why.
0
 

Accepted Solution

by:
Nana00 earned 0 total points
ID: 39890478
@julianH and @Tom Beck (TommyBoy)

I don't know exactly what caused the problem, but I took out a few JS and it's working. For some reason, jquery.equalheights.js was affecting the menu. I guess this is a work around but it would be nice to know what exactly happened. Thank you both for helping me out!!
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39891110
@tommyboy - seems the author has found a solution but I am still intrigued so going to respond to your post.

The multiple firing of the scroll event is valid - but what intrigues me is why it consistently happens for the About me / Portfolio.

The code as you say has some loops - the first of it is checking the scroll top relative to a previously populated array of scroll offsets for the various div's linked to the menu.

The index (i) is set based on the match found in the scrolling (m) array. For some reason this is coming out at 3 for both About and Portfolio - but not the rest.

As the m array is auto-calculated by taking the scroll offset of the respective div - it is interesting that this behaviour is consistently observed for the two elements in question.

My next step was to change the order of the menu around and see if that made a difference - by order I mean the page numbering to see if it had something to do with the div itself or its position in the lineup.

Here is another interesting thing. The functionality works as expected when you are scrolling - using the scroll bar. It seems to fall over when you click the menu.

One solution might be to force a call to the on scroll function on completion of the animate call from a menu click.

Might be one of those unsolved mysteries though if the author has solved the problem.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39891695
The difference between scrolling the page manually and animating the scroll is the difference between scrollTop() (used in the scroll event handler) and offset().top (used in the goToByScroll() function).

The array of offsetTop values looks like this:

index: 0, page id: page1, this.offsetTop: 0
index: 1, page id: page2, this.offsetTop: 843
index: 2, page id: page3, this.offsetTop: 1670
index: 3, page id: page4, this.offsetTop: 3643
index: 4, page id: page5, this.offsetTop: 4962

The scrollTop values from the scroll event handler look like this:

win.scrollTop: 0
win.scrollTop: 843
win.scrollTop: 1651
win.scrollTop: 3624
win.scrollTop: 4965

It's clear from this why it works for pages 1 and 2 but not for 3. The difference is as much as 22 pixels between scrollTop() and offset().top.

If you add 22 pixels to the offset().Top in the goToByScroll() function, it works properly.

$('html,body').animate({scrollTop: $("#"+id).offset().top + 22},'slow');
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Python - ImportError: No module named 'urllib2' 2 154
count11 challenge 6 64
Create associate webpages / websites 3 67
How to get statistic's from a competitors website?! 1 87
The purpose of this article is to demonstrate how we can use conditional statements using Python.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now