jQuery का आकार परिवर्तन() ब्राउज़र को अधिकतम बटन

Question

का उपयोग कर यह मेरा कोड आग है कि जब भी खिड़की आकार दिया जाता है:

$(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

में यह परीक्षण किया है

धन्यवाद

Answer 1

प्रस्तावित सुधार के लिए संपादित करें:

यहाँ working jsFiddle है और यहाँ results only demo है।

जैसा कि आप देख सकते हैं, मैंने पूरी तरह से आपके मूल jQuery कोड को फिर से पहचाना। मैंने ग्लोबल से सब कुछ हटा दिया और साथ ही कार्यों को बाहर निकाला। .resize() पहले से ही एक फ़ंक्शन की अपेक्षा करता है, इसलिए मैं बस उस फ़ंक्शन के अंदर सबकुछ करता हूं और फिर प्रारंभिक पृष्ठ लोड पर इसे आमंत्रित करने के लिए तत्काल .resize() पर कॉल करता हूं।

एक और परिवर्तन मैंने बनाया अधिकतम संभव चौड़ाई आकार के साथ शुरू, पीछे की ओर अपने लिए लूप को बढ़ाने के लिए किया गया था आप अनुमति देते हैं (5), मेरे रास्ते छोटी संभव चौड़ाई आकार आप अनुमति देने के लिए नीचे काम कर (2)।

इसके अलावा, आपके लूप के अंदर, मैंने j और k वेरिएबल बनाए हैं ताकि उन शर्तों को पढ़ने में आसानी हो सके।

मुख्य परिवर्तन अगर कथन था। यदि हम max_column पुनरावृत्ति पर हैं और कंटेनर की चौड़ाई व्यापक k है, तो हम बोर्ड की चौड़ाई k पर सेट करना चाहते हैं और लूप के लिए बाहर निकलना चाहते हैं, अन्यथा हम आपके द्वारा दिए गए कथन के मूल का मूल्यांकन करते हैं, अन्यथा यदि हम हैं min_column पुनरावृत्ति और कंटेनर की चौड़ाई j से कम है, हम बोर्ड की चौड़ाई j पर सेट करना चाहते हैं।

मैंने क्रोम में इसका परीक्षण किया और यह खूबसूरती से काम करता है। मैं आशान्वित हूं कि इससे आपको सहायता मिलेगी।

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

});​ 

Answer 2

यानी और ओपेरा ट्रिगर कुछ सीमाओं के साथ इस घटना की तरह कुछ ब्राउज़रों, इस प्लगइन मुद्दे को हल कर सकते हैं:

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

Answer 3

मैं एक संवेदनशील साइट जहां हर परिसंपत्ति होगा पर एक समान मुद्दा हो रही थी छवि स्लाइड शो को छोड़कर उचित रूप से आकार बदलें और बदलें। यह केवल आईई में हुआ था, और यह तब हुआ जब आप टैबलेट ब्रेकपॉइंट पर शुरू करेंगे, फिर अधिकतम बटन दबाएं और डेस्कटॉप ब्रेकपॉइंट दर्ज करें।

क्या समस्या पॉल आयरिश से इस आसान कोड का उपयोग कर आकार परिवर्तन ट्रिगर थ्रॉटल था फिक्सिंग समाप्त हो गया:

(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/

आशा जो वहां किसी की मदद करता है।

Answer 4

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

Answer 5

यह भी मेरे लिए hapened और फ्लॉप, पता था कि क्यों जब तक मैं अपनी पोस्ट पढ़ें। ऐसा लगता है कि आप सही थे दबाए जाने से पहले फ़ंक्शन निकाल दिया गया था, इसलिए इसे ठीक करने के लिए मैंने लीटल विलंब का उपयोग किया।

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

Answer 6

निम्नलिखित कोड Chrome और IE11 में मेरे लिए अच्छी तरह से काम करता है: (जावास्क्रिप्ट और 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 घटना, फायरिंग कर रहा हूँ के बाद एक आकार बदलने समाप्त हो गया। खिड़की को अधिकतम करने के बाद यह आकार बदलने का आयोजन फिर से चला रहा है।

Answer 7

निम्न कोड क्रोम और आईई 11: (जावास्क्रिप्ट और 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 घटना, फायरिंग कर रहा हूँ के बाद एक आकार बदलने समाप्त हो गया। खिड़की को अधिकतम करने के बाद यह आकार बदलने का आयोजन फिर से चला रहा है।