CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stuart
Stuart

Reputation: 1168

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'));
    });
  });
});

Upvotes: 2

Views: 272

Answers (2)

dschu
dschu

Reputation: 5362

You don't need any script running for implementing the behavior you like to achieve.

Here's a CSS only solution:

label:hover {
  cursor: pointer;
}

input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

#search-form {
  padding: 20px;
  background-color: grey;
  display: none;
  /* hide search form by default */
}


/* This does the whole magic */

input:checked+#search-form {
  display: block;
}
<label for="searchToggle">
  Toggle search
</label>
<input id="searchToggle" type="checkbox">
<div id="search-form">
  <input type="Submit" value="Search">
</div>

Upvotes: 0

disstruct
disstruct

Reputation: 693

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>

Upvotes: 3

Related Questions