Nav and scrollTo

Hello Experts,

Many things can go wrong :-)

Please if someone can have a look at this example page I put in jsfiddle: https://jsfiddle.net/refael_b/us6kuph2/12/

Please note that external resources I am using.

The issue are:
1). It does not respond to the to any of my offset.top values e.g. ".offset().top +30"
2). it does not respond to the "easing" on any of the links but the first one.

I would appropriate any help!!
RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
The external resources were pointing to wrong locations like the github page. The Chrome console showed that you were trying to load html as js file, also some warning/error about http/https which you can prevent by leaving out the protocol from the external resource.

Fixed some other problems in syntax like extra } and some zeroes (copy/paste error probably).

Note that I'm not sure what goToByScroll should do especially since all code lines are the same now.

I saved a new version of the fiddle, also I copied the result frame source to here.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Q_28665112 - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script type='text/javascript' src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
  <script type='text/javascript' src="//davist11.github.io/jQuery-One-Page-Nav/jquery.nav.js"></script>
  <style type='text/css'>
#page {
    position:relative;
}
#submenu-page {
	position:fixed;
	top:190px;
	left:0;
	z-index:1000;
}
.current {
    background-color: yellow;
}
.section {
    position:relative;
    display:block;
    width:80%;
    height:500px;
    margin-left:250px;    
}
#c1 {
    background-color:gray;  
}
#c2 {
    background-color:blue;  
}
#c3 {
    background-color:green;  
}
p {
   height:500px;   
}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
    $('#submenu-page').show().onePageNav({
                scrollOffset: 70,
                scrollSpeed: 650,
              });		  
    
            $('ul#submenu-page li:first-child').addClass('current');
            /*$('ul#submenu-page li:first-child').click(function(){
                $('html, body').animate({scrollTop: 0 }, 1500 , 'easeInOutExpo');
                return false;
            });*/
    
            function goToByScroll(id){
               if (id=='c1') {
                    $('html,body').animate({scrollTop: $("#page #"+id).offset().top }, 1500 , 'easeInOutExpo');			
               } else {
                    if ($(window).width() > 960) {
                        $('html,body').animate({scrollTop: $("#page #"+id).offset().top }, 1500 , 'easeInOutExpo');
                    } else {
                        $('html,body').animate({scrollTop: $("#page #"+id).offset().top }, 1500 , 'easeInOutExpo');
                    }
               }
            }
    
            if(window.location.hash != '') {
                goToByScroll(window.location.hash.substr(1));
            }

});//]]>
</script>
</head>
<body>
  <div id="page">

    <ul id="submenu-page">
    <li><a href="#c1">1st section gray</a></li>
    <li><a href="#c2">2nd section blue</a></li>
    <li><a href="#c3">3rd section yellow</a></li>
    </ul>
    
    <section id="c1" class="section">
    </section>
    
    <section id="c2" class="section">
    </section>
    
    <section id="c3" class="section">
    </section>
    
    <p></p>
</div>
</body>
</html>

Open in new window

0
RefaelAuthor Commented:
Hello Robert Schutt,

I am not sure i understand what you did. But when you add and values to the "top" position e.g. when the screen is over "960" does it respond? also it does not seem to respond to the animation. Did you notice that?
0
Robert SchuttSoftware EngineerCommented:
does it respond?
I don't think so, but what should it do? Like I said, all 3 code branches in goToByScroll do the same, or should I be looking at something else?

What I focused on was to get the plugins loaded and clicking on the menu animates smoothly to the correct block. And it shows the current link with yellow background (which I added for clarity) when scrolling the page "manually".
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RefaelAuthor Commented:
please have a look at the code. "if ($(window).width() > 960) {)"
Any top value i add e.g. (+60) seem to be ignored also the animation and the easing are being ignored.
0
Robert SchuttSoftware EngineerCommented:
What are you trying to accomplish? As far as I can see that code is only called when there is a hash tag present when you first access the page, not when clicking in the menu.
0
RefaelAuthor Commented:
Robert Schutt

All i am trying to achieve is making the code work. Meaning adding a top values and adding the animations.
0
Robert SchuttSoftware EngineerCommented:
I think you need to distinguish between 2 cases:

1. when the page is accessed with an url like "..../page.html#c2" then the code will execute which calls goToByScroll()

2. when a link is clicked, the "click" function is executed (the bit that I commented out in my version since it seemed superfluous to me) but if you want to do something extra in that case you need to be careful because there are already some things going on there:

   a. if nothing else is done (like it was initially because the plugins were not loading correctly), the browser will just jump to the specified anchor.

   b. the navigation menu plugin will pick it up and process in a nicer way, with smooth scroll and highlighting the link.


So in order to make things work the way you want you need to be specific about which action (click, refresh, scroll) should have a specific result. At the moment it's too generic; something should be moved down, something should be animated. I can't work out what you mean by it.
0
RefaelAuthor Commented:
Robert Schutt , you made it more complicated then i thought :-)

I refined my code and that's how i resolve it. Thank you.

The only thing i am trying to resolve now is how to set "active state" on the anchor link while scrolling.

$('ul#submenu-page li a').click(function(e) {		
		e.preventDefault();
		
		var subMenuId = $(this).attr("href");				
		$('ul#submenu-page li').removeClass("active");
		$(this).parent("li").addClass("active");
		
		if (subMenuId==='#section1') {
			$('body, html').scrollTo(0, 1000, {easing:"easeInOutExpo"});			
		} else {		
			$('body, html').scrollTo("#page " + subMenuId, 1000, {easing: "easeInOutExpo", offset:{top:-180}});
		}
	});

Open in new window

0
Robert SchuttSoftware EngineerCommented:
Well, sorry about that but the thing is you have a plugin doing all that so I assumed that's how you wanted to handle it... You can actually see it working on the link to my website that I posted earlier (class "current" is shown yellow).

But if you want to do it this way I can have a look. Do you have an updated fiddle?
0
RefaelAuthor Commented:
Hi Robert Schutt, thanks again.

No I have no update but its basically the same. The code i posted above with the same menu in the old fiddle. Still trying to figure out how to set the active state on scroll.
0
Robert SchuttSoftware EngineerCommented:
Ok, I'll have a look but can you please take another look at the link I posted earlier: http://schutt.nl/ee/Q_28665112/ - when you scroll down on that page, each section/link in the menu in turn gets a yellow background. Is that not exactly what you want to achieve? It works by setting the 'current' class on the li elements and is done by one of the plugins from your original fiddle.
0
Robert SchuttSoftware EngineerCommented:
You can simulate that behavior with something like this:
$(window).on('scroll', function(e){
    var st = document.body.scrollTop, newidx = -1;
    $('ul#submenu-page li').removeClass("active").each(function(idx,obj){
        if (newidx == - 1 && $(obj).offset().top > st) newidx = idx;
    });
    $('ul#submenu-page li:eq('+newidx+')').addClass("active");
});

Open in new window

You can see it in action here.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Robert Schutt your solution on both are very helpful. Thank you so much for your help with this.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.