Load javascript only for min-width

Question

I want to load a specific javascript only when min-width is > 1000 px. Therefore I wanted to use this code which was mentioned here:

window.addEventListener('resize', function(){
    if(window.innerWidth > 568){
        ...execute script
    }
});

Somehow this doesn't work. Here is my full code block:

         var t = (0, s.qs)(".js-twitter-feed");
         window.addEventListener('resize', function(){
             if(window.innerWidth > 1000){
         if ("undefined" != typeof twitterFeed && t) {
             t.classList.remove("u-hide");
             var r = document.createElement("div");
             r.innerHTML = '<a class="twitter-timeline" data-height="500" href="https://twitter.com/'.concat(twitterFeed, '">Tweets by ').concat(twitterFeed, "</a>"), t.appendChild(r), (0, o.loadScript)("https://platform.twitter.com/widgets.js")
         }
             }
         });

What did I do wrong?

Perhaps Testing media queries programmatically is a bit closer to where you want to focus your research. — Heretic Monkey
– Heretic Monkey, Commented Aug 28, 2020 at 14:29

Andre Nuechter · Accepted Answer · 2020-09-12 09:42:48Z

1

A more performant way would be to use the window.matchMedia method to get a MediaQueryList and attach an eventListener to that.

Here's an example of how you can do that (the callback will be executed when the condition is met on page-load or when you resize the screen from below 300px to 300px or above):

window.addEventListener('DOMContentLoaded', () => {
  const callBack = () => console.log('do stuff');
  const mediaQuery = window.matchMedia('(min-width: 300px)');
  
  if (mediaQuery.matches) callBack();
  
  mediaQuery.addEventListener('change', (event) => {
      if (event.matches) callBack();
  });
});

edited Sep 12, 2020 at 9:42

answered Aug 28, 2020 at 14:32

Andre Nuechter

2,26314 silver badges20 bronze badges

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

2 Comments

Peleke Over a year ago

Thanks, it works as expected but the only issue is that it doesn't work on page load, only after the window width has been changed. How can I add that feature as well?

Andre Nuechter Over a year ago

@Peleke To achieve that you could wrap the code in an event-listener for the DOMContentLoaded event, and in the handler for that, check if the condition is met. I updated my answer to give you an example.

Collectives™ on Stack Overflow

Load javascript only for min-width

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related