16

これは、ウィンドウのサイズが変更されるたびに起動する私のコードです。

$(window).resize(function()
{   
    setDisplayBoardSize();
});

期待どおり、ウィンドウのサイズを変更して関数を正常に実行すると、正常に起動します。

正しく動作しないのに最大化ボタンを押すと。

これはsetDisplayBoardSize（）関数です。

function setDisplayBoardSize()
{
    var width = $(".display_container").width();

    for (i=min_columns; i<=max_columns; i++)
    {
        if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) )
        {
            $("#display_board").css("width",(i*(item_width + gap))+ "px");
        }
    }
}

問題は、ブラウザの最大化ボタンがクリックされると、サイズ変更の前に.display_container幅を取得し、ウィンドウのサイズを最大に変更する関数を起動することです。これは、display_boardのサイズが正しくないことを意味します。

私が正しい場合、ウィンドウのサイズが最大に変更された後、.display_container要素のサイズを取得するにはどうすればよいですか？

ChromeとFirefoxでこれをテストしたことに注意してください

ありがとう

4

7 に答える 7

36

これは私にも起こり、私があなたの投稿を読むまで、その理由を知りませんでした。あなたが正しかったようですが、最大化を押す前に関数が起動されるので、これを修正するために少しの遅延を使用しました。

$(window).resize(function()
{   
setTimeout(function() {
    setDisplayBoardSize();
}, 100);
});

于 2015-04-22T21:41:32.423 に答える
6

画像のスライドショーを除いて、すべてのアセットが適切にサイズ変更およびシフトされるレスポンシブサイトでも同様の問題が発生していました。これはIEでのみ発生し、タブレットブレークポイントから開始して、最大化ボタンを押してデスクトップブレークポイントに入るときにのみ発生しました。

問題を修正することになったのは、PaulIrishのこの便利なコードを使用してサイズ変更トリガーを調整することでした。

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

あなたはそれについての彼の完全な投稿をここで見ることができます（2009年から）：http：//www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

それが誰かを助けてくれることを願っています。

于 2013-06-12T18:04:41.677 に答える
4

提案された修正の編集：

これが動作中のjsFiddle であり、これが結果のみのデモです。

ご覧のとおり、元のjQueryコードを完全にリファクタリングしました。グローバルからすべてを削除し、機能を削除しました。 すでに関数を期待しているので、その1つの関数内ですべてを実行し、最初のページの読み込み時に.resize()すぐに呼び出して呼び出します。.resize()

私が行ったもう1つの変更は、forループを逆方向にインクリメントすることでした。まず、許可する可能な限り広い幅のサイズ（5）から始めて、許可される可能な限り小さい幅のサイズ（2）まで減らしていきます。

また、forループ内で、これらの条件を読みやすくするために変数を作成jしました。k

主な変更はifステートメントでした。max_columnの反復を実行していて、コンテナーの幅が広いk場合は、ボードの幅をforループに設定してk、forループからジャンプします。それ以外の場合は、元のifステートメントを評価します。それ以外の場合は、min_columnの反復を実行します。コンテナの幅が。未満の場合j、ボードの幅をに設定しjます。

私はこれをChromeでテストしましたが、うまく機能します。これがお役に立てば幸いです。

$(document).ready(function()
{    
    $(window).resize(function() 
    {
        var item_width = 200, 
            item_height = 300, 
            gap = 20,
            min_columns = 2, 
            max_columns = 5,
            min_width = min_columns * (item_width + gap), 
            max_width = max_columns * (item_width + gap),
            container_width = $(".display_container").width(),
            $display_board = $("#display_board"),
            $display_board_ol_li = $display_board.find("ol > li");

        //console.log("container width: " + container_width);

        for (var i = max_columns; i >= min_columns; i--)
        {
            var j = i * (item_width + gap),
                k = (i+1) * (item_width + gap);

            //console.log("j: " + j);
            //console.log("k: " + k);
            //console.log("display_board width (before): " + $display_board.css("width"));

            if (i === max_columns && container_width > k) 
            {
                $display_board.css("width", max_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;                
            } 
            else if (container_width > j && container_width < k)
            {
                $display_board.css("width", j + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;
            }
            else if (i === min_columns && container_width < j) 
            {
                $display_board.css("width", min_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
            }
        }

        $display_board_ol_li.css({

            "width" : item_width + "px",
            "height": item_height + "px",
            "margin": gap/2 + "px"

        });

    }).resize();

});​
于 2012-04-16T20:05:43.437 に答える
1

ieやoperaなどの一部のブラウザは、いくつかの制限付きでこのイベントをトリガーします。このプラグインは問題を解決できます。

http://benalman.com/projects/jquery-resize-plugin/

于 2012-04-16T20:15:50.890 に答える
1 
var window_width_check_big = false, // flag true if window bigger than my_width
window_width_check_small = false,   // flag true if window smaller than my_width
my_width = 1221; // Change to your width

function get_window_size() {
    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }   
}

get_window_size();

$(window).resize(function() {

    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }
    if( window_width_check_small && window_width_check_big ) {
        window_width_check_big = false;
        window_width_check_small = false;
        get_window_size();
        // Start function that you need
    }
});
于 2014-10-29T06:13:30.153 に答える
1

次のコードは、ChromeとIE11の両方でうまく機能します：（javascriptとjQuery）。

function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

var mResizeTimer;
function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}

説明：サイズ変更が終了した後、ネイティブのwindow.resizeイベントを発生させています。これにより、ウィンドウの最大化後にサイズ変更イベントが再起動されました。

于 2017-10-03T05:48:18.267 に答える
0

次のコードは、ChromeとIE11の両方でうまく機能します：（javascriptとjQuery）。

var mResizeTimer;
function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}

説明：サイズ変更が終了した後、ネイティブのwindow.resizeイベントを発生させています。これにより、ウィンドウの最大化後にサイズ変更イベントが再起動されました。

于 2017-10-03T05:35:05.303 に答える