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

Nicole Vest
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points
Posted by Nicole Vest
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points

jQuery $(window).resize is not working consistently.

Hello!

I am trying to use jQuery to make mobile drop down menu, but it only works sometimes. Does anyone know what I am doing wrong?

Here is the temporary url: www.nmvwebdesign.us

Here is the java code:

//Create mobile drop down menu
function toggleMenu(){
    if ($('#sidebar').width() < 200 ){
        //initially hide navigation
        $("#sidebar ul").hide();

        //toggle navigation when menu is clicked
        $("#menu").click(function() {
            $("#sidebar ul").toggle();
        });
    }else $("#sidebar ul").show();
};

//call function on load and page resize
$(window).load(toggleMenu);
$(window).resize(toggleMenu);

I would appreciate any help!

Thanks! Nicole

4 Answers

Cian Mac Mahon
Cian Mac Mahon
17,657 Points

OK - I think I've worked out the issue.

It revolves around your if statement. If we read it carefully, it says IF the sidebar's width is less than 200 px, than 1) hide it and 2) bind the click event to it.

It looks to me like this only happens when the page LOADS with the menu width less than 200px, and if the page loads with a menu wider than this the click event doesn't get bound.

Nicole Vest
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points
Nicole Vest
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points

Thank you for looking in to this so thoroughly! Here is a little more about what is going on. I only have one media query (768px) in which the menu is set to a width of 200px. Any screen smaller than that, the menu comes out to a width of 169px.

Toggling seems to work when: The page is loaded as a large screen and then restored down or dragged to a small screen.

Toggling seems to not work when: The page is loaded as a small screen and then re-sized.

Do you know what could be causing this?

Cian Mac Mahon
Cian Mac Mahon
17,657 Points
Cian Mac Mahon
Cian Mac Mahon
17,657 Points

Might an alternative solution be to use responsive CSS to have your menu minimised, always bind the click event to the menu button and then simply set it to display none on screens larger than a certain width?

Nicole Vest
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points
Nicole Vest
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 13,226 Points

Thank you for your help Cian! I just replaced

  if ($('#sidebar').width() < 200 ){

with

 if ($(window).width() < 768 ){

Now it seems to work! :)

Cian Mac Mahon
Cian Mac Mahon
17,657 Points

Great! Thanks for following up with what your fix is. Hopefully it will help others who face similar issues!