ক্রস ব্রাউজার উইন্ডো পুনরায় আকার ইভেন্ট - জাভাস্ক্রিপ্ট / jQuery

Question

ফায়ারফক্স, ওয়েবকিট এবং ইন্টারনেট এক্সপ্লোরারে কাজ করে এমন উইন্ডো রিসাইজ ইভেন্টে আলতো চাপার সঠিক (আধুনিক) পদ্ধতিটি কী ?

এবং আপনি উভয় স্ক্রোলবার চালু / বন্ধ করতে পারেন?

Comments

আমি এটিও খতিয়ে দেখছি। আমি এখানে প্রদত্ত সমাধানগুলি প্রয়োগ করার চেষ্টা করতে চাই তবে আমি ভয় করি যে আমি বাক্য গঠনটি বুঝতে পারি না: $ (উইন্ডো)। এটি কি jquery নির্দিষ্ট কিছু?

— বাইফ

বাইফ, হ্যাঁ, $ (উইন্ডো) একটি jQuery কনস্ট্রাক্ট। উইন্ডো.ন্রেসাইজ কাঁচা জাভাস্ক্রিপ্টের সমতুল্য।

— অ্যান্ড্রু হেজেস

এই ডেমোটি যে কোনও ব্রাউজারে jsfiddle.net/sbodhghulaxe/bHQV5/2

— সুবোধ গোলাপে

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…

— ডিলান ভ্যালাদে 25'16

মোবাইলে অপেরাতে এটি প্রতিবারের শীর্ষ বারে (ব্রাউজার ইউআই) প্রদর্শিত / লুকিয়ে থাকা শুরু করে।

— psur 4:58

Answer 1

jQuery এর জন্য একটি অন্তর্নির্মিত পদ্ধতি রয়েছে :

$(window).resize(function () { /* do something */ });

UI 'তে সংবেদনশীলতা অনুরোধে, আপনি একটি setTimeout ব্যবহার করে যা নিম্নলিখিত উদাহরণে দেখানো দ্বারা অনুপ্রাণিত, শুধুমাত্র মিলিসেকেন্ড কিছু নম্বরের পরে আপনার কোড ডাকতে বিবেচনা করতে পারেন এই :

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Comments

উইন্ডোটি বোতামের সাহায্যে পূর্ণ স্ক্রিনে প্রসারিত করা হয় কেন এই ইভেন্টটি বরখাস্ত করা হয় না?

— সেয়ানা

@ স্লি আমার জন্য এটি ম্যাকের সাফারি, ক্রোম এবং মজিলায় কাজ করে। আপনি কোন ব্রাউজার ব্যবহার করেন?

— মার্ক গুরুত্বপূর্ণ

@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })

— জ্যাক Zatkin-গোল্ড

এলিয়াহ, এটি জাভাস্ক্রিপ্ট। আপনি যা লিখেছেন তা সঠিক নয় (আপনি যখন নতুন দিয়ে নির্মাণ করছেন তখন একটি নির্দিষ্ট কেস বাদে)।

— ইয়াহ সুজুকি

এটি উল্লেখ করার মতো যে এই jQuery ফাংশনটি উইন্ডো রাইজাইজে কল করা উচিত ফাংশনগুলির বর্তমান তালিকায় একটি ফাংশন কল "যুক্ত" করে। এটি বর্তমানে উইন্ডোর আকারে নির্ধারিত ইভেন্টগুলিকে ওভাররাইট করে না।

— আরটিএফ 26'15

Answer 2

$(window).bind('resize', function () { 

    alert('resize');

});

Comments

আমি বাঁধাই পদ্ধতির পছন্দ করি, যেহেতু পুনরায় আকার () পদ্ধতিটি আসলে সম্পূর্ণ বাঁধাই পদ্ধতির জন্য একটি শর্টকাট এবং আমি প্রায়শই দেখতে পাই যে একটি উপাদানের কাছে সাধারণত আমার একাধিক ইভেন্ট হ্যান্ডলার প্রয়োগ করা উচিত ।

— মাইক Kormendy

@ মাইক - কেবলমাত্র তা নয়, তবে আমি অনুমান করছি যে আপনি যদি শ্রোতাকে সরাতে চান সে ক্ষেত্রে পুনরায় আকারের পদ্ধতিটির কোনও "আনবাইন্ড" পদ্ধতি নেই। "বাঁধাই" অবশ্যই যাওয়ার উপায়!

— শেন

Answer 3

পুনরায় আকারের ইভেন্টটিতে আলতো চাপার নন j jQuery উপায় এখানে:

window.addEventListener('resize', function(event){
  // do stuff here
});

এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে। এটি আপনার জন্য কিছু গণ্ডগোল করে না । কর্মক্ষেত্রে এটির উদাহরণ এখানে ।

Comments

এই সমাধানটি আইই তে কাজ করবে না। আই ডম এর সমর্থন সহ স্থির সংস্করণ: স্ট্যাকওভারফ্লো

— সের্গেই

> এটি আপনার জন্য কিছু গণ্ডগোল করে না। আপনি দয়া করে বিস্তারিত বলতে পারেন? এটি / কি গলা ফেলা উচিত? এটি কি পর পর বহু বার গুলি চালানো ইভেন্টের সাথে সম্পর্কিত?

— জোসিনালভো

@ জোসিনালভো সাধারণত যখন আপনি এমন কোনও ইভেন্ট শুনছেন যা প্রচুর পরিমাণে আগুন জ্বলতে থাকে তখন আপনি এটি উদ্বোধন করতে চান (যেমন লোডাশ) যাতে আপনি আপনার প্রোগ্রামে কোনও বাধা সৃষ্টি না করেন।

— Jondlm

Answer 4

একটি পুরানো থ্রেড আনার জন্য দুঃখিত, তবে কেউ যদি jQuery ব্যবহার করতে না চান তবে আপনি এটি ব্যবহার করতে পারেন:

function foo(){....};
window.onresize=foo;

Comments

কেবল সচেতন থাকুন যে এটি উইন্ডো.ন্রেসাইজের সাথে আবদ্ধ হতে পারে এমন যে কোনও বিদ্যমান হ্যান্ডলারকে আটকে দেবে। যদি আপনার স্ক্রিপ্টটিতে অন্য স্ক্রিপ্টগুলির সাথে একটি বাস্তুসংস্থান থাকতে হয়, তবে আপনার স্ক্রিপ্টটি উইন্ডো রাইজাইজে কিছু করতে চান বলে মনে করা উচিত নয়। আপনি যদি jQuery এর মতো কাঠামো ব্যবহার করতে না পারেন তবে আপনার অন্তত বিদ্যমান উইন্ডোটি আঁকতে হবে on অনারাইজ করা এবং আপনার হ্যান্ডলারটি সম্পূর্ণ ক্লোবারিংয়ের পরিবর্তে এর শেষের দিকে যুক্ত করা উচিত।

— টম অ্যাগার

@ টমএগার "আপনার অন্তত বিদ্যমান উইন্ডোটি ধরার কথা বিবেচনা করা উচিত res অনারাইজ করা এবং এটির শেষে আপনার হ্যান্ডলারটি যুক্ত করা" - আপনি সম্ভবত বিপরীত অর্থ, অর্থাত্ "আপনার হ্যান্ডলারের শেষে উপস্থিত হ্যান্ডলারকে কল করা"? আমি সত্যিই একটি জাভাস্ক্রিপ্ট কোড দেখতে চাই যা ইতিমধ্যে বিদ্যমান ফাংশনটির শেষে কিছু যুক্ত করবে :-)

— টিএমএস

আমি আপনার বক্তব্যটি এক অর্থে দেখছি - আপনার নতুন অনারাইজ হ্যান্ডলারের বিদ্যমান অনারাইজটিকে মোড়ানো দরকার needs যাইহোক, এটি অনারাইজডে আসল অনারাইজ হ্যান্ডলার বলার আগে পর্যন্ত আপনি যে ফাংশনটি অনারাইজে যুক্ত করতে চেয়েছিলেন তা কল করতে হবে না। সুতরাং আপনি এখনও নিশ্চিত করতে পারেন যে আপনার নতুন অনারাইজ ফাংশনটি মূল অনারাইজ ফাংশনের পরে কার্যকর হয় যা সম্ভবত বিপরীত থেকে ভাল।

— টম অাগার

Answer 5

যেহেতু আপনি jQuery এর জন্য উন্মুক্ত, এই প্লাগইনটি কৌশলটি মনে হচ্ছে।

Answer 6

JQuery 1.9.1 ব্যবহার করে আমি সবেমাত্র জানতে পেরেছিলাম, যদিও প্রযুক্তিগতভাবে অভিন্ন) *, এটি IE10 তে কাজ করেনি (তবে ফায়ারফক্সে):

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

এটি উভয় ব্রাউজারে কাজ করার সময়:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

সম্পাদনা:
) * আসলে না টেকনিক্যালি, অভিন্ন যেমন সুপরিচিত এবং মন্তব্য ব্যাখ্যা WraithKenny এবং হেনরি Blyth, ।

Comments

দুটি পরিবর্তন আছে। কোনটির প্রভাব ছিল? ( বেনামে ফাংশনটি যোগ .resize()করতে .bind('resize')বা যোগ করার জন্য? আমি ভাবছি এটিই দ্বিতীয়।)

— WraithKenny

@ ব্র্যাথকেনি ভাল পয়েন্ট এটি খুব ভাল হতে পারে যে বেনামে ফাংশন যুক্ত করাই এটি কাজ করেছিল। আমি চেষ্টা করেছিলাম কিনা মনে নেই।

— বাসিম

প্রথম ক্ষেত্রে, adjustSizeপদ্ধতিটি তার প্রসঙ্গটি হারিয়ে ফেলেছে this, যেখানে দ্বিতীয় কলটি CmsContent.adjustSize()সংরক্ষণ করে this, অর্থাৎ this === CmsContent। যদি পদ্ধতিতে CmsContentউদাহরণটি প্রয়োজন হয় adjustSize, তবে প্রথম ক্ষেত্রেটি ব্যর্থ হবে। দ্বিতীয় কেস প্রতিটি ধরণের ফাংশন কলের জন্য কাজ করবে, সুতরাং এটি সর্বদা একটি বেনাম ফাংশনটি পাস করার পরামর্শ দেওয়া হয়।

— হেনরি ব্লাইথ

@ হেনরিব্লাইথ আপনাকে ধন্যবাদ! +1

— বাসিম

Answer 7

jQueryউপলব্ধ $(window).resize()ডিফল্টরূপে ফাংশন:

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script> 

Answer 8

আমি jQuery প্লাগইন "jQuery আকার পরিবর্তন ইভেন্ট" এর জন্য সেরা সমাধান হিসাবে বিবেচনা করি কারণ ইভেন্টটি থ্রোটলিংয়ের যত্ন নেওয়া হয় যাতে এটি সমস্ত ব্রাউজারে একই কাজ করে। এটি এন্ড্রুজের উত্তরের মতো তবে আপনি নির্দিষ্ট উপাদান / নির্বাচকদের পাশাপাশি পুরো উইন্ডোর আকার পরিবর্তন করতে পারেন better এটি পরিষ্কার কোড লিখতে নতুন সম্ভাবনা খুলেছে।

প্লাগইন এখানে উপলব্ধ

যদি আপনি প্রচুর শ্রোতা যুক্ত করেন তবে কার্য সম্পাদনের সমস্যা রয়েছে তবে বেশিরভাগ ব্যবহারের ক্ষেত্রে এটি নিখুঁত।

Answer 9

আমি মনে করি এটিতে আপনার আরও নিয়ন্ত্রণ যুক্ত করা উচিত:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }

Answer 10

আশা করি এটি jQuery এ সহায়তা করবে

কোনও ফাংশন প্রথমে সংজ্ঞায়িত করুন, যদি কোনও বিদ্যমান ফাংশন থাকে পরবর্তী পদক্ষেপে যান।

 function someFun() {
 //use your code
 }

ব্রাউজারের পুনরায় আকারের ব্যবহার এর মতো।

 $(window).on('resize', function () {
    someFun();  //call your function.
 });

Answer 11

উইন্ডো রাইজাইজ ফাংশনগুলির উল্লেখ করা ছাড়াও এটি বোঝা গুরুত্বপূর্ণ যে পুনরায় আকারের ইভেন্টগুলি ইভেন্টগুলিকে ডিবাউস না করে ব্যবহার করা হলে প্রচুর অগ্নিকাণ্ড ঘটে।

পল আইরিশ একটি দুর্দান্ত ফাংশন রয়েছে যা পুনরায় আকারকে কল করে একটি দুর্দান্ত ডিল করে। ব্যবহার করার জন্য খুব প্রস্তাবিত। ক্রস ব্রাউজারে কাজ করে। অন্য দিন এটি আইই 8 তে পরীক্ষা করেছে এবং সব ঠিক আছে।

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

পার্থক্যটি দেখতে ডেমোটি পরীক্ষা করে দেখুন Make

এখানে পূর্ণতা জন্য ফাংশন।

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