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
Nicole Vest
Full Stack JavaScript Techdegree Student 13,554 PointsjQuery $(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
17,657 PointsOK - 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.
Andrew Chalkley
Treehouse Guest TeacherAre you still having the issue?
Nicole Vest
Full Stack JavaScript Techdegree Student 13,554 PointsI am still having the issue. Sometimes the menu doesn't toggle when you click on it.
Cian Mac Mahon
17,657 PointsMight 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
Full Stack JavaScript Techdegree Student 13,554 PointsThank 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
17,657 PointsGreat! Thanks for following up with what your fix is. Hopefully it will help others who face similar issues!
Nicole Vest
Full Stack JavaScript Techdegree Student 13,554 PointsNicole Vest
Full Stack JavaScript Techdegree Student 13,554 PointsThank 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?