How to cancel Jquery function on window resize?

Question

I have a simple single page website with a toggle menu that uses slideUp() on click of a menu-item in mobile view(screen.width < 599). Everything works smooth, however the same behavior takes place when in desktop view(screen.width > 599). I'd like for the slideUp() function to only execute when in mobile view and when in desktop view to be ignored.Also I'd like for this behavior to carry through on window resize so for example if the browser is opened in desktop view and resized to mobile view I'd like the browser to execute the slideUp() function. How can I achieve this? Currently the way I have it set up is if the browser is opened in mobile view the slideUp() works fine and if the browser is opened in desktop view the slideUp() is ignored but if window is resized down to mobile view the toggle menu will not slideUp() on click of menu-item and menu remains down. Is it possible to make this transition on window resize? I've tried playing around with location.reload and a few if-statements here and there but failed to make it work so I'm wondering can this be done? Do I have to modify CSS and HTML? Also I should mention I'm new to JavaScript so please be as specific as possible with comments and answers.

  $(document).ready( function() { // scroll-to-section effect jQuery('#m-home').click(function(){ $('html, body').animate({ scrollTop: ($('#home').offset().top) },700); }); jQuery('#m-about').click(function(){ $('html, body').animate({ scrollTop: ($('#about').offset().top) },700); }); jQuery('#m-contact').click(function(){ $('html, body').animate({ scrollTop: ($('#contact').offset().top) },700); }); // toggle menu $('.m_btn').click( function() { $('.menu').stop().slideToggle(); jQuery('.menu-item').click(function(){ if( screen.width > 599 ) { return; } $('.menu').slideUp(); }); }); // Back-to-top button var offset = 250; var duration = 300; jQuery(window).scroll( function() { if( jQuery(this).scrollTop() > offset ) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click( function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }); }); 

  * { margin: 0px; padding: 0px; } header { background: #ffffff; border-bottom: 1px solid #2d2d2d; padding: 30px 0; } .container { max-width: 1170px; margin: 0 auto; position: relative; padding: 0 20px; } .logo { float: left; font-size: 20px; font-weight: bold; } .menu { float: right; } .menu ul li { float: left; margin-left: 40px; list-style-type: none; } .menu ul li a { color: #2d2d2d; font-size: 14px; text-decoration: none; } .menu ul li a:hover { color: #d2d2d2; text-decoration: none; } .m_btn { float: right; display: block; position: relative; bottom: 5px; } .back-to-top { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 60px; height: 60px; z-index: 1000; display: none; text-decoration: none; background-color: transparent; border-radius: 100%; } .back-to-top img { width: 40px; height: 40px; border-radius: 100%; } /* Mobile */ @media only screen and ( max-width: 599px ) { .m_btn { display: block; } .menu { display: none; width: 100%; margin-top: 1px; } .menu ul li { margin-top: 3px; margin-left: 0; padding: 10px 0; float: none; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 200px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 200px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Tablet */ @media only screen and ( min-width: 600px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 500px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 500px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Desktop */ @media only screen and ( min-width: 900px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 800px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 800px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Desktop-large */ @media only screen and ( min-width: 1200px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 1100px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 1100px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NAVNAV</title> <meta name="description" content="NAVNAV - A responsive nav manu." /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="navbar.js"></script> </head> <body> <header> <div class="container"> <!-- logo div--> <div class="logo">NAVNAV</div> <!-- menu list button handle--> <a href="javascript:void(0);" class="m_btn"> <img src="./images/menuDarkGray.png" alt="menu"> </a> <!-- menu div --> <nav class="menu"> <ul> <li class="menu-item"><a id="m-home" href="#home">home</a></li> <li class="menu-item"><a id="m-about" href="#about">about</a></li> <li class="menu-item"><a id="m-contact" href="#contact">contact</a></li> </ul> </nav> </div> </header> <main> <section id="home"> <br/> <h1>home</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> <section id="about"> <br/> <h1>about</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> <section id="contact"> <br/> <h1>contact</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> </main> <footer> <div class="content-footer"> <p>NAVNAV</p> <p>A responsive navigation menu.</p> </div> </footer> <a href="#" class="back-to-top"><img <img src="./images/up-arrow.png" alt="Go back to top."></a> </body> </html> 

Answer 1

The problem is you are checking screen.width which is same even if you resize the window. screen refers to the display device, not the window. You could use $('body').width() instead and it will work.

Btw, your .menu-item click handler should be outside as shown below. If you add it inside .m_btn click handler then every time user clicks on the menu button, a new click handler will get added for .menu-item .

 $(document).ready( function() { // scroll-to-section effect jQuery('#m-home').click(function(){ $('html, body').animate({ scrollTop: ($('#home').offset().top) },700); }); jQuery('#m-about').click(function(){ $('html, body').animate({ scrollTop: ($('#about').offset().top) },700); }); jQuery('#m-contact').click(function(){ $('html, body').animate({ scrollTop: ($('#contact').offset().top) },700); }); // toggle menu $('.m_btn').click( function() { $('.menu').stop().slideToggle(); }); jQuery('.menu-item').click(function(){ if( $('body').width() > 599 ) { return; } $('.menu').slideUp(); }); // Back-to-top button var offset = 250; var duration = 300; jQuery(window).scroll( function() { if( jQuery(this).scrollTop() > offset ) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click( function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }); }); 

 * { margin: 0px; padding: 0px; } header { background: #ffffff; border-bottom: 1px solid #2d2d2d; padding: 30px 0; } .container { max-width: 1170px; margin: 0 auto; position: relative; padding: 0 20px; } .logo { float: left; font-size: 20px; font-weight: bold; } .menu { float: right; } .menu ul li { float: left; margin-left: 40px; list-style-type: none; } .menu ul li a { color: #2d2d2d; font-size: 14px; text-decoration: none; } .menu ul li a:hover { color: #d2d2d2; text-decoration: none; } .m_btn { float: right; display: block; position: relative; bottom: 5px; } .back-to-top { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 60px; height: 60px; z-index: 1000; display: none; text-decoration: none; background-color: transparent; border-radius: 100%; } .back-to-top img { width: 40px; height: 40px; border-radius: 100%; } /* Mobile */ @media only screen and ( max-width: 599px ) { .m_btn { display: block; } .menu { display: none; width: 100%; margin-top: 1px; } .menu ul li { margin-top: 3px; margin-left: 0; padding: 10px 0; float: none; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 200px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 200px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Tablet */ @media only screen and ( min-width: 600px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 500px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 500px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Desktop */ @media only screen and ( min-width: 900px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 800px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 800px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } /* Desktop-large */ @media only screen and ( min-width: 1200px ) { .m_btn { display: none; } .menu { display: block !important; } main { width: 100%; margin: 0 auto; } main #home, #about, #contact { width: 1100px; margin: 0 auto; text-align: left; padding-top: 40px; padding-bottom: 40px; } footer { width: 100%; margin: 0 auto; } footer .content-footer { width: 1100px; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom: 10px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NAVNAV</title> <meta name="description" content="NAVNAV - A responsive nav manu." /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="navbar.js"></script> </head> <body> <header> <div class="container"> <!-- logo div--> <div class="logo">NAVNAV</div> <!-- menu list button handle--> <a href="javascript:void(0);" class="m_btn"> <img src="./images/menuDarkGray.png" alt="menu"> </a> <!-- menu div --> <nav class="menu"> <ul> <li class="menu-item"><a id="m-home" href="#home">home</a></li> <li class="menu-item"><a id="m-about" href="#about">about</a></li> <li class="menu-item"><a id="m-contact" href="#contact">contact</a></li> </ul> </nav> </div> </header> <main> <section id="home"> <br/> <h1>home</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> <section id="about"> <br/> <h1>about</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> <section id="contact"> <br/> <h1>contact</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br/> </section> </main> <footer> <div class="content-footer"> <p>NAVNAV</p> <p>A responsive navigation menu.</p> </div> </footer> <a href="#" class="back-to-top"><img <img src="./images/up-arrow.png" alt="Go back to top."></a> </body> </html>