0

I’m looking for help on a project I’m working on and I can’t seem to figure it out. I’ve searched and tried various scripts as well as no conflict scripts. I’m hoping someone can help me out.

I have a single page that anchors from the nav to content on the page. When you hover over an image in the middle of the page, you can click to an off canvas page. I’ve got this working, however I would like to have smooth scrolling when you click on the main navigation at the bottom of the page. It seems that the off canvas anchors and the smooth scrolling script don’t work together. I’m very new to jquery and javascript, so I can’t seem to make it work.

I found this code for the smooth scrolling (right now I have this commented out), but when i place this code on the page, it breaks the nav anchors:

$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});
});

Is there another code that can work on my page? You can inspect my page here:

http://ebresearch1.wpengine.com/index.html

Also, I’m having trouble with having my nav icons have an active state on them.

I’m using this code:

jQuery('.nodes a').click(function () {
jQuery(this).find('.inactive-circle').toggleClass('active hide');
});

But it only toggles the active and non active states. I want them to stay active only until you click on another nav item.

Tablet problem:

On another note, my mobile/tablet hamburger links in nav don’t close nav after clicked. It just stays open. I can’t seem to trigger the off canvas to close after clicking on a link.

I know this is a lot of information, but I’m stuck. If I need to provide more information, please let me know and i’ll post it.

Thanks!

gdeleon101
  • 88
  • 2
  • 11

1 Answers1

0

quick one for your second problem:

jQuery('.nodes a').click(function () {
   jQuery('.nodes a').find('.inactive-circle').removeClass('active hide');
   jQuery(this).find('.inactive-circle').addClass('active hide');
});

not quite sure how your divs and css are set up here as it feels like it could be simpler somehow, but the main principle with this is to first make all of your .nodes a divs inactive and then make this one active.

for third problem, this is a bit of a hack but to avoid meddling with your offCanvas script you can trigger a click on the hamburger when a menu div is clicked:

jQuery('#0 a').click(function () {
    jQuery('#rightBurger').trigger('click');
});

hope that helps, gotta run but will come back come back and attempt the main one if no one else does.

Sam0
  • 1,429
  • 1
  • 11
  • 13
  • Sam0, those worked perfectly! I appreciate it! Thanks for your help! – gdeleon101 Sep 14 '16 at 18:37
  • for your first problem I had a look at the css-tricks page originating your snippet and then found this alternative http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll which looks easier to implement/debug, might work out better for you. – Sam0 Sep 14 '16 at 19:44
  • I've added the code, but still no smooth scrolling. – gdeleon101 Sep 14 '16 at 21:03
  • meant to add: not sure how your current scrolling is working (couldn't find it in your js) but the animation should work if you can disable this? I think the animation attempt is being shortcut by the other mechanism? and then also be sure your `event.preventDefault();` is in effect. will take a second look soon – Sam0 Sep 14 '16 at 22:11
  • Currently there is no scrolling. There should only be the script you sent me. – gdeleon101 Sep 14 '16 at 22:24
  • I think we'll be automatically bumped to chat next. I'm looking at it now and can't quite figure it out, plus I see there's now a small delay before the jump. which is interesting. I'm thinking I will make a jsfiddle shortly using html data attributes to replace your href content. This will block any other default actions and give the animation script a clear run - if this doesn't work then it should still prove easier to debug. As an aside; your console is complaining about your slickslider option not going through and I see you've commented out the pause option? minor prob. – Sam0 Sep 14 '16 at 22:35
  • try changing your `$('html, body')....` to `$('.scrollableArea')...` and add `event.stopPropagation();` below your preventDefault – Sam0 Sep 14 '16 at 22:42
  • I've uploaded the new changes, and it scrolls. Awesome! however it's buggy on the third through fifth nav bullets. – gdeleon101 Sep 14 '16 at 23:06
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123393/discussion-between-sam0-and-gdeleon101). – Sam0 Sep 14 '16 at 23:10