Execute javascript code ONLY if width is higher than x pixels

Question

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.

Code seems to work fine for me... Do you want it to also fire on load? Because this will only work when the window is resized. — Jivings
– Jivings, Commented Feb 19, 2015 at 13:10
@Jivings When I resize my screen it doesn't work atm, I need to manually reload the page in order for the code to check for the screen size. — vlovystack
– vlovystack, Commented Feb 19, 2015 at 13:13
I just found out that it works when I start from mobile size and resize bigger, but when I start desktop and resize smaller, it doesn't re-update without reloading. — vlovystack
– vlovystack, Commented Feb 19, 2015 at 13:18
Here's an example, which works fine in Chrome 40: jsfiddle.net/9n5hmpua/embedded/result — Jivings
– Jivings, Commented Feb 19, 2015 at 13:19

Jivings · Accepted Answer · 2015-02-19 14:45:19Z

3

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

answered Feb 19, 2015 at 14:45

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vlovystack Over a year ago

Thanks for all your trouble, I think maybe my problem is somewhere else then :/ Here's my full code: pastebin.com/W3F9HK8F perhaps you see my mistake?

Chris Charles · Accepted Answer · 2015-02-19 13:16:09Z

0

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

answered Feb 19, 2015 at 13:16

Chris Charles

4,44620 silver badges31 bronze badges

2 Comments

vlovystack Over a year ago

I changed it to false, but the issue is still here :/

Jivings Over a year ago

But the event should be firing directly on window, no bubbling here.

planet260 · Accepted Answer · 2015-02-19 13:25:19Z

0

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*/ 
  }
});

answered Feb 19, 2015 at 13:25

planet260

1,5041 gold badge16 silver badges32 bronze badges

1 Comment

vlovystack Over a year ago

This works, but only when I go from small to big (mobile to desktop)

Collectives™ on Stack Overflow

Execute javascript code ONLY if width is higher than x pixels

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related