before i was trying to add this event listener to a div

i was using "scroll", this one works but "resize" is not working

and i can't find out why .

This is my code :

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  content.addEventListener("resize", function(event) {
    now = tabs.clientHeight;

    alert(now + "&" + than);
  }, false);


});

JSFIDDLE DEMO

or is it possible something like this :

$('document').ready(function(){ 

                var content = document.getElementById("scroller");
                var hc , h;

                window.addEventListener('resize', function(event){

                    h = event.clientHeight;
               if(h>510) {
                $(".godown").fadeout("0");
                    }
               if(h<510) {
                content.addEventListener('scroll', function(event){
                 hc =  $('#scroller').scrollTop();






                    if (hc){
                   $(".godown").fadeOut("slow");
                   $(".gotop").fadeIn("slow");
                    }
 if (!hc){
                   $(".godown").fadeIn("slow");
                   $(".gotop").fadeOut("slow");

}
             }, false);
 }
                    }, false);
            });

before i was trying to add this event listener to a div

i was using "scroll", this one works but "resize" is not working

and i can't find out why .

This is my code :

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  content.addEventListener("resize", function(event) {
    now = tabs.clientHeight;

    alert(now + "&" + than);
  }, false);


});

JSFIDDLE DEMO

or is it possible something like this :

$('document').ready(function(){ 

                var content = document.getElementById("scroller");
                var hc , h;

                window.addEventListener('resize', function(event){

                    h = event.clientHeight;
               if(h>510) {
                $(".godown").fadeout("0");
                    }
               if(h<510) {
                content.addEventListener('scroll', function(event){
                 hc =  $('#scroller').scrollTop();






                    if (hc){
                   $(".godown").fadeOut("slow");
                   $(".gotop").fadeIn("slow");
                    }
 if (!hc){
                   $(".godown").fadeIn("slow");
                   $(".gotop").fadeOut("slow");

}
             }, false);
 }
                    }, false);
            });

• javascript
• css
• resize

2 Answers 2

You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});

I have updated your jsfiddle here where you can see it working.

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  window.addEventListener("resize", function(event) {
     now = tabs.clientHeight;
     alert(now + "&" + than);
     }, false);
});

If someone still interested

You can use ResizeObserver

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log('Width', entry.contentRect.width)
  }

  console.log("Size changed");
});

const divEl = document.getElementById('el');

resizeObserver.observe(divEl);

<div id="el">Some Element</div>