Activate and deactivate a script through window resizing using JavaScript / jQuery

Question

I have a script myscript.js that should only be active if the window width is 960px or larger.

I have included jQuery as follows.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

And the following is my attempt at loading my script under the desired conditions.

if ($(window).width() < 960) {
    alert('Less than 960');
}
else {
    alert('ok');
    $.getScript( 'myscript.js' );
}

However, this is not achieving the desired results.

So are you saying that if the window width is less than 960, on page load, the "ok" alert happens? — Taplar, Jun 28 '19 at 19:45
Hi @Taplar, yes, the »ok« happens. But the script does not load. — , Jun 28 '19 at 19:48
Did you check if your $.getScript is completing successfully? Check the status codes etc, entirely possibly myscript.js just straight up isn't being retrieved. https://api.jquery.com/jQuery.getScript/ — basic, Jun 28 '19 at 19:50
@Taplar based on his earlier comment it looks like he is hitting the right code block just the $.getScript isn't functioning. — basic, Jun 28 '19 at 19:51
I uploaded the files here: https://drive.google.com/file/d/17acyq_jA3-BYjUFN0v-f94WDlx2ElNCZ/view?usp=sharing Is that allowed? I also put in a second question. It would be soooo great if someone could help me! :) — , Jun 28 '19 at 20:17
Possible duplicate of [How to load or not a JS script (into the head section) based on screen resolution?](https://stackoverflow.com/questions/31848465/how-to-load-or-not-a-js-script-into-the-head-section-based-on-screen-resolutio) — A. Meshu, Jun 28 '19 at 20:40

Vladislav Ladicky · Answer 1 · 2019-06-28T21:13:15.270

0

For these purposes there is window method called matchMedia(). It uses CSS @media rules features. Short example for your situation:

function loadScript (rule) {
  if (rule.matches) {
    alert('ok')
    // append script with plain JS, w/o jQuery
    const head = document.querySelector('head')
    const script = document.createElement('script')
    script.src = 'jquerysplitter.js'
    head.appendChild(script)
  } else {
    alert('Less than 800')
  }
}

const mediaRule = window.matchMedia('(min-width: 800px)')
// for the first time, check resolution immediately 
loadScript(mediaRule)
// for later changes, listen to screen resize event
mediaRule.addListener(loadScript)

edited Jun 28 '19 at 21:13

answered Jun 28 '19 at 20:42

Vladislav Ladicky

2,261
1
11
13

It is alerting something? Ok, or Less than 960? – Vladislav Ladicky Jun 28 '19 at 20:51
I tested my code right now and it works as expected. Problem is in your code, maybe in the myscript.js file? – Vladislav Ladicky Jun 28 '19 at 20:57
Unfortunately no. But: »if (window.innerWidth > 800) { var head = document.getElementsByTagName('head')[0]; var s1 = document.createElement("script"); s1.type = "text/javascript"; s1.src = "jquerysplitter.js"; head.appendChild(s1); }« That solved the problem in a way. It loads the script correctly for the respective window size. But it does not update if the window gets resized. – Jun 28 '19 at 21:03
Then I was right and your code was wrong - it failed to load script. So, I updated my example to load script without jQuery. Try it again, it will react to window resize event. – Vladislav Ladicky Jun 28 '19 at 21:10
I tried it. The script loads, that's great, thank you! But it still does not update automatically. The script should get automatically activated and deactivated through the window resizing. – Jun 28 '19 at 21:17
There is big difference between loading and executing again. My code works - it react to window resize event. But what happen when you resize browser to 800px again? It will load your script again, which will have ... no effect. Or, it will cause an error. Because loading it again is not activation. – Vladislav Ladicky Jun 28 '19 at 21:18
Thank you. But: Do you know a solution to update it automatically through the window resizing? – Jun 28 '19 at 21:21
To answer your question I need to know what are you trying for. What script are you loading, what it is supposed to do, if it is prepared to do it repeatedly, etc. – Vladislav Ladicky Jun 28 '19 at 21:23
I already posted this link: https://drive.google.com/file/d/17acyq_jA3-BYjUFN0v-f94WDlx2ElNCZ/view?usp=sharing – If the window size becomes less wide than 960px, the splitter should be deactivated. I would style the page than only with CSS for mobile devices. – Jun 28 '19 at 21:27
You don't need to load splitter plugin again and again. It will not work. You need to load it once, in header, right after the jQuery. Then use my code and in the if condition, if the rule matches, create splitter object there. And in else block destroy the splitter object with the destroy() method. – Vladislav Ladicky Jun 28 '19 at 21:37
Thanks, that makes sense! But I don't really know how to code that. Could you please update your answer with the solution? – Jun 28 '19 at 21:44

score 0 · Answer 2 · edited Jun 28 '19 at 23:36

0

This should do what you are looking for:

$(window).resize(function(){
  if( $(this).width() <= 960 ) {
  $("#script").html().remove();
  } 
});

edited Jun 28 '19 at 23:36

Dutts

5,781
3
39
61

answered Jun 28 '19 at 22:55

Activate and deactivate a script through window resizing using JavaScript / jQuery

2 Answers2