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

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

If jQuery is used then the element is hidden even when it shouldn't

The site www.jaanavuola.com is using simple jQuery code for hiding and showing mobile menu. 

    jQuery(document).ready(function($){

      // $(".site-header")site.hide();
      // $(".open-close-mob-nav").show();

      $('.open-close-mob-nav').click(function(){
      $(".site-header").fadeToggle(400);
      });

    });

The button (upper right corner - two lines and text "Valikko") appears when the windows is max 860px wide.

The site has normally a side bar navigation panel which is hidden when the width is less than 860px. If the mobile navigation buttons is then pressed to activate the hidden side bar and then the browser windows is resized back to more than 860px the side bar doesn't appear. Why this is happening?

Sarah Stensberg
.a{fill-rule:evenodd;}techdegree
Sarah Stensberg
Full Stack JavaScript Techdegree Student 5,007 Points

I went to your web, site and tried to reproduce and couldn't. Maybe this is fixed now?

Jonathan Dewitt
Jonathan Dewitt
8,101 Points

It happens because using .show() or .hide() adds inline styles to your element. These inline styles do not get updated from your CSS media queries, so the sidebar stays hidden or stays visible when you resize.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Jonathan. Can you provide with a better solution to this?

Jonathan Dewitt
Jonathan Dewitt
8,101 Points

You cannot rely only on the jQuery click event to show/hide the sidebar for mobile. You also need to create a conditional that checks the window width and shows or hides the sidebar based on that.

if ($(window).width() < 860) {
   $('.site-header').hide()
}
else {
   $('.site-header').show()
}

Or something like that

Konstantin Nikkari
Konstantin Nikkari
5,185 Points 
jQuery(document).ready(function($){

  $('.open-close-mob-nav').click(function(){
  $(".site-header").fadeToggle(400);
  });

  if ($(window).width() < 860) {
   $('.site-header').hide()
  }
  else {
     $('.site-header').show()
  }

});

The if statement seems to not do anything.

Jonathan Dewitt
Jonathan Dewitt
8,101 Points

It was just an example. For it to work when manually resizing your window, you would need something like this:

 $(window).resize(function() {
  if ($(window).width() < 860) {
     // hide
  }
 else {
    // show
 }
});
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Amazing Jonathan. You solved it! Thanks <3. I you would type your comment as an answer I could select it as a "best answer"

Also do you think it is wise to keep the side bar as display:none when in mobile? I'm a bit concerned about the fact that search engines are not reading display:none elements. Maybe using something like 

visibility: hidden;

But then the .show() and .hide() jQuery commands are not working.

1 Answer

Jonathan Dewitt
Jonathan Dewitt
8,101 Points

For jQuery to update on resize events, you need to attach it to a resize handler:

$(window).resize(function() {
  if ($(window).width() < 860) {
     // hide
  }
 else {
    // show
 }
});

I cannot speak to the implications of the hidden sidebar toward SEO.