JQuery ব্যবহার করে যখন কোনও ডিভের উচ্চতা পরিবর্তিত হয় তা সনাক্ত করা হচ্ছে

Question

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

সুতরাং, যখন ডিভের উচ্চতা পরিবর্তন হবে তখন আমি কীভাবে সনাক্ত করব? আমি ধরে নিয়েছি আমার কিছু jQuery ইভেন্ট ব্যবহার করা দরকার, তবে আমি নিশ্চিত নই যে কোনটি hুকবে।

Comments

আমি ভাবছি jQuery ব্যবহার করার সময় কেন কেউ প্লাগিন ব্যবহার করতে চান না।

— আন্দ্রে কলিল

@ ব্যবহারকারী007 কীসের ফলে আপনার উপাদানগুলির আকার পরিবর্তন হয়?

— এ। ওল্ফ

@ আমার ডিভের উচ্চতা পরিবর্তিত হওয়াগুলিতে কিছুটা আইটেম যুক্ত করার পরে, অ্যাপেন্ডটি jquery দ্বারা সম্পন্ন হয়েছে

— user007

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

— এ। ওল্ফ

টিপটির জন্য ধন্যবাদ।

— ব্যবহারকারী 700

Answer 1

সিএসএস-উপাদান-প্রশ্নের লাইব্রেরি থেকে একটি আকার পরিবর্তন সেন্সর ব্যবহার করুন:

https://github.com/marcj/css-element-queries

new ResizeSensor(jQuery('#myElement'), function() {
    console.log('myelement has been resized');
});

এটি ইভেন্ট ভিত্তিক পদ্ধতির ব্যবহার করে এবং আপনার সিপিইউর সময় নষ্ট করে না। সমস্ত ব্রাউজারে কাজ করে। IE7 + +।

Comments

দুর্দান্ত সমাধান, এটি পছন্দসই লক্ষ্যে ওভারলে হিসাবে একটি অদৃশ্য নতুন উপাদান ব্যবহার করে এবং পরিবর্তনগুলি ট্রিগার করতে ওভারলেতে "স্ক্রোল" ইভেন্টটি ব্যবহার করে।

— Eike Thies

এটি একমাত্র সমাধান যা সমস্ত ক্ষেত্রে কাজ করে, যখন বিষয়বস্তু এবং বৈশিষ্ট্যগুলি পরিবর্তিত হয় না তবে মাত্রা পরিবর্তন হয় (উদাহরণস্বরূপ: CSS ব্যবহারের শতাংশের মাত্রা)

— এফএফ_দেব

এখন পর্যন্ত সেরা সমাধান।

— dlsso

এখানে শীর্ষে ভোট দেওয়া উত্তর না হওয়া ট্রাজেডি। এটি সত্যই 100% কাজ করে।

— জিম্বো জনি

এটি লুকানো বন্ধ করে দেওয়া উপাদানগুলির পক্ষে কাজ করে বলে মনে হচ্ছে না।

— Greatwitenorth

Answer 2

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

দ্রষ্টব্য: এই কোডটি পোলিং ব্যবহার করে না

এই সাধারণ ডেমোটি দেখুন http://jsfiddle.net/aD49d/

$(function () {
    var prevHeight = $('#test').height();
    $('#test').attrchange({
        callback: function (e) {
            var curHeight = $(this).height();            
            if (prevHeight !== curHeight) {
               $('#logger').text('height changed from ' + prevHeight + ' to ' + curHeight);

                prevHeight = curHeight;
            }            
        }
    }).resizable();
});

প্লাগইন পৃষ্ঠা: http://meetselva.github.io/attr परिवर्तन/

সংক্ষিপ্ত সংস্করণ: (1.68 কেবি)

(function(e){function t(){var e=document.createElement("p");var t=false;if(e.addEventListener)e.addEventListener("DOMAttrModified",function(){t=true},false);else if(e.attachEvent)e.attachEvent("onDOMAttrModified",function(){t=true});else return false;e.setAttribute("id","target");return t}function n(t,n){if(t){var r=this.data("attr-old-value");if(n.attributeName.indexOf("style")>=0){if(!r["style"])r["style"]={};var i=n.attributeName.split(".");n.attributeName=i[0];n.oldValue=r["style"][i[1]];n.newValue=i[1]+":"+this.prop("style")[e.camelCase(i[1])];r["style"][i[1]]=n.newValue}else{n.oldValue=r[n.attributeName];n.newValue=this.attr(n.attributeName);r[n.attributeName]=n.newValue}this.data("attr-old-value",r)}}var r=window.MutationObserver||window.WebKitMutationObserver;e.fn.attrchange=function(i){var s={trackValues:false,callback:e.noop};if(typeof i==="function"){s.callback=i}else{e.extend(s,i)}if(s.trackValues){e(this).each(function(t,n){var r={};for(var i,t=0,s=n.attributes,o=s.length;t<o;t++){i=s.item(t);r[i.nodeName]=i.value}e(this).data("attr-old-value",r)})}if(r){var o={subtree:false,attributes:true,attributeOldValue:s.trackValues};var u=new r(function(t){t.forEach(function(t){var n=t.target;if(s.trackValues){t.newValue=e(n).attr(t.attributeName)}s.callback.call(n,t)})});return this.each(function(){u.observe(this,o)})}else if(t()){return this.on("DOMAttrModified",function(e){if(e.originalEvent)e=e.originalEvent;e.attributeName=e.attrName;e.oldValue=e.prevValue;s.callback.call(this,e)})}else if("onpropertychange"in document.body){return this.on("propertychange",function(t){t.attributeName=window.event.propertyName;n.call(e(this),s.trackValues,t);s.callback.call(this,t)})}return this}})(jQuery)

Comments

আপনি যদি ডিভটিকে ম্যানুয়ালি আকারে পরিবর্তন করেন তবে এটি সমস্যার সমাধান করে, মূল প্রশ্নটি এটি সমাধান করে না? আপনি যদি বিষয়বস্তু গতিশীলভাবে যুক্ত করেন তবে এটি উচ্চতা পরিবর্তন সনাক্ত করতে পারে না: jsfiddle.net/aD49d/25

— smets.kevin

গতিশীল বিষয়বস্তুর জন্য এই কাজটি করার কোনও উপায় ছিল কিনা তা জানতে আগ্রহী হব would

— এরিকপি

@ জোকোডার একটি অ্যাকশন রয়েছে যখন ব্রাউজারটি দ্বারা চালিত DOM ইভেন্টগুলিতে এই অ্যাটর্ইঞ্জ কোডটি নির্ভর করে। তবে, এই উদাহরণে গতিশীল বিষয়বস্তু প্রোগ্রামক্রমে অন্তর্ভুক্ত করা হয়েছে যা দুর্ভাগ্যক্রমে কোনও ইভেন্টই ট্রিগার করে না। "পোলিং" এখানে অন্য একটি সহজ বিকল্প বলে মনে হচ্ছে .. গতিশীল সামগ্রী অন্তর্ভুক্ত করার পরে অন্য বিকল্পটি ম্যানুয়ালি ট্রিগার করতে সক্ষম হবে।

— সেলভাকুমার আরুমুগাম

Answer 3

আপনি ডিওএমএস সাবট্রি মোডিফাইড ইভেন্টটি ব্যবহার করতে পারেন

$(something).bind('DOMSubtreeModified' ...

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

অথবা আপনি যদি সরাসরি ডিভ পরিবর্তন করে থাকেন (ডিভ পরিবর্তে অনির্দেশ্য উপায়ে ব্যবহারকারী ইনপুট দ্বারা পরিবর্তিত হয়, যেমন এটি বিষয়বস্তু সম্পাদনযোগ্য হয় তবে) আপনি যখনই এটি করেন কেবল আপনি একটি কাস্টম ইভেন্ট নিক্ষেপ করতে পারেন।

ডাউনসাইড: আইই এবং অপেরা এই ইভেন্টটি প্রয়োগ করে না।

Comments

আইই ও অপেরা এই ইভেন্টটি বাস্তবায়ন করে না: quirksmode.org/dom/events/index.html

— Deffusion

DomSubtreeModified চিত্রিত হয়েছে

— অ্যাডোনিস কে। কাকুলিডিস

এটি করার আধুনিক

— উপায়টি হবে মিউটেশনঅবার্সার

Answer 4

এইভাবে আমি সম্প্রতি এই সমস্যাটি পরিচালনা করেছি:

$('#your-resizing-div').bind('getheight', function() {
    $('#your-resizing-div').height();
});

function your_function_to_load_content() {
    /*whatever your thing does*/
    $('#your-resizing-div').trigger('getheight');
}

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

Comments

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

— andyface

আপনার কোডটি ঠিক কী করে? বাঁধাই ও ট্রিগার প্ররোচিত ফাংশনটিতে আপনি কেবলমাত্র বাইন্ড ইভেন্টের ভিতরে যে কোডটি লিখেছেন তা ব্যবহার করতে পারি না কেন?

— ব্যবহারকারী 1447420

তবে এটি স্বয়ংক্রিয় নয়, তাই না?

— অ্যালবার্ট

Answer 5

আপনি MutationObserverক্লাস ব্যবহার করতে পারেন ।

MutationObserverবিকাশকারীদের একটি ডিওএম পরিবর্তনের প্রতিক্রিয়া জানাতে একটি উপায় সরবরাহ করে। এটি ডিওএম 3 ইভেন্টের নির্দিষ্টকরণে সংজ্ঞায়িত মিউটেশন ইভেন্টগুলির প্রতিস্থাপন হিসাবে ডিজাইন করা হয়েছে is

উদাহরণ ( উত্স )

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Comments

এটা সঠিক উত্তর. মিউটেশনস্মামারী

— খ্রিস্টান ব্যাঙ্কেস্ট

Answer 6

একটি jQuery প্লাগইন রয়েছে যা এটি খুব ভালভাবে মোকাবেলা করতে পারে

http://www.jqui.net/jquery-projects/jquery-mutate-official/

উচ্চতা পরিবর্তন হবে কি না, আপনি যদি লাল সীমানা বিভাজনকে পুনরায় আকার দিন তা যদি এখানে বিভিন্ন পরিস্থিতিতে একটি ডেমো থাকে।

http://www.jqui.net/demo/mutate/

Comments

এটি সুন্দর, তবে কি এটি ডিফল্টরূপে ইউআই প্রতি পরিবর্তনের জন্য প্রতি মিলিসেকেন্ডে পোল করে না? এটা কি দক্ষ?

— মাইকেল স্কট কুথবার্ট

@ মিশেলস্কটকুবার্ট এটি অনেক আগে লেখা হয়েছিল, তবে আমি ব্যবহার করেছি setTimeout, সুতরাং এটি 1 মিমি + [চেকগুলি করতে সময় লাগবে] সংক্ষেপে বলব, তবে ধারণাটি ক্রমাগত শোনার ছিল, একবার আপনি এটি আবার ট্রিগার করার পরে, এটির মতো এক সারি. আমি নিশ্চিত যে আমি এটি অনেক ভাল করতে পারি তবে বেশি সময় পাই না।

— Val,

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

— মাইকেল স্কট কুথবার্ট

Answer 7

ব্যবহারকারী 700 এর প্রতিক্রিয়া:

আপনার উপাদানগুলির উচ্চতা যদি আইটেমগুলিতে এতে যুক্ত হওয়ার কারণে পরিবর্তিত হয় তবে .append()আপনাকে উচ্চতার পরিবর্তনটি সনাক্ত করার দরকার নেই। আপনি কেবলমাত্র দ্বিতীয় উপাদানটিকে একই ফাংশনে পুনঃস্থাপন করুন যেখানে আপনি নতুন উপাদানটি আপনার প্রথম উপাদানটিতে যুক্ত করছেন।

যেমন:

কাজের উদাহরণ

$('.class1').click(function () {
    $('.class1').append("<div class='newClass'><h1>This is some content</h1></div>");
    $('.class2').css('top', $('.class1').offset().top + $('.class1').outerHeight());
});

Answer 8

আপনি একটি সাধারণ সেট অন্তর্বর্তী করতে পারেন।

function someJsClass()
{
  var _resizeInterval = null;
  var _lastHeight = 0;
  var _lastWidth = 0;
  
  this.Initialize = function(){
    var _resizeInterval = setInterval(_resizeIntervalTick, 200);
  };
  
  this.Stop = function(){
    if(_resizeInterval != null)
      clearInterval(_resizeInterval);
  };
  
  var _resizeIntervalTick = function () {
    if ($(yourDiv).width() != _lastWidth || $(yourDiv).height() != _lastHeight) {
      _lastWidth = $(contentBox).width();
      _lastHeight = $(contentBox).height();
      DoWhatYouWantWhenTheSizeChange();
    }
  };
}

var class = new someJsClass();
class.Initialize();

সম্পাদনা করুন:

এটি ক্লাসের সাথে একটি উদাহরণ। তবে আপনি সহজ কিছু করতে পারেন।

Answer 9

আপনি এটি ব্যবহার করতে পারেন তবে এটি কেবল ফায়ারফক্স এবং ক্রোমকে সমর্থন করে।

$(element).bind('DOMSubtreeModified', function () {
  var $this = this;
  var updateHeight = function () {
    var Height = $($this).height();
    console.log(Height);
  };
  setTimeout(updateHeight, 2000);
});

Answer 10

বেশ বেসিক কিন্তু কাজ করে:

function dynamicHeight() {
    var height = jQuery('').height();
    jQuery('.edito-wrapper').css('height', editoHeight);
}
editoHeightSize();

jQuery(window).resize(function () {
    editoHeightSize();
});

Comments

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

— ধারককে