Stuart Stuart -4 years ago 125
CSS Question

jQuery function still firing after $(window).resize

I have a search form that I wish to be always visible on desktop sizes (992px+) and hidden on mobile with a toggle button. Crucially, I also want the form to fold away after a user submits the search form.

All of the functionality described above works as intended except when you resize the browser window from less than 992px to above 992px, the submit button still hides the search form—this shouldn’t happen. Everything works fine without resize.

This can be replicated in this JSFiddle.

Here’s my code:

Hide search form after submit

// Close search form on mobile when clicking search input
$(document).ready(function() {
var $window = $(window);

function checkWidth() {
var windowsize = $window.width();

if (windowsize < 992) {
$('#search-form input').unbind().click(function() {
$('#search-form').slideToggle(250).removeClass('open');
$('a.search-toggle').removeClass('open');
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});


Form toggle button (hidden at desktop sizes):

// Hide/show search form on mobile
$(document).ready(function() {
$('a.search-toggle').click(function(event) {
event.preventDefault();
$(this).toggleClass('open');
$('#search-form').slideToggle(250, function() {
$('#search-form').toggleClass('open', $(this).is(':visible'));
});
});
});

Answer Source

Here you are

// Hide/show search form on mobile 
$(document).ready(function() {
  $('a.search-toggle').click(function(event) {
    event.preventDefault();
    $(this).toggleClass('open');
    $('#search-form').slideToggle(250, function() {
      $('#search-form').toggleClass('open', $(this).is(':visible'));
    });
  });
});

// Close search form on mobile when clicking search input
$(document).ready(function() {

  var $window = $(window);
  var inMobileMode = false;
  var inDesktopMode = false;

  function checkWidth() {
    var windowsize = $window.width();

    if (windowsize < 992 && !inMobileMode) {
      $('#search-form input').click(function() {
        $('#search-form').slideToggle(250).removeClass('open');
        $('a.search-toggle').removeClass('open');
      });
      inMobileMode = true;
      inDesktopMode = false;
      
    } else if(windowsize >= 992 && !inDesktopMode) {
    	$('#search-form input').off('click');
      $('#search-form').slideDown(250).addClass('open');
      	inDesktopMode = true;
        inMobileMode = false;
    }
  }
  // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});
body{
  background: #fff;
}

#search-form{
  padding: 30px;
  background: #eee;
}

@media ( min-width: 992px ){
  a.search-toggle{
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="search-toggle">Toggle search form</a>

<div id="search-form">
  <input type="Submit" value="Search">
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download