X-search form-overlay - in widget?

Support
#1

I’d like to add this affect in my sidebar widgets for site search - Integrity Pro Theme w/child.

Where would I start?

Thanks- Todd

#2

Hi @toddfmay,

Thanks for writing in.

Add this code in your widget so that you could have a search that has that effect.

Replace the following URL “http://your-site.com/” with your domain name.

<form action="http://your-site.com/" class="form-search" id="searchform" method="get">
  <label class="visually-hidden" for="s">Search</label>
  <input type="text" placeholder="Search" name="s" class="search-query" id="s">
</form>

Let us if this what you want to achieve.

Thanks.

#3

Thanks NIco - I added this to my sidebar - but only get a standard search bar - not the overlay effect we were looking for…

Thanks- Todd

#4

Hello Todd,

Sorry if it did not work out for you. Please remove the code and replace it with this one:

<p style="font-size: 24px;"><a href="#" class="x-btn-navbar-search">
<span><i class="x-icon-search" data-x-icon="&#xf002;" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a></p>

<div class="x-searchform-overlay">
	<div class="x-searchform-overlay-inner">
	  <div class="x-container max width">
	    <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	      <label for="s" class="cfc-h-tx tt-upper"><?php _e( 'Type and Press &ldquo;enter&rdquo; to Search', '__x__' ); ?></label>
	      <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
	    </form>
	  </div>
	</div>
</div>

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

#5

Thanks RueNel, but that does not work either - nothing happens on click - I tried replacing href=“http://dev-palmspringslife.pantheonsite.io” and leaving it as you provided - No Luck - Todd

#6

Hello There,

Sorry if it did not work out. I have tested this in my local testing server and have no problem with it. Anyway, to resolve this, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

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

});

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

#7

Getting there - that worked - how do I add text to the overlay - “Type and Press “Enter” to Search”
Currently show no text - http://dev-palmspringslife.pantheonsite.io/ from sidebar widget search.

Thanks- Todd

#8

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit GLOBAL Javascript

jQuery(document).ready(function($){
	$('.textwidget #searchform label').html('Type and Press "Enter" to Search')
});

Let us know how this goes!

#9

Perfect - Thanks- All is Good -= Todd

#10

toddfmay
21m

Spoke to early - when I do a search there are no results?

Regular search string (working) http://dev-palmspringslife.pantheonsite.io/?s=linda

New Overlay search string (bad) http://dev-palmspringslife.pantheonsite.io/<?s=linda !! note < before ? in hexadecimal code

#12

Hi Todd,

Look for this part:
action="<?php echo esc_url( home_url( '/' ) ); ?>"
That is a php and will not work if you add it as part of html. Replace that with your URL instead. Like below
action="http://dev-palmspringslife.pantheonsite.io/"

Please try again after that.

#13

Perfect Lely that did it - Thanks Todd

#14

You’re welcome, Todd.