Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Menu Trouble

Posted on 2014-02-26
8
45 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 55

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 55

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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 55

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
replace quotes with UTF-8 character 38 104
wordmultiple challenge 12 141
Copy Files - Python 7 86
Powershell Script need assistance to make some changes 4 91
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
The viewer will learn how to pass data into a function in C++. This is one step further in using functions. Instead of only printing text onto the console, the function will be able to perform calculations with argumentents given by the user.
The viewer will learn additional member functions of the vector class. Specifically, the capacity and swap member functions will be introduced.

856 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