Change tablet orientation using jquery and modernizr

Question

So, I have a navigation menu that changes the style when viewing a tablet in portrait or landscape view. It resets the last few menu items to another drop-down menu. However, when you change the orientation of the menu is not updated, only after the update.

Jquery Modernizr Code:

if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){ // portrait stuff // unhides last few menu items $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); // remove hide and first child class originally assigned to it from it ul parent // then add the more list item to the end of the nav menu $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items'); // grab the last two items of the nav menu and insert into the more list item menu $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu'); } 

Any suggestions

Answer 1

So it turns out that wrapping a function in a listen resize does the job! It seemed to work better when it has an else expression. You just need to continue testing on other devices.

Updated code:

 $(window).bind('resize', function(){ if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){ // portrait stuff // unhides last few menu items $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); // remove hide and first child class originally assigned to it from it ul parent // then add the more list item to the end of the nav menu $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items'); // grab the last two items of the nav menu and insert into the more list item menu $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu'); } else if(Modernizr.mq('(max-device-width: 1280px) and (max-device-height: 800px) and (orientation: landscape)') || Modernizr.mq('(max-device-width: 1024px) and (orientation: landscape)')){ $('.moreMenu').children().appendTo('#menu-primary-items'); $('.moreItem').addClass('hide first-child').appendTo('.moreItemHolder'); $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); } });