Disable Javascript effect based on the screen's size

Question

I just made a search bar which expands after a click on the search icon (this is made in javascript). Now doing the responsive design, I want to disable the javascript. Im now coming to you to try to find a to disable a javascript effect.

My source code is here for you to try it, make sure you reduice the size of the screen for the responsive to take effect.

 body{ padding:0; margin:0; font-family: Arial, sans-serif; } .header-two-bars{ font:13px Arial, Helvetica, sans-serif; } .header-two-bars .header-limiter{ max-width: 1200px; text-align: center; margin: 0 auto; } /* Logo */ .header-two-bars h1{ float: left; font: normal 35px Cookie, Calibri, Helvetica, sans-serif; line-height: 40px; margin: 0; } .header-two-bars h1 span { color: #5383d3; } /* The first bar */ .header-two-bars .header-first-bar{ background-color:#292c2f; box-shadow:0 1px 1px #ccc; padding: 20px 40px; height: 80px; color: #ffffff; box-sizing: border-box; } .header-two-bars .header-first-bar a { color: #ffffff; text-decoration: none; } .member-area-buttons { float: right; } .signup-button, .login-user, .login-designer { font-size: 13px; float: left; font-weight: bold; border-radius: 3px; background-color: #5383d3; color: white; height: 40px; padding: 5px 20px; border: 1px solid #5E6367; box-sizing: border-box; margin-right: 5px; } .signup-button:hover, .login-user:hover, .login-designer:hover{ background-color:#2B5773; } .signup-button{ padding-top: 10px; margin-top: 0; border-radius: 2px; background-color: #6caee0; color: #ffffff; font-weight: bold; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); border: 0; } /*social-button*/ /* .header-two-bars .header-first-bar nav i.fa { display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-top: 0; margin-right: 3px; } */ /* Second Bar */ .header-two-bars .header-second-bar { background-color: #ffffff; box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05); padding: 20px 40px; } .header-two-bars .header-second-bar h2 { margin: 0; float: left; color: #292c2f; font-weight: bold; font-style: italic; } .header-two-bars .header-second-bar h2 a { font-size: 16px; color: #4e5359; text-decoration: none; } .header-two-bars .header-second-bar nav { text-align: right; line-height: 20px; font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font:14px Arial, Helvetica, sans-serif; } .header-two-bars .header-second-bar nav a{ display: inline-block; color: #4e5359; text-decoration: none; padding-left: 12px; padding-right: 12px; } .header-two-bars .header-second-bar nav a:last-child{ color: red; } .header-two-bars .header-second-bar nav a:hover{ border-radius: 2px; background-color: #2B5773; padding-top:8px; padding-bottom: 8px; color: white; opacity: 0.7; } .header-two-bars .header-second-bar nav a.selected{ border-radius: 2px; background-color: #2B5773; padding: 8px 12px; color: white; } .header-two-bars .header-second-bar nav i.fa { color: #A9B7BF; margin: 0 4px 0 0; } /* Responsive Design */ @media all and (max-width: 800px) { .header-two-bars .header-second-bar nav{ font-size:14px; } .header-two-bars .header-first-bar h1 { font-size: 29px; margin-left: -10px; margin-right: 10px; } } @media all and (max-width:590px) { .header-two-bars .header-first-bar{ height: 120px; padding:20px; padding-bottom: 20px; } .header-two-bars .header-first-bar h1 { float: none; margin: -8px 0 2px; text-align: center; font-size: 28px; padding-bottom: 20px; line-height: 1; } /*social-button .social-button { float:left; } .header-two-bars .header-first-bar nav i.fa { display:inline-block; font-size:20px; } */ .signup-button, .login-user, .login-designer { font-size: 12px; } .header-two-bars .header-second-bar{ padding: 20px 0; } } @media all and (max-width: 610px) { .header-two-bars .header-second-bar h2{ float:none; margin: 0 0 12px; } .header-two-bars .header-second-bar nav{ text-align: center; } .header-two-bars .header-second-bar nav a{ display: block; padding: 8px; } .header-two-bars .header-second-bar nav i.fa{ margin-left:0; } } @media all and (max-width: 465px) { .header-two-bars .header-first-bar{ padding: 5px; padding-top: 15px; } .signup-button, .login-user, .login-designer { font-size: 12px; padding: 5px 10px 5px 10px; border: 1px solid #5E6367; box-sizing: border-box; width: 76px } .signup-button{ padding-top:10px; } } @media all and (max-width: 320px) { .header-two-bars .header-first-bar{ height: 180px; } /*Social Button .social-button { float: none; margin: 0 auto; display:inline-block; margin-top: 10px; } */ .member-area-buttons { float:none; text-align: center; } /*.signup-button, .login-user,*/ .login-designer { float: none; display: inline-block; } .signup-button { float:left; margin-left:10px; } .login-user { float:right; margin-right:10px; } } /* The search box */ .header-search form { float:right; position: relative; right: 10px; border-radius: 3px; background-color: #3a3c3e; width: 44px; height: 40px; cursor: pointer; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; } /* CSS search icon */ .header-search form:before { position: absolute; content: ''; border-radius: 50%; border: 2px solid #fff; width: 9px; height: 9px; top: 12px; left: 14px; } .header-search form:after { position: absolute; content: ''; background-color: #fff; width: 2px; height: 8px; top: 22px; left: 26px; -webkit-transform: rotate(-44deg); -moz-transform: rotate(-44deg); transform: rotate(-44deg); } /* The search box */ .header-search form input { display: none; position: absolute; left: 42px; padding: 11px 12px 9px; border: none; width: 210px; border-radius: 2px 0 0 2px; height: 40px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Making the header responsive. */ @media all and (max-width: 590px) { .header-search form { float: left; left: 5px; } } @media all and (max-width: 320px) { .header-search form { float: none; display: block; text-align: center; top: 20px; left: 12px; width: 78%; } .header-search form input { display: inline-block; width: 100%; } .stop_javascript { display: none; } } @media all and (max-width: 300px) { .header-search form { left: 9px; } }

 <header class="header-two-bars"> <div class="header-first-bar"> <div class="header-limiter"> <h1><a href="#">Africa<span>Fashion</span></a></h1> <div class="member-area-buttons"> <a href="form-register.html" class="signup-button">Sign Up</a> <a href="form-login-designer.html" class="login-designer">Login <br/> Designer</a> <a href="form-login-user.html" class="login-user">Login <br/> User</a> </div> <div class="header-search"> <form method="get" action="#"> <input type="search" placeholder="Search!" name="search"> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-search form').on('click', function(e) { // If the form (which is turned into the search button) was // clicked directly, toggle the visibility of the search box. if(e.target == this) { $(this).find('input').toggle(); } }); }); </script> </div> </div> <div class="header-second-bar"> <div class="header-limiter"> <h2><a href="#">Hi,</a></h2> <nav> <a href="content/index.html"><i class="fa fa-male"></i> Men</a> <a href="content/index.html" class="selected"><i class="fa fa-female"></i> Women</a> <a href="content/index.html"><i class="fa fa-folder-o"></i> Latest Collection</a> <a href="content/index.html"><i class="fa fa-check"></i> Designers</a> <a href="content/index.html"><i class="fa fa-check" style="color: red;"></i> Northern Fashion</a> <!-- It should be red--> </nav> </div> </div> </header>

Thanks

Answer 1

You could try checking the window width before you run toggle (you'll want to change minWidth to the minimum width you want for your application):

$(document).ready(function() {

    $('.header-search form').on('click', function(e) {

        // If the form (which is turned into the search button) was
        // clicked directly, toggle the visibility of the search box.

        if(e.target == this && window.innerWidth > minWidth) {
            $(this).find('input').toggle();
        }

    });
});