Solved

Menu Trouble

Posted on 2014-02-26
8
42 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 54

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 54

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
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 
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 54

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
groupNoAdj 7 96
Problem to echo 6 97
wordappend challenge 8 179
groovy example issue 10 97
How to remove superseded packages in windows w60 or w61 installation media (.wim) or online system to prevent unnecessary space. w60 means Windows Vista or Windows Server 2008. w61 means Windows 7 or Windows Server 2008 R2. There are various …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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