কীভাবে ডিআইভি'র মাত্রা পরিবর্তিত হবে?

351

আমি নিম্নলিখিত নমুনা এইচটিএমএল করেছি, একটি ডিআইভি রয়েছে যার প্রস্থ 100%। এতে কিছু উপাদান রয়েছে। উইন্ডোজ পুনরায় আকার দেওয়ার সময়, অভ্যন্তরীণ উপাদানগুলি পুনরায় অবস্থান করতে পারে এবং ডিভের মাত্রা পরিবর্তন হতে পারে। আমি জিজ্ঞাসা করছি ডিভের মাত্রা পরিবর্তনের ইভেন্টটি হুক করা সম্ভব কিনা? এবং কীভাবে করব? আমি কলব্যাক ফাংশনটি বর্তমানে ডিআইভিতে জিকুয়েরি পুনরায় আকারের ইভেন্টটিতে আবদ্ধ করি, তবে কোনও কনসোল লগ আউটপুট করা হয়নি, নীচে দেখুন:

পুনরায় আকার দেওয়ার আগে এখানে চিত্র বর্ণনা লিখুন

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>
javascript  jquery  html 
— উইলিয়াম চোই
সূত্র
7
এটি কাজ করবে না কারণ, আপনি পুনরায় আকারের ইভেন্টটিকে নির্দিষ্ট ডিভ উপাদানগুলিতে বাধ্য করছেন। তবে আকার পরিবর্তন ইভেন্ট আপনার উপাদানের জন্য নয় উইন্ডোটির জন্য ট্রিগার করবে।
— ফাতিহ এসেট
আপনি setIntervalএখানে সম্ভাব্য সমাধান হিসাবে ব্যবহার করতে পারেন । clearIntervalআপনার কাজ শেষ হয়ে গেলে লুপটি থামাতে আপনি সর্বদা একটি বোতাম ক্লিকের সাথে আবদ্ধ করতে পারেন ।
— পিটার ডারমিস
1
2020 সাল থেকে, রেজাইজঅবার্সার IE বাদে সমস্ত বড় ব্রাউজারগুলিতে (ক্রোম, সাফারি, ফায়ারফক্স, এজ) কাজ করে। caniuse.com/#feat=resizeobserver
— ড্যান

উত্তর:

263

কোনও উপাদানটির আকার পরিবর্তন করা হয়েছে কিনা তা নির্ধারণ করার জন্য খুব দক্ষ পদ্ধতি রয়েছে।

http://marcj.github.io/css-element-queries/

এই লাইব্রেরিতে একটি শ্রেণি রয়েছে ResizeSensorযা পুনরায় আকার সনাক্তকরণের জন্য ব্যবহার করা যেতে পারে।
এটি ইভেন্ট-ভিত্তিক পদ্ধতির ব্যবহার করে, সুতরাং এটি দ্রুত চালিত হয় এবং সিপিইউ সময় নষ্ট করে না।

উদাহরণ:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

পরিবর্তনগুলি যাচাই করতে দয়া করে jQuery অনারসাইজ প্লাগইনটি ব্যবহার করবেন না কারণ এটি লুপে ডিওএম / বৈশিষ্ট্যগুলি setTimeout()পড়ার সংমিশ্রণে ব্যবহার করে । এটি অবিশ্বাস্য ধীর এবং ত্রুটিযুক্ত কারণ এটি লেআউটটি ছিন্ন করার কারণ করে ।clientHeightclientWidth

প্রকাশ: আমি সরাসরি এই লাইব্রেরির সাথে যুক্ত আছি।

— মার্ক জে শমিট
সূত্র
8
@ জেক, আইই ১১ সমর্থন এখন বাস্তবায়িত হয়েছে।
— মার্ক জে শমিট
15
@ আলেথিয়াসগুলি আপনার নিবিড় নজর দেওয়া উচিত অনুরোধএনিমেশনফ্রেমটি ধীর মাত্রা সনাক্তকরণের জন্য নয় ঠিক ঠিক বিপরীত: এটি সিপিইউর সময় বাঁচানোর জন্য আসল ইভেন্ট ভিত্তিক রিসাইজ সেন্সর দ্বারা চালিত সমস্ত চরম সংখ্যার ইভেন্টগুলিকে কমিয়ে দেয়। Github.com/marcj/css-element-queries/blob/master/src/…-
— মার্ক জে শ্মিট
6
@ আলেথিয়াস আমি অনুমান করি আপনি একটি বিষয় মিস করেছেন: সেটটাইমআউটটি কেবলমাত্র ভুল নয়, নরক হিসাবেও ধীর। একটি অনুরোধঅ্যানিমেশনফ্রেম যা সাধারণ বুলিয়ান পরীক্ষা করে তা হ'ল একটি সেটটাইমআউটের চেয়ে দ্রুতগতির অর্ডার যা ডিওএম বৈশিষ্ট্যের বিপরীতে সমস্ত সময় পরীক্ষা করে থাকে। সেটটাইমআউটটির পাশাপাশি প্রতি কয়েক মিলিসেকেন্ডও বলা হয়।
— মার্ক জে
9
@ ওরিওলোফিল আপনি অবশ্যই কিছুই বুঝতে পারেন নি। উত্তরগুলি কীভাবে অভ্যন্তরীণভাবে কাজ করে সে সম্পর্কে আপনার কোনও ধারণা নেই যেখানে ডাউনবোটিং বন্ধ করুন। আবার: সিএসএস-এলিমেন্ট-ক্যোয়ারী: আসল পুনরায় আকারের ইভেন্টটি ব্যবহার করে যা প্রতিটি সময় মাত্রা পরিবর্তনের জন্য ট্রিগার হয়। যেহেতু আপনি অনেকগুলি ইভেন্ট পেয়েছেন (উদাহরণস্বরূপ ড্রাগ'আরড্রপ জন্য) এতে অনুরোধটি এনিমেশন ফ্রেম চেক করে সেই ট্রিগারযুক্ত ইভেন্টগুলি 1 / ফ্রেমে নামিয়ে আনার জন্য একটি সাধারণ বুলিয়ান ভেরিয়েবলের জন্য পরীক্ষা করা হয়েছে। jquery প্লাগইন: সমস্ত সময় ডোম লেআউট প্রপস (ক্লায়েন্টহাইট ইত্যাদি) যাচাই করে একটি সেটটাইমআউট ব্যবহার করে যেখানে প্রতিটি চেক খুব ধীর হয় তবে একই কার্যকারিতা থাকতে প্রায়শই চেক করা প্রয়োজন।
— মার্ক জে শমিট
9
@ আলেথিয়াস, @ ওরিওলোফিল এবং যে কেউ তাদের দ্বারা বিভ্রান্ত হয়েছে: requestAnimationFrameবনাম setTimeoutঅপ্রাসঙ্গিক, এই গ্রন্থাগারটি লুপ হয় না । requestAnimationFrameআপনার কলব্যাকগুলি কল করার ফ্রিকোয়েন্সি কেবল ডাবনো / থ্রটল করতে ব্যবহৃত হয়, এটি পোল করে না । মিউটেশনউসারভার তাত্ত্বিকভাবে অনুরূপ প্রভাবের জন্য ব্যবহৃত হতে পারে তবে পুরানো ব্রাউজারগুলিতে নয়, এটি ভিন্ন। এটি অসামান্য চালাক।
— হান সিওল-ওহ
250

এর জন্য একটি নতুন স্ট্যান্ডার্ড হ'ল ক্রোম 64 এ উপলব্ধ রিসাইজ পর্যবেক্ষক এপিআই।

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>
স্নিপেট প্রসারিত করুন

পর্যবেক্ষকের আকার পরিবর্তন করুন

স্পেস: https://wicg.github.io/ResizeObserver

পলিফিলস: https://github.com/WICG/ResizeObserver/issues/3

ফায়ারফক্স ইস্যু: https://bugzil.la/1272409

সাফারি ইস্যু: http://wkb.ug/157743

বর্তমান সমর্থন: http://caniuse.com/#feat=resizeobserver

— ড্যানিয়েল হার
সূত্র
3
উত্পাদন সাইটগুলির জন্য এখনও কার্যকর নয়, যেহেতু এই মুহুর্তে কেবল ক্রোম এটিকে সমর্থন করে। তবে অবশ্যই এখানে সেরা সমাধান! বিটিডব্লিউ, এখানে বাস্তবায়নের স্থিতির একটি দ্রুত ওভারভিউ রয়েছে: chromestatus.com/feature/5705346022637568
— ফিলিপ
8
@ ফিলিপ্প একটি পলফিল আছে
— ড্যানিয়েল হের
2
মনে হচ্ছে এটি এখনও সমস্ত ব্রাউজারে পরীক্ষামূলক বৈশিষ্ট্য caniuse.com/#feat=resizeobserver
— ফ্রান্সেস্ক রোজাস
5
এই উত্তরের 2 বছর পরেও, ব্রাউজার সমর্থনটি নির্লজ্জ
— স্ক্রিমোথি
2
সর্বশেষতম ক্রোম এবং এফএফ একটি কবজ মত কাজ করে।
— Klemen Tušar
32

আপনাকে resizeইভেন্টটি বাঁধতে হবেwindow জেনেরিক এইচটিএমএল উপাদান নয়, বস্তুকে করতে হবে।

তারপরে আপনি এটি ব্যবহার করতে পারেন:

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

এবং কলব্যাক ফাংশনের মধ্যেই আপনি আপনার divকলিংয়ের নতুন প্রস্থ পরীক্ষা করতে পারেন

$('.a-selector').width();

সুতরাং, আপনার প্রশ্নের উত্তর হ'ল না , আপনি resizeইভেন্টটিকে একটি ডিভের সাথে আবদ্ধ করতে পারবেন না ।

— আলেসান্দ্রো ভেন্ড্রুস্কোলো
সূত্র
123
এই উত্তর যথেষ্ট ভাল না। আকারের পরিবর্তনগুলি কোনও উইন্ডোর আকার পরিবর্তন ছাড়াই ঘটতে পারে। মোটেই
— vsync
9
উদাহরণস্বরূপ যখন আপনার মধ্যে বিভাজন উপাদান রয়েছে বা কেবল কোনও উপাদানের সাথে কিছু পাঠ্য বা অন্যান্য সামগ্রী যুক্ত করুন।
— গন্টার জ্যাচবাউয়ার
@ সত্য নয়, আপনি জাভাস্ক্রিপ্টের মাধ্যমে উদাহরণস্বরূপ ডিওএম সংশোধন করতে পারেন যার ফলে সিএসএসের নতুন কাঠামোর ক্ষেত্রে ফলস্বরূপ বিভিন্ন লেআউট - প্রতিটি ধারক আকারের ফলস্বরূপ প্রযোজ্য।
— আন্তোনিওসেস
29

দীর্ঘমেয়াদী, আপনি পুনরায় আকারের ব্যবহারকারী ব্যবহার করতে সক্ষম হবেন ।

new ResizeObserver(callback).observe(element);

দুর্ভাগ্যক্রমে এটি বর্তমানে অনেকগুলি ব্রাউজারে ডিফল্টরূপে সমর্থিত নয়।

গড় সময়ে, আপনি নিম্নলিখিত মত ফাংশন ব্যবহার করতে পারেন যেহেতু, বেশিরভাগ উপাদান আকারের পরিবর্তনগুলি উইন্ডোটি পুনরায় আকার দেওয়ার বা ডিওএম-এ কিছু পরিবর্তন করে আসবে। আপনি উইন্ডোর সঙ্গে মাপ জানালা শুনতে পারেন পুনরায় আকার দেওয়ার ঘটনা এবং DOM ব্যবহার পরিবর্তনগুলি আপনি শুনতে পারেন MutationObserver ।

এখানে এমন কোনও ফাংশনের উদাহরণ রয়েছে যা সরবরাহের উপাদানগুলির আকার যখন এই ইভেন্টগুলির কোনওর ফলে পরিবর্তিত হয় তখন আপনাকে আবার কল করবে:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window's size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};
— nkron
সূত্র
1
দুর্ভাগ্যক্রমে, মনে হচ্ছে মিউটেশনঅবার্সার শ্যাডো ডিওমে পরিবর্তনগুলি সনাক্ত করতে পারে না।
— আজেদী 32
@ এনক্রন, দুর্ভাগ্যক্রমে, আপনি যদি সিএসএস 3 রিসাইজ ব্যবহার করেন, ব্যবহারকারী যখন ম্যানুয়ালি রিসাইজ করবেন তখন আকার পরিবর্তন হতে পারে। এই ইভেন্টটি ধরা যায় না।
— পেসারিয়ার
@ আজেদী 32 হ্যাঁ, তবে আপনি শ্যাডোডমের অভ্যন্তরে মিউটেশনঅবার্সারটি ব্যবহার করতে পারেন। আমি যা বলতে চাইছি তা হ'ল bodyএই উদাহরণটির মতো দেখার পরিবর্তে , আপনি সরাসরি কোনও উপাদান দেখতে পারেন। এটি আসলে পুরো শরীর দেখার চেয়ে আরও পারফরম্যান্স এবং দক্ষ।
— trusktr
@ আজেদী 32 ঠিক আছে, একমাত্র সমস্যা হ'ল শ্যাডো ডোম গাছটি যদি বন্ধ করে দেওয়া হয় তবে আপনি অভ্যন্তরীণ অংশে প্রবেশ করতে সক্ষম হবেন না, তবে আমি মনে করি না এটি সাধারণত আপনার যা করা দরকার তা হয় এবং যদি আপনার পর্যবেক্ষণ করা দরকার তবে এর মতো একটি বদ্ধ গাছ তখন নকশায় সমস্যা হতে পারে। আদর্শভাবে, আপনার কেবল নিজের নিজস্ব উপাদানগুলি পর্যবেক্ষণ করা উচিত যা আপনার অ্যাক্সেস করে। একটি ছায়া-ডোম উপাদান যা আপনাকে এটি অভ্যন্তরীণ আকারের আকারের পর্যবেক্ষণ করতে হবে তা সঠিকভাবে নকশা করা যায় না। আপনার একটি নির্দিষ্ট উদাহরণ আছে? যদি তা হয় তবে সম্ভবত আমি একটি সমাধান প্রস্তাব করতে সহায়তা করতে পারি (কারণ আমি এটিতে আগ্রহীও বটে, তবে এখনও এর কোনও উদাহরণ নেই)।
— trusktr
@trusktr এই মুহুর্তে আমার কাছে একটি এমসিভিই নেই, তবে মূলত কোনও শ্যাডো ডম উপাদান যা কিছু ব্যবহারকারীর ইনপুট ফলে তার আকার পরিবর্তন করতে পারে তা এই সমস্যাটিকে ট্রিগার করার জন্য যথেষ্ট। একটি বাক্স যা ক্লিক করা হলে কিছু অতিরিক্ত তথ্য সহ প্রসারিত হয় for নোট করুন যে আমি পৃষ্ঠাটি পর্যবেক্ষণ করছি, পৃথক উপাদানটি নয়, কারণ নির্বিশেষে পৃষ্ঠার আকার বৃদ্ধি পেলে আমি স্বয়ংক্রিয়ভাবে স্ক্রোল করতে চাই। একটি ছায়া ডোম উপাদান প্রসারিত করা পাতাগুলি আরও দীর্ঘ হতে পারে তার একাধিক সম্ভাব্য কারণগুলির মধ্যে একটি।
— আজেদী 32
24

ResizeSensor.js বিপুল লাইব্রেরির অংশ, কিন্তু আমি তার কার্যকারিতা কমে এই :

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

এটি কিভাবে ব্যবহার করতে:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});
— মার্টিন ওয়ানটেক
সূত্র
চার্ট জেএস এটিই করে।
— আন্তোনিওসেস
সংকোচনের জন্য ধন্যবাদ। আমি এটি চেষ্টা করতে যাচ্ছি :)
— টনি কে।
এই অভিব্যক্তিটিতে কিছু অনুপস্থিত রয়েছেparseInt( getComputedStyle(element) )
— getFree
2
আমি বিভ্রান্ত হয়ে পড়েছি কীভাবে "লাইট জিনডেক্স = পার্সেন্ট (গেটকম্পিউটেড স্টাইল (উপাদান))) হয়;" বৈধ? আমি মনে করি আপনি বোঝাতে চেয়েছিলেন: "zIndex = parseInt (getComputesStyle (উপাদান) .zIndex)) দিন
— রায়ান Badour
1
উপরের সমাধান / কোডটি সমস্ত আকার পরিবর্তনকারী ইভেন্টগুলি সনাক্ত করে না (উদাহরণস্বরূপ যদি কোনও ধারক এটির সাথে পুনরায় আকার দেওয়া হয় তবে শিশু ইভেন্টগুলির জন্য আকারটি এটি আবিষ্কার করে না j jsfiddle.net/8md2rfsy/1 দেখুন )। গৃহীত উত্তর কাজ করে (স্বতন্ত্র রেখাগুলিকে সংশোধন করে)।
— newBee
21

আমি setTimeout()হ্যাকের প্রস্তাব দিচ্ছি না কারণ এটি কার্য সম্পাদনকে ধীর করে দেয়! পরিবর্তে, ডিভ আকার পরিবর্তন শোনার জন্য আপনি DOM রূপান্তর পর্যবেক্ষক ব্যবহার করতে পারেন ।

জাতীয়:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

এইচটিএমএল:

<div class='mydiv'>
</div>

এখানে বেহালার
DIV আছে আকার পরিবর্তন করার চেষ্টা করুন।

debounceদক্ষতা উন্নতির জন্য আপনি পদ্ধতিটিতে আরও মোড়ানো করতে পারেন । debounceপ্রতিটি মিলিসেকেন্ডে ডিআইভিকে পুনরায় আকার দেওয়া হচ্ছে এর পরিবর্তে প্রতি x মিলিসেকেন্ডে আপনার পদ্ধতিটি ট্রিগার করবে।

— JerryGoyal
সূত্র
9
এটির সাথে একমাত্র সমস্যা হ'ল পরিবর্তনের প্রতিবেদন না করা যদি না কোনও উপাদানটির পরিবর্তিত পরিবর্তন ঘটে unless অন্যান্য উপাদান যুক্ত হওয়ার কারণে যদি উপাদানটির আকার পরিবর্তন হয় তবে এটি কাজ করবে না।
— টনি কে।
আমি @ টনিকের সাথে একমত, আমি মিউটেশনঅবার্সারের সাথে এটিই আমার একমাত্র সমস্যা এবং এখন আমি একটি উপাদান পুনরায়
— আকারের
@ জেরিগোয়াল যখন ডিভিতে <img> ট্যাগ থাকে এটি কাজ করছে না। প্রথম দৃষ্টিতে চিত্রটি লোড করা হয়নি এবং ডিভের আকার 0 হিসাবে সেট করা হয়েছে এবং লোডের পরে ডিভের আকার পরিবর্তন করা হলেও পর্যবেক্ষক ট্রিগার করা হয় না
— সান্থোষ
15

সবচেয়ে ভাল সমাধান হ'ল তথাকথিত এলিমেন্ট ক্যোয়ারী ব্যবহার করা । তবে এগুলি মানসম্পন্ন নয়, কোনও স্পেসিফিকেশন বিদ্যমান নেই - এবং যদি আপনি এই পথে যেতে চান তবে পলিফিল / লাইব্রেরিগুলির মধ্যে একটি ব্যবহারের একমাত্র বিকল্প।

উপাদান অনুসন্ধানগুলির পিছনে ধারণাটি হ'ল পৃষ্ঠায় একটি নির্দিষ্ট ধারককে সরবরাহ করা স্থানটিতে প্রতিক্রিয়া জানাতে দেওয়া। এটি একবারে কোনও উপাদান লিখতে দেয় এবং তারপরে পৃষ্ঠার যে কোনও জায়গায় ফেলে দেয়, যখন এটি এর সামগ্রীগুলি তার বর্তমান আকারের সাথে সামঞ্জস্য করবে। উইন্ডো আকারটি যাই হোক না কেন। এটি প্রথম তফাত যা আমরা উপাদান অনুসন্ধান এবং মিডিয়া প্রশ্নের মধ্যে দেখতে পাই। প্রত্যেকে আশা করে যে কোনও সময়ে এমন একটি স্পেসিফিকেশন তৈরি করা হবে যা মৌলিক অনুসন্ধানগুলি (বা এমন কিছু অর্জন করবে যা একই লক্ষ্য অর্জন করবে) এবং তাদের দেশীয়, পরিষ্কার, সরল এবং শক্তিশালী করে তুলবে। বেশিরভাগ লোকেরা সম্মত হন যে মিডিয়া ক্যোয়ারীগুলি বেশ সীমাবদ্ধ এবং মডুলার ডিজাইন এবং সত্য প্রতিক্রিয়াশীলতার জন্য সহায়তা করে না।

কয়েকটি পলিফিল / গ্রন্থাগার রয়েছে যা বিভিন্ন উপায়ে সমস্যার সমাধান করে (যদিও এর পরিবর্তে সমাধানের পরিবর্তে ওয়ার্কারআউন্ডস বলা যেতে পারে):

  • সিএসএস এলিমেন্ট ক্যোয়ারী - https://github.com/marcj/css-element-queries
  • বুমকিউয়ার্স - https://github.com/BoomTownROI/boomqueries
  • eq.js - https://github.com/Snugug/eq.js
  • এলিমেন্টুয়েরি - https://github.com/tysonmatanich/elementQuery
  • এবং আরও কয়েকটি, যা আমি এখানে তালিকা বদ্ধ করতে যাচ্ছি না, তবে আপনি অনুসন্ধানে নির্দ্বিধায়। বর্তমানে উপলব্ধ বিকল্পগুলির মধ্যে কোনটি সবচেয়ে ভাল তা আমি বলতে সক্ষম হব না। আপনাকে কয়েকটি চেষ্টা করে সিদ্ধান্ত নিতে হবে।

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

— স্ট্যান
সূত্র
উপাদান প্রশ্নের জন্য +1 তবে আমি শীঘ্রই এগুলি যে কোনও সময় দেখার বিষয়ে আশাবাদী নই। এএফআইএইচ-তে এমনকি কোনও খসড়াও জবাব নেই ... সম্ভবত আমাদের আগ্রহী একটি পক্ষকে একটি করে একত্রিত করে জমা দিতে হবে?
— রব ইভান্স
1
এটি অবশ্যই একটি ভাল ধারণা। একটি চূড়ান্ত সংস্করণে পৌঁছাতে এটি অনেক দিন সময় নেবে, অনেক মনোযোগ আকর্ষণ করা দরকার। এটি একটি ভাল উপায়ে ডিজাইন করা আমার কাছে তুচ্ছ মনে হয় না। ক্রস ব্রাউজারের সামঞ্জস্যতা, বিজ্ঞপ্তি নির্ভরতা, ডিবাগিং, পঠনযোগ্যতা এবং রক্ষণাবেক্ষণ ইত্যাদি So সুতরাং আসুন যত তাড়াতাড়ি সম্ভব শুরু করুন :)
— স্ট্যান
@ স্ট্যান, আমি মনে করি এলিমেন্ট কোয়েরি সম্পর্কে যা রয়েছে তার আরও বিস্তৃতকরণ যোগ করে এই উত্তরটি আরও ভাল হতে পারে।
— পেসারিয়ার
15

আমি যখন এই মার্সজে-র সমাধান না করে তখন এই লাইব্রেরিটি কাজ করতে পেলাম:

https://github.com/sdecima/javascript-detect-element-resize

এটি খুব লাইটওয়েট এবং সিএসএসের মাধ্যমে বা কেবল HTML লোডিং / রেন্ডারিংয়ের মাধ্যমে এমনকি প্রাকৃতিক আকারগুলি সনাক্ত করে।

কোড নমুনা (লিঙ্ক থেকে নেওয়া):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>
— joshcomley
সূত্র
এই হল. 147 লাইন, স্ক্রোল ইভেন্টগুলি ব্যবহার করে। আপনি কীভাবে ডিভ ডাইমেনশন পরিবর্তনগুলি সেরাভাবে সনাক্ত করতে পারেন তার পূর্ণ এবং সত্য উত্তর চাইলে এই কোডটি পড়ুন। ইঙ্গিত: এটি "কেবল এই লাইব্রেরিটি ব্যবহার করুন না"।
— সেফ রিড
1
লোকেরা এই গ্রন্থাগারটি ব্যবহার করার আগে তাদের এই সমস্যাটি একবার দেখে নেওয়া উচিত ।
— লুই
13

এই http://benalman.com / কোড / প্রকল্পগুলি / jquery-resize/example/resize/ দেখুন

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

এটি কীভাবে কাজ করা যায় তা ব্যাখ্যা করার জন্য জেএস ফিডেলের সাথে উদাহরণ।
এই ঝাঁকুনিটি দেখুন http://jsfiddle.net/sgsqJ/4/

সেই আকারে () ইভেন্টটি "টেস্ট" শ্রেণিযুক্ত উপাদানগুলির সাথেও উইন্ডো অবজেক্টের সাথে এবং উইন্ডো অবজেক্টের পুনরায় আকার call ('। পরীক্ষা') এর সাথে আবদ্ধ res ('। পরীক্ষা') res পুনরায় আকার () বলা হয়।

যেমন

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});
— ভারত পাতিল
সূত্র
মজাদার. সেই জসফিডাল ক্রমাগত ক্রোমকে ক্রম করে ইন্সপেক্টরের সাথে খোলা আছে এবং আমি "আরও পাঠ্য যুক্ত করুন" লিঙ্কটি ক্লিক করি। ফায়ারফক্স "অত্যধিক পুনরাবৃত্তি" ত্রুটি ছুড়ে ফেলে।
— এরিকপি
3
দয়া করে jQuery এর আকার পরিবর্তন প্লাগইন ব্যবহার করবেন না। এটি সত্যিই ধীর এবং পাশাপাশি সঠিক নয়। আরও ভাল সমাধান পেতে আমার উত্তর দেখুন।
— মার্ক জে শমিট
24
এটি সরাসরি মাত্রা পরিবর্তনগুলি সনাক্ত করে না। এটি একটি আকার পরিবর্তন ইভেন্ট শ্রোতার কেবলমাত্র একটি উপ-পণ্য। একটি মাত্রা পরিবর্তন অন্যান্য অনেক উপায়ে ঘটতে পারে।
— vsync
4
ডিভের আকারটি যদি স্টাইল বা ডোমে পরিবর্তন থেকে আসে এবং উইন্ডো রাইজাইয়ের মাধ্যমে নয়?
— চমকপ্রদ
9

আপনি ব্যবহার করতে পারেন iframeবা objectব্যবহার contentWindowবা contentDocumentপুনরায় আকার দেওয়ার উপর। setIntervalবা ছাড়াsetTimeout

পদক্ষেপগুলি:

  1. আপনার উপাদান অবস্থান সেট করুন relative
  2. স্বচ্ছ নিরঙ্কুশ লুকানো আইএফআরএম এর ভিতরে যুক্ত করুন
  3. শুনুন IFRAME.contentWindow- onresizeইভেন্ট

এইচটিএমএলের একটি উদাহরণ:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

জাভাস্ক্রিপ্ট:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

চলমান উদাহরণ

জেএসফিডাল: https://jsfiddle.net/qq8p470d/

আরো দেখুন:

— আমিনাদাভ গ্লিক্সটাইন
সূত্র
1
যারা jquery ব্যবহার করছেন না তাদের জন্য একটি নোট IFRAME.contentWindowউপলব্ধ নয় যতক্ষণ না onloadইভেন্টটি আইফ্রেমে আগুন জ্বলে না। এছাড়াও, আপনি শৈলীটি যুক্ত করতে চাইতে পারেন visibility:hidden;, কারণ আইফ্রেমে এটির পিছনের উপাদানগুলিতে মাউস ইনপুটটি ব্লক করতে পারে (কমপক্ষে আইইতে "ভাসমান" বলে মনে হচ্ছে)।
— জেমস উইলকিনস
3
যদিও এটি কাজ করে, এটি আকারের পরিবর্তনটি পর্যালোচনা করার জন্য একটি সম্পূর্ণ নতুন ব্রাউজিং প্রসঙ্গে তৈরি করার ওভারহেড সহ একটি ভারী ওজন সমাধান। এছাড়াও, কিছু ক্ষেত্রে এটি displayউপাদানটির সম্পত্তি পরিবর্তন করা আদর্শ বা সম্ভাব্য নয় ।
— trusktr
সম্মত হয়েছে, এটি উপরে বর্ণিত হিসাবে একটি ভয়ানক সমাধান
— 29 ই
কীভাবে লিখেছিলেন এত ভয়াবহ সমাধান?
— আমিনাদভ গ্লিক্সটাইন
এই পদ্ধতিটি ভিডিও প্লেয়ার এবং অডিও প্লেয়ারগুলির সাথে ভাল কাজ করে যার গতিশীল সামগ্রীর পুনরায় আকার দরকার। আমি ওয়েভসুরফার.জেএস আউটপুটকে পুনরায় আকার দিতে এই পদ্ধতিটি ব্যবহার করছি।
— ডেভিড ক্লিউস
8

কেবল উইন্ডো অবজেক্ট একটি "আকার পরিবর্তন" ইভেন্ট উত্পন্ন করে। আপনি যা করতে চান তা করার একমাত্র উপায় হ'ল একটি বিরতি টাইমার চালানো যা পর্যায়ক্রমে আকারটি পরীক্ষা করে।

— সূচালো
সূত্র
7 

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}
<div id = "div">DIV</div>
স্নিপেট প্রসারিত করুন

— আইকন মোগওয়াই
সূত্র
7

আশ্চর্যজনকভাবে এই সমস্যাটি যত পুরানো, এটি এখনও বেশিরভাগ ব্রাউজারে একটি সমস্যা।

অন্যরা যেমন বলেছে, ক্রোম +৪++ এখন রিজাইজ পর্যবেক্ষণের সাথে দেশীয়ভাবে জাহাজগুলি প্রযোজ্য, তবে, অনুমানটি এখনও ঠিক আছে এবং ক্রোম বর্তমানে (2019-01-29 হিসাবে) স্পেসিফিকেশনের সর্বশেষ সংস্করণের পিছনে রয়েছে ।

আমি বুনোতে বেশ কয়েকটি ভাল রেজাইজঅবার্সার পলিফিল দেখেছি, তবে কেউ কেউ সেই স্পেসিফিকেশনটি অনুসরণ করে না যা ঘনিষ্ঠভাবে এবং অন্যদের কিছু গণনার সমস্যা রয়েছে।

যে কোনও অ্যাপ্লিকেশনে ব্যবহার করা যেতে পারে এমন কিছু প্রতিক্রিয়াশীল ওয়েব উপাদান তৈরি করতে আমার এই আচরণের মরিয়া প্রয়োজন। তাদের সুন্দরভাবে কাজ করার জন্য তাদের সর্বদা তাদের মাত্রাগুলি জানতে হবে, তাই রেজাইজঅবার্সাররা আদর্শ বলে মনে হয়েছিল এবং আমি একটি পলিফিল তৈরি করার সিদ্ধান্ত নিয়েছি যা অনুমানটিকে যথাসম্ভব ঘনিষ্ঠভাবে অনুসরণ করেছে।

রেপো: https://github.com/juggle/resize-observer

ডেমো: https://codesandbox.io/s/myqzvpmmy9

— Trem
সূত্র
এটি অবশ্যই IE11 + ব্রাউজারের সামঞ্জস্যের সাথে মোকাবেলা করা যে কোনও ব্যক্তির জন্য উত্তম উত্তর।
— একফুহরমান
3

ক্লে.জেএস ( https://github.com/zzarcon/clay ) ব্যবহার করে উপাদান আকারের পরিবর্তনগুলি সনাক্ত করা বেশ সহজ:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});
— Zzarcon
সূত্র
7
এটি আপনার লাইব্রেরি প্রদত্ত যথাযথ প্রকাশ প্রদান করুন।
— jhpratt GOFUNDME RELICENSING
এটি আমার পক্ষে কাজ করেছিল, যেখানে রেসাইজ সেন্সর না, এটি আমার মডেল শৈলিকে ভেঙে দেয়। ধন্যবাদ জাজারকন :)
— ম্যাক্সিমা আলেকজ
3

এই ব্লগ পোস্টটি কার্যকরভাবে ডোম উপাদানগুলির আকার পরিবর্তনগুলি সনাক্ত করতে আমাকে সহায়তা করেছিল helped

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

এই কোডটি কীভাবে ব্যবহার করবেন ...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

উদাহরণস্বরূপ প্যাকেজযুক্ত কোড ব্যবহৃত হয়েছে ...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

দ্রষ্টব্য: অ্যাপকনফিগ একটি নাম স্থান / অবজেক্ট যা আমি পুনরায় ব্যবহারযোগ্য ফাংশনগুলি সংগঠিত করতে ব্যবহার করি। আপনার পছন্দের কোনও কিছুর সাথে নামটি সন্ধান এবং প্রতিস্থাপনে নির্দ্বিধায় করুন।

— বেন গ্রিপকা
সূত্র
3

আমার jQuery প্লাগইনটি কেবলমাত্র নয়, সমস্ত উপাদানগুলিতে "আকার পরিবর্তন" ইভেন্ট সক্ষম করে window।

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
});
— ডাস্টিন পোয়েসান্ট
সূত্র
1
আপনার লিঙ্কটি এমন কোনও অবস্থানের দিকে ইঙ্গিত করছিল যা আর নেই। আমি প্লাগইনটির নাম অনুসন্ধান করেছি এবং এমন একটি পৃষ্ঠা খুঁজে পেয়েছি যা আপনার বর্ণনার সাথে মিলে যায়। যেহেতু আপনি প্লাগইনটির লেখক হিসাবে উপস্থিত হয়েছেন, তাই আপনার উত্তরটি স্পষ্ট করে তুলতে আমি এটি আপনার কাজটি সম্পাদনা করেছি ited এই সাইটের বিধিগুলি এমন যে আপনি যখন উত্তরগুলি লিখেন তখন আপনি বিকাশিত কিছু ব্যবহার করার পরামর্শ দেন আপনার অবশ্যই সম্পর্কটি সুস্পষ্ট করে তুলতে হবে ।
— লুই
এটি দুর্দান্ত সমাধান নয় কারণ আপনি বারবার সেটটাইমারে কিছু ফাংশন চালান যার অর্থ ব্রাউজারটি ক্রমাগত সিপিইউ জ্বলছে এমনকি কিছু না ঘটলেও। ল্যাপটপ এবং সেলফোন মালিকরা এমন সমাধান থেকে উপকৃত হন যা ব্রাউজার ইভেন্টগুলি কেবল তখনই প্রয়োগ করা হয় যখন অনস্ক্রোল ইভেন্টটি ব্যবহার করার মতো থাকে।
— রোমান জেনকা
2

আপনি নিম্নলিখিত স্নিপেটে কোডটি চেষ্টা করতে পারেন, এটি আপনার সাধারণ আবশ্যক জাভাস্ক্রিপ্ট ব্যবহার করে আবশ্যক। ( কোড স্নিপেট চালান এবং সতর্কতাটি ট্রিগার করতে পুরো পৃষ্ঠার লিঙ্কে ক্লিক করুন যদি আপনি এটি পরীক্ষা করতে চান তবে ডিভটি পুনরায় আকার দেওয়া হয়েছে ))।

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

যাইহোক ডিভ-রাইজ স্নিফিং বন্ধ করতে আপনি সর্বদা ক্লিক ইভেন্ট ব্যবহার করতে পারেন ।

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>
স্নিপেট প্রসারিত করুন

আপনি না পরীক্ষা করতে বেহালার এছাড়াও

হালনাগাদ

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>
স্নিপেট প্রসারিত করুন

আপডেট করা হয়েছে বেহালার

— পিটার ডারমিস
সূত্র
2

এটি শীর্ষস্থানীয় উত্তরের হুবহু অনুলিপি, তবে কোনও লিঙ্কের পরিবর্তে, এটি কোডের কেবলমাত্র সেই অংশ যা আইএমওকে আরও পাঠযোগ্য এবং সহজে বোঝার জন্য অনুবাদ করা হয়েছে matters কয়েকটি অন্যান্য ছোট পরিবর্তনগুলির মধ্যে রয়েছে ক্লোননোড () ব্যবহার করা, এবং এইচটিএমএলকে জেএস স্ট্রিংয়ের মধ্যে না দেওয়া। ছোট জিনিস, তবে আপনি এটি অনুলিপি করে কাস্ট করতে পারেন এবং এটি কার্যকর হবে।

এটি যেভাবে কাজ করে তা হ'ল দুটি অদৃশ্য ডিভ তৈরি করে আপনি যে উপাদানটি দেখছেন তা পূরণ করে এবং তারপরে প্রতিটিটিতে একটি ট্রিগার রেখে এবং একটি স্ক্রোল অবস্থান নির্ধারণ করে যা আকার পরিবর্তিত হলে যদি একটি স্ক্রোল পরিবর্তন ট্রিগার করতে পরিচালিত করে।

সমস্ত আসল ক্রেডিট মার্ক জেতে যায়, তবে আপনি যদি কেবল প্রাসঙ্গিক কোডটি সন্ধান করেন তবে তা এখানে:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }
— সেফ রিড
সূত্র
1

খাঁটি জাভাস্ক্রিপ্ট সমাধান, তবে কেবল তখনই কার্যকর হয় যখন উপাদানটি সিএসএস পুনরায় আকার বোতামের সাথে পুনরায় আকার দেওয়া হয় :

  1. অফসেটউইথ এবং অফসেটহাইট সহ উপাদান আকার সঞ্চয় করুন ;
  2. এই উপাদানটিতে একটি অনক্লিক ইভেন্ট শ্রোতা যুক্ত করুন;
  3. যখন ট্রিগার করা হয় তখন নিরাময়কারী offsetWidthএবং offsetHeightসঞ্চিত মানগুলির সাথে তুলনা করুন এবং যদি আলাদা হয় তবে আপনি যা চান তা করুন এবং এই মানগুলি আপডেট করুন।
— roipoussiere
সূত্র
1

এখানে @ এনক্রোন দ্বারা সমাধানের সরলিকৃত সংস্করণটি দেওয়া হয়েছে, এটি একটি একক উপাদানের জন্য প্রযোজ্য (@ এনক্রনের উত্তরের উপাদানগুলির একটি অ্যারের পরিবর্তে, আমার যে জটিলতার প্রয়োজন নেই)।

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

ইভেন্ট শ্রোতা এবং পর্যবেক্ষক দ্বারা মুছে ফেলা যেতে পারে:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();
— Gman
সূত্র
0

ভারত পাতিলের উত্তরটি ব্যবহার করে সর্বাধিক স্ট্যাক ত্রুটি রোধ করতে আপনার বাঁধাই কলব্যাকের ভিতরে কেবল মিথ্যা ফিরে আসে নীচের উদাহরণটি দেখুন:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});
— সাদা খরগোশ
সূত্র
0

এটি সত্যিই একটি পুরানো প্রশ্ন, তবে আমি অনুভব করেছি যে আমি এটির জন্য আমার সমাধান পোস্ট করব।

আমি ব্যবহার করার চেষ্টা করেছি ResizeSensorযেহেতু প্রত্যেকের মনে হচ্ছে এটির উপর বেশ বড় ক্রাশ রয়েছে। যদিও বাস্তবায়ন করার পরে, আমি বুঝতে পেরেছি যে এলিমেন্ট ক্যোয়ারির অধীনে এলিমেন্ট ক্যোয়ারিতে প্রশ্নযুক্ত উপাদানটির অবস্থান প্রয়োজন relativeবা absoluteএটি প্রয়োগ করা দরকার, যা আমার পরিস্থিতির জন্য কার্যকর হয়নি।

আমি intervalস্ট্রেট setTimeoutবা এর পরিবর্তে আরএক্সজেএস দিয়ে এটি পরিচালনা করেছিrequestAnimationFrame পূর্ববর্তী বাস্তবায়নগুলির মতো ।

একটি বিরতিতে পর্যবেক্ষণযোগ্য গন্ধ সম্পর্কে কী দুর্দান্ত আপনি হ'ল স্ট্রিমটি সংশোধন করতে পারেন তবে অন্য কোনও পর্যবেক্ষণযোগ্য পরিচালনা করা যায়। আমার জন্য, একটি বেসিক বাস্তবায়ন যথেষ্ট ছিল, তবে আপনি পাগল হয়ে যেতে পারেন এবং সব ধরণের মার্জ ইত্যাদি করতে পারেন etc.

নীচের উদাহরণে, আমি অভ্যন্তরীণ (সবুজ) ডিভের প্রস্থের পরিবর্তনগুলি ট্র্যাক করছি। এটির প্রস্থটি 50% নির্ধারণ করা হয়েছে তবে 200px সর্বাধিক প্রস্থ রয়েছে। স্লাইডারটিকে টেনে আনতে মোড়ক (ধূসর) ডিভের প্রস্থকে প্রভাবিত করে। আপনি দেখতে পাচ্ছেন যে অভ্যন্তরীণ ডিভের প্রস্থ পরিবর্তিত হলে কেবল পর্যবেক্ষণযোগ্য আগুন জ্বলে উঠবে, যা কেবল তখনই ঘটে যখন বাইরের ডিভের প্রস্থ 400px এর চেয়ে ছোট হয়।

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = `${event.target.value}px`;
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();
.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h1>Resize Browser width</h1>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

— Scrimothy
সূত্র
-1

কেবলমাত্র Window.onResizeনির্দিষ্টকরণে বিদ্যমান তবে আপনি IFrameনতুন তৈরি করতে সর্বদা ব্যবহার করতে পারেনWindow আপনার ডিআইভির অভ্যন্তরে অবজেক্ট ।

দয়া করে এই উত্তরটি পরীক্ষা করুন । একটি নতুন ছোট jquery প্লাগইন আছে , এটি পোর্টেবল এবং সহজেই ব্যবহারযোগ্য। এটি কীভাবে হয়ে গেছে তা দেখতে আপনি সর্বদা উত্স কোডটি পরীক্ষা করতে পারেন।

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}
— rbtbar
সূত্র
এটি যদি আপনার পুনঃভাগযোগ্য ডিভ থাকে তবে এটি অত্যন্ত অকার্যকর সমাধান।
— সারিক্যাক্টাস
-1

আমি ভেবেছিলাম এটি সম্পন্ন করা যাবে না তবে আমি এটি সম্পর্কে ভেবেছিলাম, আপনি স্টাইল = "রাইজাইজ: উভয়; যাতে আপনি এটিতে ক্লিক করতে না পেরে যাতে উপাদানটির উচ্চতা এবং প্রস্থটি পরীক্ষা করতে একটি অন্লিক ফাংশন যুক্ত করেছিলেন এবং এটি কাজ করেছিল worked খাঁটি জাভাস্ক্রিপ্টের মাত্র 5 টি লাইন (নিশ্চিত যে এটি আরও ছোট হতে পারে) http://codepen.io/anon/pen/eNyyVN

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>


<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>
— PixelPimp
সূত্র
2
কোনও ক্লিক ইভেন্টকে বরখাস্ত করা হলে এটি কেবল গণনা করে যা প্রশ্নের প্রয়োজনীয়তার অংশ নয়।
— রব ইভান্স
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.