CODEWITHSUNDEEP
javascriptmedia-queriesaddeventlistener
vlovystack
vlovystack

Reputation: 703

Execute javascript code ONLY if width is higher than x pixels

I'm trying to execute a javascript function ONLY if the width is bigger than 1200pixels.

The code I need to execute works, but the check for the screen size doesn't:

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
            <<<some other code that's working>>>
    }
}, true);

All this code is in a javascript file outside the document.ready function.

EDIT: When you drag your screen window around, it isn't working like normal css queries. This is the problem. It works if you refresh your page, but if you change the width of your browser, then it doesn't adjust, it needs the reload right now.

That's my issue.

Upvotes: 1

Views: 4574

Answers (3)

Jivings
Jivings

Reputation: 23250

You need to add an else clause to get the behaviour you want. Otherwise the resize event will only work going one way, as you described.

window.addEventListener("resize", function(){
    // fire when above 1203
    if (document.documentElement.clientWidth > 1203) {
      console.log('Greater!');
    }
    // fire when below 1203
    else {
      console.log('Smaller!');
    }
}, true);

Here's a link to the fixed jsfiddle that planet260 wrote: http://jsfiddle.net/4dnemh2j/4/

Here's my example again: https://jsfiddle.net/9n5hmpua

Upvotes: 3

planet260
planet260

Reputation: 1454

You can use jQuery to achieve this

$( window ).resize(function() {
  console.log($( window ).width());
  var windowwidth = $( window ).width();
  if (windowwidth > 500) {
      console.log("Greater than 500");
     /*Do your work here*/ 
  }
});

Upvotes: 0

Chris Charles
Chris Charles

Reputation: 4446

The problem is the true you're passing to addEventListener.

See the useCapture section here: EventTarget.addEventListener

Events which are bubbling upward through the tree will not trigger a listener designated to use capture

So you want:

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
        <<<some other code that's working>>>
    }
}, false);  <----change here

Upvotes: 0

Related Questions