jquery - Best way to have a javascript load only on desktop version of site? -
i have javascript (jquery) running on wordpress site. want script load if screen width under 1024 pixels.
the reason because has how top navigation menu functions. want script load when screen width under 1024 pixels, because under going have different menu style / functionality.
naturally have plenty of media queries in css file change design @ min-width: 1024px.
i've found several ways this, i'm trying determine best way be.
here copy of current javascript file:
function accordion_menus(){ // if not on mobile (menu icon hidden) show sub items , bail console.log('debug: start'); if ( jquery('#primary-navigation .menu-toggle').is(':hidden') ){ console.log('debug: yes, hidden'); // show sub menus $('#primary-navigation ul.nav-menu ul.sub-menu').show(); return; } else{ // hide sub menus $('#primary-navigation ul.nav-menu ul.sub-menu').hide(); } // top level nav click function $('#primary-navigation ul.nav-menu > li > a').click(function(e){ // store parent li variable var parent_li = $(this).parent('li'); // if sub menu not exist in parent li if ( !$('ul.sub-menu', parent_li).first().length ) { return; } // if sub menu active, bail if ( parent_li.hasclass('sub-menu-active') ){ parent_li.find('ul').slideup(100, function(parent_li){ }); parent_li.removeclass('sub-menu-active'); return false; } // stop link click e.preventdefault(); // store current sub menu in variable var current_submenu = $('ul.sub-menu', parent_li).first(); // slide non-current sub menus $('#primary-navigation').find('ul.sub-menu').not(current_submenu).slideup(function(parent_li){ // remove sub-menu-active class first level items except current parent li $('#primary-navigation').find('li').not(parent_li).removeclass('sub-menu-active'); }); // slide down current sub menu current_submenu.slidedown(100, function(){ // add sub-menu-active current parent li parent_li.addclass('sub-menu-active'); }); }); // second level nav click function jquery('#primary-navigation ul.nav-menu ul.sub-menu > li > a').click(function(e){ // store parent li variable var parent_li = jquery(this).parent('li'); // if sub menu not exist in parent li if ( !jquery('ul.sub-menu', parent_li).first().length ) { return; } // if sub menu active, bail if ( parent_li.hasclass('sub-menu-active') ){ parent_li.find('ul').slideup(100, function(){ // remove sub-menu-active class first level items except current parent li }); parent_li.removeclass('sub-menu-active'); return false; } // stop link click e.preventdefault(); // store current sub menu in variable var current_submenu = jquery('ul.sub-menu', parent_li).first(); // slide non-current sub menus jquery('#primary-navigation ul.nav-menu ul.sub-menu > li > ul.sub-menu').not(current_submenu).slideup(function(){ // remove sub-menu-active class second level items except current parent li jquery('#primary-navigation ul.nav-menu ul.sub-menu > li').not(parent_li).removeclass('sub-menu-active'); }); // slide down current sub menu current_submenu.slidedown(100, function(){ // add sub-menu-active current parent li parent_li.addclass('sub-menu-active'); }); }); } // load menu accordion on doc ready jquery(document).ready(function($) { accordion_menus(); }); // load menu accordion on window resize jquery(window).resize(function(){ accordion_menus(); });
jquery(document).ready(function(){ function resizeform(){ var width = (window.innerwidth > 0) ? window.innerwidth : document.documentelement.clientwidth; if(width > 1024){ } else { } } window.onresize = resizeform; resizeform(); }); i've used alot. rerun js on each window resize. if don't want that, remove window.onresize = resizeform;. should work in browsers hence width.innerwidth check.
Comments
Post a Comment