दिव्य तत्व का आकार बदलें

Question 1

jQuery के पास resize()ईवेंट है, लेकिन यह सिर्फ विंडो के साथ काम करता है।

jQuery(window).resize(function() { /* What ever */ });

यह ठीक काम करता है! लेकिन जब मैं ईवेंट को एक दिव्य तत्व में जोड़ना चाहता हूं तो यह काम नहीं करता है।

उदाहरण के लिए

jQuery('div').resize(function() { /* What ever */ });

मैं एक कॉलबैक शुरू करना चाहता हूं जब एक div-element का आकार बदल गया है। मैं एक resizable - घटना शुरू नहीं करना चाहता - एक घटना की जाँच करने के लिए अगर एक div - तत्व का आकार बदल गया है।

क्या ऐसा करने का कोई समाधान है?

Question 2

DIVकिसी resizeईवेंट को फायर नहीं करता है , इसलिए आप वही नहीं कर पाएंगे जो आपने कोडित किया है, लेकिन आप DOM प्रॉपर्टीज की निगरानी कर सकते हैं ।

यदि आप वास्तव में रिज़ेज़ेबल्स जैसी किसी चीज़ के साथ काम कर रहे हैं, और यह एक डिव का आकार बदलने का एकमात्र तरीका है, तो आपका रिसाइज़ प्लगइन संभवतः अपने खुद के कॉलबैक को लागू करेगा।

Question 3

मुझे केवल एक ट्रिगर के लिए दिलचस्पी थी जब एक तत्व की चौड़ाई बदल दी गई थी (मैं ऊंचाई के बारे में परवाह नहीं करता), इसलिए मैंने एक jquery घटना बनाई जो वास्तव में ऐसा करती है, एक अदृश्य iframe तत्व का उपयोग करके।

$.event.special.widthChanged = {
  remove: function() {
      $(this).children('iframe.width-changed').remove();
  },
  add: function () {
      var elm = $(this);
      var iframe = elm.children('iframe.width-changed');
      if (!iframe.length) {
          iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
      }
      var oldWidth = elm.width();
      function elmResized() {
          var width = elm.width();
          if (oldWidth != width) {
              elm.trigger('widthChanged', [width, oldWidth]);
              oldWidth = width;
          }
      }

      var timer = 0;
      var ielm = iframe[0];
      (ielm.contentWindow || ielm).onresize = function() {
          clearTimeout(timer);
          timer = setTimeout(elmResized, 20);
      };
  }
}

यह निम्नलिखित सीएसएस की आवश्यकता है:

iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

आप इसे यहां एक्शन में देख सकते हैं जिसमें चौड़ाई फीकी है

Question 4

// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})

(function ($) {

$.fn.sizeChanged = function (handleFunction) {
    var element = this;
    var lastWidth = element.width();
    var lastHeight = element.height();

    setInterval(function () {
        if (lastWidth === element.width()&&lastHeight === element.height())
            return;
        if (typeof (handleFunction) == 'function') {
            handleFunction({ width: lastWidth, height: lastHeight },
                           { width: element.width(), height: element.height() });
            lastWidth = element.width();
            lastHeight = element.height();
        }
    }, 100);


    return element;
};

}(jQuery));

Question 5

मैंने jquery प्लगइन jquery.resize बनाया है, अगर यह मार्सिज़ / सीएसएस-एलिमेंट्स-क्वेरीज़ स्क्रॉल इवेंट, कोई सेटटाइमआउट / सेटइंटरवल के आधार पर समर्थित या समाधान का उपयोग करता है, तो resizeObserver का उपयोग करें।

आप बस इस्तेमाल करें

 jQuery('div').on('resize', function() { /* What ever */ });

या resizer प्लगइन के रूप में

jQuery('div').resizer(function() { /* What ever */ });

मैंने इसे jQuery टर्मिनल के लिए बनाया है और अलग-अलग रेपो और npm पैकेज में निकाला है, लेकिन एक ही समय में मैंने छिपे हुए iframe पर स्विच किया क्योंकि मुझे iframe के अंदर तत्व होने पर resize की समस्या थी। मैं तदनुसार प्लगइन को अपडेट कर सकता हूं। आप jQuery टर्मिनल स्रोत कोड में iframe आधारित पुनर्विक्रेता प्लगइन देख सकते हैं ।

संपादित करें : नया संस्करण iframe का उपयोग करता है और इसे विंडो ऑब्जेक्ट पर आकार देता है क्योंकि पिछले समाधान तब काम नहीं कर रहा था जब पेज iframe के अंदर था।

EDIT2 : क्योंकि फ़ॉलबैक का उपयोग iframe आप इसे प्रपत्र नियंत्रण या छवियों के साथ उपयोग नहीं कर सकते हैं, आपको इसे रैपर तत्व में जोड़ना होगा।

EDIT3: : वहाँ बेहतर का उपयोग कर हल है resizeObserver polyfill कि उपयोग उत्परिवर्तन पर्यवेक्षक (यदि resizeObserver समर्थित नहीं है) और काम IE में भी। इसमें टाइपस्क्रिप्ट टाइपिंग भी है।

Question 6

इस बारे में क्या:

divH = divW = 0;
jQuery(document).ready(function(){
    divW = jQuery("div").width();
    divH = jQuery("div").height();
});
function checkResize(){
    var w = jQuery("div").width();
    var h = jQuery("div").height();
    if (w != divW || h != divH) {
        /*what ever*/
        divH = h;
        divW = w;
    }
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);

BTW मैं आपको div में एक आईडी जोड़ने और $ ("div") को $ ("# yourid") में बदलने का सुझाव देता हूं, यह तेजी से होने वाला है, और बाद में जब आप अन्य div को जोड़ते हैं तो यह नहीं टूटेगा

Question 7

वहाँ एक बहुत अच्छा, प्रयोग करने में आसान, हल्का है (मूल ब्राउज़र घटनाओं का पता लगाने के लिए उपयोग करता है) दोनों मूल जावास्क्रिप्ट के लिए प्लगइन और jQuery के लिए जो इस साल जारी किया गया था। यह पूरी तरह से प्रदर्शन करता है:

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

Question 8

केवल विंडो ही समर्थित है, लेकिन आप इसके लिए एक प्लगइन का उपयोग कर सकते हैं: http://benalman.com/projects/jquery-resize-bugin/

Question 9

एक गूगल मैप्स इंटीग्रेशन के लिए मैं यह पता लगाने का एक तरीका खोज रहा था कि कब डिव का आकार बदल गया है। चूँकि गूगल मैप्स को हमेशा उचित आयामों की आवश्यकता होती है जैसे कि चौड़ाई और ऊँचाई ठीक से प्रस्तुत करने के लिए।

मैं जिस समाधान के साथ आया था वह एक घटना का एक प्रतिनिधिमंडल है, मेरे मामले में एक टैब क्लिक। यह निश्चित रूप से एक खिड़की का आकार बदल सकता है, विचार समान है:

if (parent.is(':visible')) {
    w = parent.outerWidth(false);
    h = w * mapRatio /*9/16*/;
    this.map.css({ width: w, height: h });
} else {
    this.map.closest('.tab').one('click', function() {
        this.activate();
    }.bind(this));
}

this.mapइस मामले में मेरा नक्शा div है। चूंकि मेरे माता-पिता लोड पर अदृश्य हैं, इसलिए गणना की गई चौड़ाई और ऊंचाई 0 है या मेल नहीं खाते हैं। उपयोग करके .bind(this)मैं स्क्रिप्ट निष्पादन ( this.activate) को एक घटना ( click) में सौंप सकता हूं ।

अब मुझे विश्वास है कि आकार बदलने वाली घटनाओं के लिए भी यही बात लागू होती है।

$(window).one('resize', function() {
    this.div.css({ /*whatever*/ });
}.bind(this));

आशा है कि यह किसी को भी मदद करता है!

Question 10

बस इस फंक को आज़माएं (यह न केवल डिव के लिए काम कर सकता है):

function resized(elem, func = function(){}, args = []){
    elem = jQuery(elem);
    func = func.bind(elem);
    var h = -1, w = -1;
    setInterval(function(){
        if (elem.height() != h || elem.width() != w){
            h = elem.height();
            w = elem.width();
            func.apply(null, args);
        }
    }, 100);
}

आप इसे इस तरह से उपयोग कर सकते हैं

resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){
    console.log(a);
    console.log(this); //for accessing the jQuery element you passed
}, /*callback arguments in array*/ ['I\'m the first arg named "a"!']);

अद्यतन: आप अधिक प्रगतिशील द्रष्टा का उपयोग कर सकते हैं (यह किसी भी ऑब्जेक्ट के लिए काम कर सकता है, न केवल डोम तत्व)

function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){
        func = func.bind(elem);
        var currentVal = {call: {}, std: {}};
        $.each(propsToBeChanged, (property, needCall)=>{
            needCall = needCall ? 'call' : 'std';
            currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false
        });
        setInterval(function(){
            $.each(propsToBeChanged, (property, needCall)=>{
                try{
                    var currVal = needCall ? elem[property]() : elem[property];
                } catch (e){ // elem[property] is not a function anymore
                    var currVal = elem[property];
                    needCall = false;
                    propsToBeChanged[property] = false;
                }
                needCall = needCall ? 'call' : 'std';
                if (currVal !== currentVal[needCall][property]){
                    currentVal[needCall][property] = currVal;
                    func.apply(null, args);
                }
            });
        }, interval);
    }

कर के देखो:

var b = '2',
    a = {foo: 'bar', ext: ()=>{return b}};
changed(a, {
// prop name || do eval like a function?
    foo:        false,
    ext:        true
}, ()=>{console.log('changed')})

जब आप b, a.foo या a.ext को सीधे बदलते हैं, तो यह हर बार 'परिवर्तित' हो जाएगा

Question 11

आप अपना पाठ या सामग्री बदल सकते हैं या विशेषता स्क्रीन आकार पर निर्भर कर सकते हैं: HTML:

<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>

जावास्क्रिप्ट:

<script>
const changeText = document.querySelector('.change');
function resize() {
  if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
    changeText.textContent="FAQ";
  } else {
    changeText.textContent="Frequently Asked Questions (FAQ)";
  }
}
window.onresize = resize;
</script>

Question 12

यदि आप केवल उस div को आकार देना चाहते हैं जो आपको css शैली में निर्दिष्ट करने की आवश्यकता है। आपको अतिप्रवाह जोड़ने और संपत्ति का आकार बदलने की आवश्यकता है ।

नीचे मेरा कोड स्निपेट है

#div1 {
        width: 90%;
        height: 350px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        overflow: auto;
        resize: both;
    }

<div id="div1">

</div>