জাভাস্ক্রিপ্ট ব্যবহার করে যখন একটি উইন্ডো পুনরায় আকার দেওয়া হয় তা সনাক্ত করুন?

Question

ব্যবহারকারী যখন ব্রাউজার উইন্ডোটিকে পুনরায় আকার দেওয়া শেষ করে তখন কোনও ফাংশন ট্রিগার করার জন্য jQuery বা জাভাস্ক্রিপ্টের কোনও উপায় আছে?

অন্য পদে:

1. যখন ব্যবহারকারী ব্রাউজার উইন্ডোটির আকার পরিবর্তন করছে তখন আমি কি মাউস আপ ইভেন্টটি সনাক্ত করতে পারি? অন্যথায়:
2. উইন্ডো রাইজাইজ অপারেশন শেষ হয়ে গেলে আমি কি সনাক্ত করতে পারি?

আমি বর্তমানে কেবল ইভেন্টটি ট্রিগার করতে সক্ষম হয়েছি যখন ব্যবহারকারী jQuery দিয়ে উইন্ডোটির আকার পরিবর্তন করতে শুরু করে

Comments

এখানে একটি jQuery এবং নন-jQuery সমাধান রয়েছে: github.com/louisremi/jquery-smartresize

— ব্র্যাডেট

jquery- স্মার্টরেসাইজ উত্সাহিত ইভেন্টের জন্য সুন্দর সমাধান!

— তেত্রি

@ ব্র্যাডটি যখন ভ্যানিলা জাভাস্ক্রিপ্টে খুব সহজেই এটি করা যায় তখন jQuery প্লাগইন ব্যবহার করার দরকার নেই

— জেমস ডগলাস

Answer 1

আপনি .resize()প্রতিটি বার প্রস্থ / উচ্চতা আসলে পরিবর্তিত পেতে এটি ব্যবহার করতে পারেন :

$(window).resize(function() {
  //resize just happened, pixels changed
});

আপনি এখানে একটি কার্যকারী ডেমো দেখতে পারেন , এটি নতুন উচ্চতা / প্রস্থের মান নেয় এবং আপনাকে দেখার জন্য এটি পৃষ্ঠায় আপডেট করে। মনে রাখবেন ইভেন্টটি সত্যই শুরু হয় না বা শেষ হয় না , যখন আকার পরিবর্তন ঘটে তখন ঠিক "ঘটে" ... অন্যটি ঘটবে না বলার মতো কিছুই নেই।

---

সম্পাদনা: মন্তব্য করে মনে হচ্ছে আপনি একটি "অন-এন্ড" ইভেন্টের মতো কিছু চান, আপনি যে সমাধানটি পেয়েছেন সেটি কিছু ব্যাতিক্রমে (আপনি একটি মাউস-আপ এবং ক্রস-ব্রাউজার উপায়ে একটি বিরতিতে পার্থক্য করতে পারবেন না, একটি জন্য একই শেষ একটি বনাম বিরতি )। এটিকে কিছুটা পরিষ্কার করার জন্য আপনি যদিও এই ইভেন্টটি তৈরি করতে পারেন :

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

আপনার যে কোনও জায়গায় এটি বেস ফাইল হতে পারে, আপনি যা কিছু করতে চান ... তারপরে আপনি সেই নতুন resizeEndইভেন্টটির সাথে বাঁধতে পারেন যা আপনি ট্রিগার করছেন, এর মতো:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

আপনি এখানে এই পদ্ধতির ওয়ার্কিং ডেমো দেখতে পারেন

Comments

এটি ব্রাউজারের উপর নির্ভর করে, কখন এবং কতগুলি আকার পুনরায় আকারের

— ক্রিস লারচার

@ ক্রিস_ল: আমি নিশ্চিত না যে পৃষ্ঠাটি আর কতটা সঠিক ... আমি সর্বশেষতম ফায়ারফক্সে পোস্ট করা ডেমোটি খুলুন, প্রতিবারের আকারের পরিবর্তনের পরে এটি এটি ফায়ার করছে। আমার কাছে পরীক্ষার জন্য অপেরা নেই, এটি এখনও অন্যরকম হতে পারে, তবে তারা কমপক্ষে মদদের পরামর্শের চেয়ে কমপক্ষে আরও সামঞ্জস্যপূর্ণ, আমি তাদের আপডেট করার জন্য একটি নোট পাঠাব।

— নিক ক্র্যাভার

@ নিক: হ্যাঁ, মাতাল পাতাটি কেবল 3.1 বি 2 অবধি এফএফকে কভার করে - তবে এই ধরণের শো, এটি ব্রাউজারের উপর নির্ভর করে ...

— ক্রিস লারচার

আমি কেবল বাদ দিতে চাই এবং বলি যে ব্যবহারকারী যখন মোবাইল ডিভাইসে পৃষ্ঠাতে জুম করে তখন এটিও ট্রিগার হয়।

— হফম্যান

window.addEventListener ('আকার পরিবর্তন', ফাংশন () {}, সত্য);

— ওয়েবওয়ান্ডার

Answer 2

এই সঙ্গে অর্জন করা যেতে পারে onresize GlobalEventHandlers ইন্টারফেসের সম্পত্তি জাভাস্ক্রিপ্ট মধ্যে, এর একটি ফাংশন বরাদ্দ করে onresize সম্পত্তি, যেমন:

window.onresize = functionRef;

নীচের কোড স্নিপেট এটি প্রদর্শন করে, যখনই পুনরায় আকার দেওয়া হয় উইন্ডোর অভ্যন্তরীণ প্রশস্ততা এবং অভ্যন্তরীণ উচ্চতা কনসোল দিয়ে। (উইন্ডোটি পুনরায় আকার দেওয়ার পরে পুনরায় আকারের ইভেন্টটি জ্বলে ওঠে)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Answer 3

কেবল জাভাস্ক্রিপ্ট ব্যবহার করে এটি করার আর একটি উপায় হ'ল:

window.addEventListener('resize', functionName);

এটি অন্যান্য উত্তরের মতো প্রতিবারই আকার পরিবর্তন করে fire

functionName উইন্ডোটি পুনরায় আকার দেওয়ার সময় কার্যকর করা ফাংশনের নাম (শেষের বন্ধনীগুলি প্রয়োজন হয় না)।

Answer 4

ভ্যানিলা জেএস-এ, আপনি যদি কেবল স্ক্রোলটি শেষ হয় তা পরীক্ষা করতে চান তবে আপনি এই জাতীয় সমাধান নিয়ে আসতে পারেন:

সুপার সুপার কমপ্যাক্ট

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

সমস্ত 3 সম্ভাব্য সমন্বয় একসাথে (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}