How to call function every time div reaches max-height?

Question

I want to call a function only once every time the div #blinds reach their max-height at 430px, how can I do this?

My Codepen: https://codepen.io/cocotx/pen/YzGBpVJ

window.addEventListener('mousemove', function(event) {
    var blinds = document.getElementById("blinds");

    blinds.style.height = event.clientY +  'px';

  });

This answer might help you https://stackoverflow.com/questions/41424989/javascript-listen-for-attribute-change — Anand Raj, Jan 18 '21 at 03:56
If you only need to do this within your existing event listener, just add the code there: `if ( parseInt(blinds.style.height) >= 430 ) { ... }`. — kmoser, Jan 18 '21 at 03:59
Voting to close as duplicate of [Fire an event when DOM element's computed style changes?](https://stackoverflow.com/questions/13186427/fire-an-event-when-dom-elements-computed-style-changes) — Siguza, Jan 18 '21 at 04:10
Based on [this comment](https://stackoverflow.com/questions/13186427/fire-an-event-when-dom-elements-computed-style-changes#comment23594000_13186427) it's possible to [catch element resizes with some trickery](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). — Siguza, Jan 18 '21 at 04:12

score 0 · Answer 1 · answered Jan 18 '21 at 04:52

0

One polling way is adding the code below in your js if there are other behaviours changing the size of the element. Simply change 400 to the value you want.

var blinds = document.getElementById("blinds");

setInterval(() => {
  let rect = blinds.getBoundingClientRect();
  if (rect.height > 400)
  console.log(" reach 400");
}, 100);

answered Jan 18 '21 at 04:52

Wenbo

1,212
8
17

Thank you Wenbo, I have tried your code but this would keep logging `"reach 400"` for as long as the div is over 430px which is not quite what I'm looking for. I would like to call the function only once every time it reaches 430px. Any idea how I can achieve this? – Coco Yuan Jan 18 '21 at 10:42
You can add a variable to keep the previous height. An example ` var previousHeight = -1; setInterval(() => { let rect = blinds.getBoundingClientRect(); if (rect.height > 400 && rect.height != previousHeight) { console.log(" reach 400"); } previousHeight = rect.height; }, 100); ` Depends on your requirement, you can set the value of `previousHeight` anywhere you want. – Wenbo Jan 19 '21 at 03:44

Cesar Herrera · Answer 2 · 2021-01-18T21:56:11.617

window.addEventListener('mousemove', function(event) {
    var blinds = document.getElementById("blinds");

    blinds.style.height = event.clientY +  'px';
     // i added here the condition
     if(blinds.offsetHeight > 430 /*the value you want*/){
        //call your function
     }
  });

Notice that this doesn't work if you use blinds.style.height instead of blinds.offsetHeight, there's a difference between using these but i im still trying to figure it out. I would suggest to clean your code:

window.addEventListener('mousemove',handler);

function handler(event){
   ...
   if(blinds.offsetHeight >430){
      //call your function
      ...
      //and maybe remove the listener
      window.removeEventListener('mousemove',handler);
   }
};

EDIT: try this code

function hasReachedMax(){
    var styles = getComputedStyle(blinds);
    var borderBottom = styles.borderBottom.split("px")[0]; //this is to get the number of pixels
    var borderTop = styles.borderTop.split("px")[0];
    var maxH = styles.maxHeight.split("px")[0];
    var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;
    return maxH == currentDivSize;
};

function resetTrigger(){
    //the condition to reset your trigger, for example making the div element at least 5 px smaller than maxHeight

    var styles = getComputedStyle(blinds);
    var borderBottom = styles.borderBottom.split("px")[0];
    var borderTop = styles.borderTop.split("px")[0];
    var maxH = styles.maxHeight.split("px")[0];
    var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;

    return maxH-currentDivSize>5;
};

//this should be part of your main code
var trigger = true;
window.addEventListener('mousemove', function(event) {

    var blinds = document.getElementById("blinds");    
    blinds.style.height = event.clientY +  'px';

    if(hasReachedMax()&&trigger){
       //call your function
        console.log("Im called now");
        trigger=false;
    }

    if(resetTrigger()) trigger=true;
        
});

Hi thanks for your help :) I would not want to remove the listener as that would stop div from changing height in respective to the cursor. However when only calling function `if(blinds.offsetHeight >430){//call function}` it would keep firing for as along as the div is over 430 px. Is there a way to only call the function **once** every time it is over 430px? — Coco Yuan, Jan 18 '21 at 10:33
i edited the answer: hope it helps you and it's what are you looking for — Cesar Herrera, Jan 18 '21 at 21:57

How to call function every time div reaches max-height?

2 Answers2