Calling a function in javascript when the height of a div reaches certain pixel

Question

I would like to run a function that would run when the box width reaches certain pixel, lets say 80px. lets say I want to alert "hello" and console.log "hey". How would i be able to accomplish this? And I can't use jQuery, so just vanilla Javascript please.

Edit: I wonder if I could insert something like a function that runs the alert or console log when redbox.style.width == "80px"?

const redbox = document.querySelector("#redbox");
const coolbutton = document.querySelector("#coolbutton");

coolbutton.addEventListener("click", animator);
function animator() {
  if (redbox.style.width == "50px") {
   redbox.style.width = "100px";
   redbox.style.transition = "2s";
  } 
  else {
   redbox.style.width = "50px";
   redbox.style.transition = "2s";
  }
}

#redbox {
  background: red;
  height: 50px;
  width: 50px;
}

<div id="redbox"></div>
<button id="coolbutton">click</button>

*80% of what*? Do you wish to show down or change animation for last 20%? — Rajesh, Jan 23 '18 at 04:49
This might help [detect resize of div](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed) — Kaushik C, Jan 23 '18 at 04:51
You can use `.resize()` of jQuery. https://api.jquery.com/resize/ — Waleed Iqbal, Jan 23 '18 at 04:51
I meant to say 80px sorry. And I cant use jQuery so it hast to be plain javascript. — craftdeer, Jan 23 '18 at 04:53

simon · Accepted Answer · 2018-01-23T23:24:39.260

To sum up, there is no event handler (natively) for during an animation transition. There is however one for transition end that would work natively with your code, but since you want to grab its width during the middle, without jquery, that complicates things.

I have little experience with request animation frame but for now, after tinkering a bit with your code, here is a structure using a good old fashioned setinterval timer that should get you started with what you want to do.

const redbox = document.querySelector("#redbox");
redbox.style.width = `50px`;
const coolbutton = document.querySelector("#coolbutton");
coolbutton.addEventListener("click", animator);
let toggle = true;
function animator() {
  let poller = setInterval(function(){
    let w = parseInt(redbox.style.width, 10);
    toggle ? w++ : w--;
    redbox.style.width = w + 'px';
    if (w == 100 || w == 50){          
      toggle = !toggle;
      clearInterval(poller);
    }
    if (w == 80)
      log(redbox.style.width);
  }, 20);
} 

function log(args){
  console.log(args);
}

fiddlers: https://jsfiddle.net/2mkxx6f0/4/

SF..MJ · Answer 2 · 2018-01-23T06:05:16.023

-1

please check the code it is not for 80% it is for >80px

var redbox = document.querySelector("#redbox");
var coolbutton = document.querySelector("#coolbutton");
coolbutton.addEventListener("click", animator);
function animator() {
var a= Number("50");// increasing by 50 px
var b=Number(redbox.style.width.slice(0, -2));

  if (b <= 80) {
  var c=b+a+"px";
  
   redbox.style.width =c; 
   redbox.style.transition = "2s";
  } 
  else {
   alert("hii")
  }
}

#redbox {
  background: red;
  height: 50px;
  width: 50px;
}

<body>
<div id="redbox"></div>
<button id="coolbutton">click</button>
</body>

edited Jan 23 '18 at 06:05

answered Jan 23 '18 at 05:23

SF..MJ

862
8
19

From where did `1000px` came? – Rajesh Jan 23 '18 at 05:41
you can considor it as 80px , `when the box width reaches certain pixel, lets say 80px. lets say I want to alert "hello" and console.log "hey".` – SF..MJ Jan 23 '18 at 05:59
why downvote ,just check @craftdeer and let him decide is it correct or not? – SF..MJ Jan 23 '18 at 06:02

Calling a function in javascript when the height of a div reaches certain pixel

2 Answers2