[SOLVED] jQuery orientationchange function not working

jQuery orientationchange function not working

Below 800px width my #main_navigation is hidden by CSS display: none in a media query. A click on the menu icon (which becomes visible below 800px) triggers this jQuery script: jQuery('#main_navigation').slideToggle(300); It inserts style:'display: block' into that tag, and when clicked again, that changes to style:'display: none'.

Now, when I for example use a 1024x768 tablet/iPad, in landscape mode the menu is regularly displayed (as a horizontal list), in portrait mode it's hidden (represented by a menu icon) and displayed when I click the menu icon.

But when I click/tap the icon twice (show, then hide) in portrait mode and then turn the tablet into landscape mode, neither the icon (due to the stylesheet) nor the regular menu (due to the style:'display: none' set by jQuery) attribute are displayed: No menu at all!

So I inserted this function, hoping to simply delete/remove the style attribute when turning the device and thereby making the menu visible again above 800px width (i.e. the regular stylesheet and media queries are applied):

jQuery(window).on('orientationchange', function () {
    jQuery('#main_navigation').removeAttr('style');
});

But: It doesn't work, my menu tag still contains style:'display: none', and therefore there is no visible menu in the described situation. Where is the error?

Solution

Try using a condition about the current width when the display is rezized:

And if the orientationchange isn't working (should work), try adding the resize event.

jQuery(window).on('orientationchange resize', function () {
  if(jquery("body").width()>768){  // Make sure to test that width... Just a suggestion here.
    jQuery('#main_navigation').show();
  }
});