Solved

Menu Trouble

Posted on 2014-02-26
8
30 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 51

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 51

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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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 51

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to clear a vector as well as how to detect empty vectors in C++.

705 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

20 Experts available now in Live!

Get 1:1 Help Now