Docs

[2342J]

Hmm.

[Rupok]

If you still face any issue feel free to let us know. We’ll be happy to assist you.

[2342J]

This worked for me. Thank you. Now I notice that when you click on the search it opens and works, but you can’t cancel/close it by clicking on the screen again.

[2342J]

Can you take a look at this java script again? It does not cancel the search on keydown.

jQuery(function($) {

  var $trigger  = $('.x-btn-navbar-search');
  var $formWrap = $('.x-searchform-overlay');
  var $input    = $formWrap.find('.search-query');
  var escKey    = 27;

  function clearSearch() {
    $formWrap.toggleClass('in');
    setTimeout(function() { $input.val(''); }, 350);
  }

  $trigger.on('touchstart click', function(e) {
    e.preventDefault();
    $formWrap.toggleClass('in');
    $input.focus();
  });

  $formWrap.on('touchstart click', function(e) {
    if ( ! $(e.target).hasClass('search-query') ) {
      clearSearch();
    }
  });

  $(document).keydown(function(e) {
    if ( e.which === escKey ) {
      if ( $formWrap.hasClass('in') ) {
        clearSearch();
      }
    }
  });

});

[Rue Nel]

Hello There,

We have tried to login to your site to fix the issue. Regretfully the given access is no longer working for us. Regrading the JS code, the esc key works perfectly when we tested your site. It’s just that the search overlay doesn’t exit when you click anywhere outside the search input. Could you please give us access to your site again so that we can fix the issue. If you have installed WordFence, please temporarily disable it for the time being.

Thank you.

[2342J]

This reply has been marked as private.

[Rue Nel]

Hello There,

To resolve your issue, please update the JS code and use this instead:

jQuery(function($) {

  var $trigger  = $('.x-btn-navbar-search');
  var $formWrap = $('.x-searchform-overlay');
  var $input    = $formWrap.find('.search-query');
  var escKey    = 27;

  function clearSearch() {
    $formWrap.toggleClass('in');
    setTimeout(function() { $input.val(''); }, 350);
  }

  $trigger.on('touchstart click', function(e) {
    e.preventDefault();
    $formWrap.toggleClass('in');
    $input.focus();
  });

  $(document).keydown(function(e) {
    if ( e.which === escKey ) {
      if ( $formWrap.hasClass('in') ) {
        clearSearch();
      }
    }
  });

});

We would loved to know if this has work for you. Thank you.

[2342J]

Yes! Well done. Thanks for that, I’m learning a lot from you.

[Thai]

If you need anything else please let us know.

[2342J]

Resolved. Thanks again!

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts