Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matthew Stewart
Matthew Stewart
9,214 Points

Jquery Mobile Menu

First off – I wanted to see what the benefits would be of using a select vs the normal structure of using an unordered list for the mobile navigation as shown in the jquery building a mobile menu class.

Now on to the problem at hand:

I'm in the midst of creating a mobile dropdown menu. I'm having a couple of issues here with my code.

I've created a very simple solution that I think should work for mobile menu. I created a function that detects the width of the browser. If the width is under 686px it then hides the menu. Then if the menu button is click it shows the menu using the slideToggle function

var menuvisible = false;
var width;


function jsUpdateSize(){
    // Get the dimensions of the viewport
    width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;

    console.log (width);

    if ( width <= 686 ) {

    // Only if browser size is under 686px Hide / Toggle the Navigation

        // Hide Main Nav Links & Also hide Contact, ISI & PI Links
        $('.hide').hide();

        // Show / Hide Main Nav Links when Menu Button is clicked
        $('.menuBtn').click(function() {
            $('.hide').slideToggle("slow");
        });

    }


    if ( width > 686 ) {

        // Show Main Nav Links & Also show Contact, ISI & PI Links
        $('.hide').show();

    }

};

window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

I seem to be having two issues. One is that my layout gets funky when resizing my browser multiple times. The second thing that is happening is that when I click the menu button the menu is toggling several times instead of just once.

Any help would be much appreciated!

Since it is a function, anytime you call jsUpdateSize you need to call it with parenthesis like jsUpdateSize() Does that help?

2 Answers

The layout "funky" bug might be either the fact that the jsUpdateSize function is being called repetitively every time the browser resizes. And so the browser hides the menu over and over and over. I would not recommend doing this since you're calling jQuery's hide(); function every single time a resize happens and that can be very costly in terms of performance. As a general rule and best practice, I would recommend hiding and showing the menu with CSS media queries rather than JavaScript.

Now it might be that the menu is toggling multiple times since the event handler is INSIDE the jsUpdateSize function. I would recommend moving the click event handler outside of the jsUpdateSize function and testing whether the bug persists.

Matthew Stewart
Matthew Stewart
9,214 Points

Hey thanks for the feedback! Yeah I realized later that the issue with the toggle was that it was being called everytime the browser was under 686px – since it was being called repetitively when I resized my browser, the menu toggled for each of those resizes. It's all working now :)

Oh and I'm still not sure why it affected my layout – I went through my css and it ended up being that one of the items I had in the menu that was positioned absolute in a media query would break the layout – but only when I was using this javascript. I ended up using other layout methods to position the nav item and got rid of the absolute positioning – works just fine now.