0

I'm having an issue with a responsive menu I've been working on for some of my designed sites. The jQuery part of it is made to show or hide the menu depending on window width (and hide/show a bar to toggle it).

In mobile browsers, the toggled-open menu will close again when you scroll -- but only if the address bar has been hidden or shown by scrolling down or up. This happens in Android and iOS.

I've definitely narrowed it down to the address bar's appearance and disappearance, because:

  • it only happens on mobile browsers.
  • the address bar doesn't disappear while the page is still loading (at least in Opera), and thus the menu doesn't close when I scroll under that condition.
  • the menu won't close if I scroll after the address bar has been hidden.

However, I don't know what to do to fix it; the address bar affects the height of the window/page, not the width, so I'm unsure of why the menu toggles when you scroll up/down. This method is the simplest way for me to make a responsive menu with how things are set up currently.

Here's the relevant part of the code I'm using:

    var winwidth = $(window).width();
    $(window).resize(function() {
        var newwinwidth = $(window).width();
        if(winwidth = newwinwidth && newwinwidth <= 768) {
            // if smaller or equal
            $('.menu ul').hide();
        } else {
            // if larger
            $('.menu ul').show();
        }
    }).resize();

Here's a live example of a site on which this happens: http://jessicacantlope.com

I've already tried a couple debounce methods to see if that would solve the problem (it doesn't; it just delays the action) and also scoured this website. I've included app-capable meta elements and a few other iOS-specific things.

I also looked into solutions that hide the address bar entirely, but they only work under certain conditions and rely on modifying system UI/UX, which is something I don't want to do. I just want to keep it simple.

Any help would be appreciated. I'm more of a designer than a developer, and I love elegant solutions.

EDIT, 2020: Five+ years later, after having implemented a solution that seemed to work for a while and then failed again, I started tinkering and realized that, for the way I had designed my mobile menu and website, and with some of the things I had tried since then, I had been mistakenly targeting the wrong selectors in my code! And I hadn't thought deeply enough about how to apply the first suggestion. It's not elegantly written so I won't post my final code, but I finally got things in working shape. Thanks, everyone!

4 Answers 4

1

I had the same issue when working on a responsive site of my own. I was unable to discover the root cause of the issue but I developed a work-around. The anchor which I use to display the menu had a "open" toggle class added to it. I essentially used the "window.onscroll" call to check whether or not the menu should be shown each time the user scrolls the page, "showing" the menu again after each scroll.

window.onscroll = function (e) {  
    var sidebar = $('#sidebar')
    var menu = $('#sidebar > ul');
    if(sidebar.hasClass('open'))
        {
            menu.show();
        }
    } 

Hope this helps!

1
  • Thanks much, this is a decent workaround that I've now implemented! Of course, the menu still momentarily blips out when a scroll causes the address bar to hide and thus triggers the resize again, before it comes back via this solution. It wouldn't bug me so much if it blipped faster. I wonder if there's a way to control that? I'm thinking of coming up with a more CSS-oriented solution, too. But this is the kind of thing I was looking for, so thanks again. Jan 29, 2015 at 19:30
1

I had faced the same problem. But I fixed the solution. The problem is, while scrolling the page some times it triggers the resize event of window. When it will check the width of the window it is less than 768px. So the menu will be hidden. There are two solutions for this. First one, you can remove window resize function. Second one, inside the window resize function you should check whether the navigation is opened or closed. According to that you can customize the hide and show process. Which means, if navigation is closed and window width is greater than 768px you can show navigation.

1
  • Thank's! That solved it for me! I just had to add an if statement around one of the resize functions to check if the menu was currently open and then it did not trigger the menu .slideUp() anymore =)
    – eve
    Jul 14, 2016 at 16:23
1

I was also facing the same issue and no matter what I do with resize() function matching height or width of dom the function was still triggering on mobile device so i tried using $(window).on("orientationchange",function() and the problem got fixed.

0

I found a solution for the problem here javascript resize event on scroll - mobile

    var cachedWidth = $(window).width();
$(window).resize(function(){
    var newWidth = $(window).width();
    if(newWidth !== cachedWidth){
        //PUT YOUR RESIZE HERE
        cachedWidth = newWidth;
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.