How to detect window resize and then change the javascript file being added to the header?

Question

I have this jQuery to detect the screen size and then append a file to the header based on the sceen size.

var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
  scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
  scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

I have tried to use $(window).resize() with it but I have been unable to remove the file that was originally added before the resize is triggered.

I have a JSFIDDLE for you to change my code on and as you can see it will add the js file based on the screen size but I would like it to change if the screen does too.

Thanks for your time!

mcphersonjr · Accepted Answer · 2015-01-30 20:13:42Z

1

Here is what I use:

$(window).bind('resize', function(event) {      
//Whatever you want to run here     

});

Just set a variable for you window width and height and check what they are at inside of this function.

As for changing your javascript file when the screen is resized with out reloading the whole page... I don't think that is possible. A work around might be to import all the javascript files into one file and just run different functions that overwrite any changes that the last javascript function made.

This obviously uses jQuery though.

edited Jan 30, 2015 at 20:13

answered Apr 28, 2014 at 20:01

mcphersonjr

76312 silver badges35 bronze badges

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

6 Comments

Amir5000 Over a year ago

this is good but same issue with how it will add the file multiple times and also not deleting the duplicates. So you think there isn't a way other than reloading the page?

mcphersonjr Over a year ago

You can append the html document with a new script file, but you will have to run a function on that file. So rather than messing with that, I would just have one master file that has all your other files included and just run a function. What is the end result of changing out the javascript files?

Amir5000 Over a year ago

well I have some jQuery carousels that I want on desktop only, and for mobile I have some touch events that I don't want loaded on larger screens. and a few things like that.

mcphersonjr Over a year ago

If you just want to add and remove the javascript files from the html document, just append the src attribute of the script tags inside that function. But this will not run the new file. You would have to run the function some how. That is why I suggest using a master file. Then you just don't have to mess with changing the script src... just call a new function.

Amir5000 Over a year ago

yeah I understand what you are saying, thought I would try my luck with what I have already.

|

danny slade · Accepted Answer · 2014-04-28 19:55:01Z

0

Add your code into the callback function for the resize event.

$(window).resize(function(elem){
    var scriptSrc = '';
    var widowWidth = $(window).width();
    if(widowWidth >= 1024)
      scriptSrc = '/js/desktop.js';
    if((widowWidth <= 1023) && (widowWidth >= 768))
      scriptSrc = '/js/tablet.js';
    else if(widowWidth <= 767)
      scriptSrc = '/js/mobile.js';
    var script = document.createElement('script');
    script.src = scriptSrc;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
});

The callback function will be called when the window is resized. However, the event will be fired for every pixel that the window changes in size, so be prepared for that

answered Apr 28, 2014 at 19:55

danny slade

591 gold badge1 silver badge6 bronze badges

2 Comments

Amir5000 Over a year ago

Yeah that's what I tried before and like I said I was unable to delete the one that is being loaded and only add in the new one once. is there no way to not have it do that?

danny slade Over a year ago

you caould try using the .remove() method. I found this link that could help - stackoverflow.com/questions/8503560/…

Dev Mehta · Accepted Answer · 2014-04-28 19:55:06Z

0

If I understand your question correctly you want to listen to the window resize event

var onsize = function() {
    var W = $(window).width();
    if(W >= 500) {
      test.html('/js/desktop.js');
    } else if(W >= 300) {
      test.html('/js/tablet.js');
    } else { //if(widowWidth <= 767)
      test.html('/js/mobile.js');
    }
};

I added a div to display the output.

$(window).resize(onsize);

Here's the fiddle http://jsfiddle.net/devm33/aC8Ez/

answered Apr 28, 2014 at 19:55

Dev Mehta

1111 silver badge3 bronze badges

1 Comment

Amir5000 Over a year ago

I want it to when the page loads to load one of the js files based on the window size and then if the window is resized again after the page loads to keep checking on the size and then add in the file and delete the other accordingly

Collectives™ on Stack Overflow

How to detect window resize and then change the javascript file being added to the header?

3 Answers 3

6 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related