Getting my function to re-execute whenever the browser window screen size is adjusted

Question

I'm trying to make my simple javascript function (no jQuery) log a message to the console when the browser is resized to over or under 890px. This code works on load, but only states the starting width when the page is loaded:

if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }

But my code below using a window event doesn't work:

if (window.attachEvent) {
  window.attachEvent('onresize', function() {
    if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
})};

Can someone explain what I'm doing wrong here? I'm relatively new to javascript. Thanks for any help here.

score 3 · Accepted Answer · answered Nov 14 '18 at 10:03

3

window.addEventListener('resize', () => {
 if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
});

answered Nov 14 '18 at 10:03

Anjana G

94
3

Nikhil Aggarwal · Answer 2 · 2018-11-14T10:08:17.773

onresize is to be used as an attribute in your html. e.g. <body onresize="resizePage()"></body>

The correct event is resize. Try following

if (window.attachEvent) {
  window.attachEvent('resize', function() {
    if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
 })
}

Please note, you can also consider using addEventListener. For details, refer to another answer here

score 1 · Answer 3 · answered Nov 14 '18 at 10:05

1

try this

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        if (window.innerWidth < 890) {
         console.log('Less than 890px');
        } else {
         console.log('890px or more');
        }
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        if (window.innerWidth < 890) {
         console.log('Less than 890px');
        } else {
         console.log('890px or more');
        }
    }, true);
}
else {
    console.log('browser does not support Javascript event binding');
}

answered Nov 14 '18 at 10:05

Dhaval Pankhaniya

1,996
1
15
26

thanks - I saw this on another page. What does the ', true' part do? – user8758206 Nov 14 '18 at 11:08
[check this](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for more information – Dhaval Pankhaniya Nov 14 '18 at 11:12

shubham · Answer 4 · 2018-11-14T12:23:09.970

0

Just try the following code

    window.onresize = resize;

    function resize()
    {
       if(document.body.clientWidth < 890)
          {
             alert("resize event detected!");
          }
    }

edited Nov 14 '18 at 12:23

answered Nov 14 '18 at 10:16

shubham

11
4

score 0 · Answer 5 · 2018-11-14T13:00:56.523

0

const on = (e, i, t = window) => typeof t.addEventListener === 'function'
    ? t.addEventListener (e, i)
    : t.attachEvent ('on' + e, i)
const test = () => console.log (window.innerWidth < 890 ? '< 890' : '>= 890')

on ('resize', test)

edited Nov 14 '18 at 13:00

answered Nov 14 '18 at 10:34

oma · Answer 6 · 2018-11-14T10:01:48.333

-1

Just use:

window.onresize = function(event) {
    //your code here
};

edited Nov 14 '18 at 10:01

answered Nov 14 '18 at 10:01

oma

1,804
12
13

Why not use `window.attachEvent`? – Justinas Nov 14 '18 at 10:01
@Justinas Why not use `window.addEventListener` – Keith Nov 14 '18 at 10:06
@Keith Still same question... It should be explained instead of `just try this` – Justinas Nov 14 '18 at 11:05

Getting my function to re-execute whenever the browser window screen size is adjusted

6 Answers6