Resize Input Triggers Window

I have a headline with a logo, menu and search. When Iโ€™m on the desktop, I have all the elements shown in this order, but if my window width is less than 980 pixels, the menu is hidden (a switch is obtained), and the logo is separated from navand attached after the logo. If the width is larger, the logo detaches again and attaches to the old location in the DOM.

    $(window).on('resize', function() {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
    });
#logo {
  display: block;
  margin: 10px auto 15px;
  text-align: center;
}
#search-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 10px;
}
#search-container .header_search {
  display: inline-block;
  line-height: 6px;
}
#search-container input {
  border: 0;
  background-color: transparent;
  font-style: italic;
  color: rgb(114, 114, 114);
  color: rgba(114, 114, 114, 0.5);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
}
#search-container input:active,
#search-container input:focus {
  outline: none;
  border: 0;
}
#search-container .submit {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
}
#search-container .submit i {
  color: #d3031c;
  font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>

<div class="menu_wrapper">
  <nav>
    <ul id="main_menu" class="">
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
    <div id="search-container" class="search-box-wrapper hide">
      <div class="header_search">
        <form name="search" id="search" method="get" action="#">
          <input name="s" type="text" placeholder="Search" value="Search">
          <a class="submit"><i class="fa fa-search"></i></a>
        </form>
      </div>
    </div>
  </nav>
</div>
Run codeHide result

( , Android), , resize , . , . jquery , .

? -, .

+4
3

, ( ), :

$('#search-container') click:

$('#search-container').on('click', function(){
    $(window).off('resize');
});

( ), android:)

+2

, . -, resize , : https://www.quirksmode.org/dom/events/resize_mobile.html.

, , ..

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if( $(document.activeElement).prop('type') !== 'text') {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
   } 
}
+1

, , . , . , , , , .

, , . , , , , .

var isClicked = false;    
function resize(){  
  if(isClicked){
      $('#search-input').focus().select();      
  }else{
    //resize logic
  } 
}
document.addEventListener("DOMContentLoaded", function(event) { 
    $('#search-input').click(function(){
        isClicked = true;
    }); 
    resize();   
});
0

Source: https://habr.com/ru/post/1627873/


All Articles