Javascript functions with jQuery not fully working

Question

I am using a hamburger menu which toggles class with jQuery and fades in/out a hidden menu using Javascript all in the same click function. It is working except that the icon has to be clicked twice before the menu fades in initially, not even double clicking gets it to work at the same time as the icon toggles class, after that it is fine and works as expected, just the delay on first opening page, Or is there a way to do it better with jQuery, I did try a couple of ways but couldn't get it. The code is below:

 // In javascript
$( document ).ready(function() {
  $(".hamburger").click(function() {
    $("#primary_nav").toggleClass("is-active");
  }
});

// In CSS
#primary_nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
#primary_nav.is-active {
  opacity: 1;
  pointer-events: auto;
}

Its all inside an init() function so Im not sure if I need the document ready. (I am using Sage 9 for Wordpress) Any tips welcome. Thanks

Update I scrapped the javascript fades to use the jQuery toggle and css as in below answer, so its like that at the moment. The original Javascript target the js-btn on click. Wordpress generates extra classes menu-main-container etc as in image below. Just need this little bit to finish the nav. Thanks

Some HTML for context would be great, a minimal reproducible example would be even better. — Jon P
– Jon P, Commented Feb 13, 2018 at 0:12
That's a start, but can you change it to the HTML that is rendered to the page, hit "View Source" on the page to get the HTML that is rendered by Wordpress. — Jon P
– Jon P, Commented Feb 13, 2018 at 21:52

I'm Joe Too · Accepted Answer · 2018-02-14 20:49:41Z

1

You asked for another way, so that's what I'm providing. I don't like doing simple transitions like this in JS - I find them easier and more performant in CSS. So here's my suggestion:

// In javascript
$( document ).ready(function() {
  $(".hamburger").click(function() {
    $("#primary_nav").toggleClass("is-active");
  }
});

// In CSS
#primary_nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
#primary_nav.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 920px){
  #primary_nav {
    opacity: 1;
    pointer-events: auto;
  }
}

edited Feb 14, 2018 at 20:49

answered Feb 13, 2018 at 0:15

I'm Joe Too

5,9161 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

minimallinux Over a year ago

Hi, this looks better but I cant get it to work CSS @media only screen and (max-width: 899px) { #primary_nav { opacity: 0; pointer-events: none; transition: opacity 300ms; } #primary_nav.is-active { opacity: 1; pointer-events: auto; } } JS export default { init() { // JavaScript to be fired on all pages $( document ).ready(function() { $(".hamburger").click(function() { $(this).toggleClass("is-active"); $("#primary_nav").toggleClass("is-active"); }); }); }, Thanks

minimallinux Over a year ago

I added the HTML above, Thanks

minimallinux Over a year ago

Hi, I got this working now as in above example, just one question though, on resizing the browser to check, the nav is still visible for a while before it disappears, will this happen if a user access page on a mobile device? Thanks

I'm Joe Too Over a year ago

You can add a resize listener to remove the class which would close the menu. I wouldn't go crazy with this though - it's usually us developers who are constantly resizing the browser to test for responsiveness. I'd bet the majority of your users won't even rotate their phones, and there's no other "resize" even on phones or tablets.

minimallinux Over a year ago

So, it wouldn't affect a user who just browed to the page on their 320px phone or tablet? BTW Thanks for that it pretty much fixed it! Useful to know we can use CSS instead of JS.

|

Collectives™ on Stack Overflow

Javascript functions with jQuery not fully working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related