Hide Search Form on Page Load And Show Hide Based on Window Width

by ONELIVE Webmaster February 13, 2017

The Problem

The OLM search form hides by using javascript. Since Javascript is the last thing to load the search form displays for a few seconds and then hides once the javascript fires.

The Solution

Set the search-form's style to display:none; Then toggle on and off with Javascript

The Code

search-form.liquid

open search-form.liquid and locate the

field. set the style to display:none;

EXAMPLE OF COMPLETED CODE.

{% if settings.search-placement != 'sidebar' %}
<li><a href="#" class="search-toggle"><!--<i class="fa fa-search"></i>--><img class="icon-nav icon-search" src="{{ 'icon-search.png' | asset_url }}"></a></li>
{% endif %}
<form {% if settings.search-placement != 'sidebar' %}class="search-form navbar-form"{% endif %} style="display: none;" action="/search">
  <div class="input-group">
    <input type="search" name="q" class="form-control search-bar" autocomplete="off" placeholder="{{ 'navigation.search.search-form-placeholder' | t }}" value="{{ search.terms }}">
    <span class="input-group-btn">
      <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
    </span>
  </div>
</form>

SHOW HIDE BASED ON BROWSER WIDTH - THEME.LIQUID

To change if the search-form shows or hides based on browser width Open theme.liquid and add / adjust the following code:

<script>
      //hide or show forms/toggles
      windowResize = function(){
          if($(window).width() >= 767) {
              $( ".search-form" ).show();
              $( ".search-toggle" ).hide();        
          }else{
              $( ".search-form" ).hide();
              $( ".search-toggle" ).show();
          }
          if ($(window).width() < 767) {
            $('li.dropdown>a').attr('data-toggle','dropdown');
          } else {
            $('li.dropdown>a').removeAttr('data-toggle','dropdown');
          }
      };

      //on resize
      $( window ).resize(function() {
          windowResize();
      });

      window.addEventListener("load", function(event) {
          windowResize();
      });

<script>