仮想キーボードとサイズ変更イベント

Question

1-検索アイコンをクリックすると、ドロップダウン検索が表示されます。任意のモバイルまたはタブで

// Open/Close Search Form and focus in input search field. THIS IS ON DOM READY ! 
$('.search-trigger').click(function() { 
    $(this).find('i').toggleClass('icon-close', 'icon-search'); 
    $('.search-dropdown').animate({ 
     height: 'toggle', 
     opacity: 'toggle' 
    }); 
    $('.search-dropdown .search-field').focus(); 
}); 

2 - 、アイコンをクリックすると、$('.search-dropdown .search-field')がフォーカスされていると$(window)/$(document)の高さがが変更されますので、仮想キーボードがポップアップします。

、3- ISSUE：

A-私は（ユーザーがモバイルやタブの向きを変更したとき）リサイズ上のドロップダウン検索を閉じたい場合は、私は単純に次の操作を行うことができます：

$(window).on('resize', function() { // THE DOM IS READY 
    $('.search-trigger .icon-search').removeClass('icon-close'); 
    $('.search-dropdown').hide(); 
}); 

しかし、私は、ユーザーがアイコンをクリックすると、高さがを変更しますことを知っているので、私は行うことはできませんA-ドロップダウン検索が1秒間表示されてから閉じることができるためです。

B-ので、ドロップダウン検索は私が行うことができます表示されることを保証するために、以下：

// THE DOM IS READY. 
var originalWidth = $(window).width(); 

//CHECK IF THE DROPDOWN SEARCH IS OPENED. 
if ($('.icon-close').is(":visible")) { 
    $(window).on('resize', function() { 

     var newHeight = $(window).height(); 
     if ($(window).height() === newHeight) { 
      $('.search-trigger .icon-search').addClass('icon-close'); 
      $('.search-dropdown').show(); 
     } 

     if ($(window).width() !== originalWidth) { 
      $('.icon-search').removeClass('icon-close'); 
      $('.search-dropdown').hide(); 
     } 
    }); 
} 

今すぐに動作するコードは、ドロップダウン検索が動作すると、ユーザが向きを変える場合ドロップダウンが閉じられます。 BUT幅がもはや元のものと同じではなく（ユーザーが方向を変更したため）、検索アイコンがクリックされた場合、ドロップダウン検索が1秒間表示されてから閉じることができます。

だから、あなたが見ることができるように、それはトリッキーだと私は
は、私は多くのことを検索したと私はいくつかの助け:)事前に

ありがとうを取得することは時間だ...バリエーションの多くを試してみましたあなたの助けと提案:)

Answer 1

ベローは、完全なコードは、これは同様の問題で他の誰かを助けることができる

/* 
* Before opening the Header Search Form, 
* do not waste time by creating jQuery object from window multiple times. 
* Do it just once and store it in a variable. 
* This is done to take care of the performance. 
*/ 
var $window = $(window); 
var originalHeight = $(window).height(); 
var originalWidth = $(window).width(); 
//3. Open/Close Header Search Form 
$('.search-trigger').click(function() { 
    $(this).find('i').toggleClass('icon-close'); 
    $('.search-dropdown').animate({ 
     height: 'toggle', 
     opacity: 'toggle' 
    }); 
    // Reset the initial state of the search icon and dropdown 
    // Since the height will change when the virtual keybord becomes visible, 
    // I don't need to put it inside the resize event and double check it ! 
    if ($('.icon-close').is(':visible')) { 
     if ($window.height() !== originalHeight) { 
      $(this).find('i').addClass('icon-close'); 
      $('.search-dropdown').show(); 
     } 
     $window.resize(function() { 
      /* 
      * Do not calculate the new window width twice. 
      * Do it just once and store it in a variable. 
      */ 
      var newWidth = $window.width(); 
      // Do the comparison 
      if (originalWidth !== newWidth) { 
       // Execute the code 
       $('.search-trigger .icon-search').removeClass('icon-close'); 
       $('.search-dropdown').hide(); 
       // Reset the width 
       // This is the tricky part that I was misssing :(
       originalWidth = newWidth; 
      } 
     }); 
    } 
    // Focus in input search field 
    $('.search-dropdown .search-field').focus(); 
}); 
// Reset Search Input Value to Search...  
$('input.search-field').val(''); 

希望を説明しています。
SYA :)