onResize and onLoad handlers to toggle mobile layout

Question

I'm currently using onResize and onLoad in javascript code. Both events are coded identically so I was wondering if there is a way I could combine both into just one.

function MobileNavigation(el)
{
 this.$el = el;
}
MobileNavigation.prototype.init = function ()
{
 // Event handlers
 window.addEventListener('load', this._onLoad.bind(this));
 window.addEventListener('resize', _.debounce(this._onResize.bind(this), 150));
};
MobileNavigation.prototype._onLoad = function ()
{
 var windowHeight = $(window).outerHeight();
 headerHeight = $('header .wrapped').outerHeight();
 navigationHeight = windowHeight - headerHeight;
 // only apply to minimum width for sticky navigation to appear
 if (window.innerWidth >= MIN_WIDTH_BREAKPOINT) 
 {
 $('.responsive-navigation .nav-wrap').insertAfter('header .navigation-context .mobile-menu');
 $('header .nav-wrap .region-secondary-menu').insertBefore('header .nav-wrap .region-primary-menu');
 }
 else 
 {
 $('.responsive-navigation').append($('header .navigation-context .nav-wrap'));
 $('.responsive-navigation .nav-wrap .region-secondary-menu').insertAfter('.responsive-navigation .nav-wrap .region-primary-menu');
 }
 $('.responsive-navigation').css({'max-height' : navigationHeight, 'height' : navigationHeight});
 // Toogle Mobile Navigation
 $('header .mobile-menu').on('click', function() {
 $(this).toggleClass('active-menu')
 $('.responsive-navigation').toggleClass('show-navigation');
 })
 // Toggle AIM Sub Menus
 $('header .navigation > .menu > li').on('click', function() {
 console.log('expand menu');
 $(this).toggleClass('display-sub-menu');
 // $('.region-primary-menu > nav > .menu > li.display-sub-menu').removeClass('display-sub-menu');
 // $(this).addClass('display-sub-menu');
 })
};

---

MobileNavigation.prototype._onResize = function ()
{
 var windowHeight = $(window).outerHeight();
 headerHeight = $('header .wrapped').outerHeight();
 navigationHeight = windowHeight - headerHeight;
 // only apply to minimum width for sticky navigation to appear
 if (window.innerWidth >= MIN_WIDTH_BREAKPOINT) 
 {
 console.log('normal');
 $('.responsive-navigation .nav-wrap').insertAfter('header .navigation-context .mobile-menu');
 $('header .nav-wrap .region-secondary-menu').insertBefore('header .nav-wrap .region-primary-menu');
 }
 else 
 {
 console.log('mobile')
 $('.responsive-navigation').append($('header .navigation-context .nav-wrap'));
 $('.responsive-navigation .nav-wrap .region-secondary-menu').insertAfter('.responsive-navigation .nav-wrap .region-primary-menu');
 }
 $('.responsive-navigation').css({'max-height' : navigationHeight, 'height' : navigationHeight});
};

Answer 1

Your code is mainly about this test:

if (window.innerWidth >= MIN_WIDTH_BREAKPOINT)

You shouldn't be doing this using JavaScript to do this at all. Width-dependent layout is exactly what CSS media queries are for.

Furthermore, I would caution you against activating the mobile layout based on the width. This will break the "Request Desktop Site" feature in iOS Mobile Safari, which uses User-Agent switching instead.

• I wrestled a bear once.: i agree with you except for that last paragraph. using media queries also breaks the "request desktop site" feature. there are thousands of bootstrap websites in the wild today that do not respond to that feature (which by the way, exists in most mobile browsers on most platforms, not just ios)

Answer 2

I've upvoted 200's answer and you should take his advice, but for your future reference and information, I'll answer the question you posed...

Create your function.. Maybe think of a better name than this though

function loadAndResize(){
 var windowHeight = $(window).outerHeight();
 headerHeight = $('header .wrapped').outerHeight();
 navigationHeight = windowHeight - headerHeight;
// only apply to minimum width for sticky navigation to appear
if (window.innerWidth >= MIN_WIDTH_BREAKPOINT) 
{
 console.log('normal');
 $('.responsive-navigation .nav-wrap').insertAfter('header .navigation-context .mobile-menu');
 $('header .nav-wrap .region-secondary-menu').insertBefore('header .nav-wrap .region-primary-menu');
}
else 
{
 console.log('mobile')
 $('.responsive-navigation').append($('header .navigation-context .nav-wrap'));
 $('.responsive-navigation .nav-wrap .region-secondary-menu').insertAfter('.responsive-navigation .nav-wrap .region-primary-menu');
}
 $('.responsive-navigation').css({'max-height' : navigationHeight, 'height' : navigationHeight});
}

Then simply throw it on the hooks, no need ot duplicate the entire function :)

MobileNavigation.prototype._onResize = loadAndResize;
MobileNavigation.prototype._onLoad = loadAndResize;