I'm working on making a website responsive. For now the website will have to have two banners- one for desktop and one fro the mobile site.

I've got everything in place with media querys etc. however I've now noticed that something in the desktop banner javascript file is causing the mobile banner javascript to not function properly.

So I figured I could try to only load the desktop banner js file only if the screen is above a certain size, let's say 1000px.

I'm not sure if that's possible though and how? Or is there some other way to cancel out the desktop js file when the mobile banner is displayed?

Any suggestions are appreciated!

I'm working on making a website responsive. For now the website will have to have two banners- one for desktop and one fro the mobile site.

I've got everything in place with media querys etc. however I've now noticed that something in the desktop banner javascript file is causing the mobile banner javascript to not function properly.

So I figured I could try to only load the desktop banner js file only if the screen is above a certain size, let's say 1000px.

I'm not sure if that's possible though and how? Or is there some other way to cancel out the desktop js file when the mobile banner is displayed?

Any suggestions are appreciated!

• javascript
• html
• responsive-design

• 1 Why not use media queries for the image instead? – MinusFour Commented Jan 20, 2016 at 14:29
• This is very unproductive. Try to do media queries (99% of the issues can be solved by this) or if you really want to do this, try using the height and width window properties in JavaScript to run pieces/functions of your code. Use this as a reference w3schools./jsref/prop_win_innerheight.asp – CodeTrooper Commented Jan 20, 2016 at 14:29
• DO NOT selectively load JavaScript based on screen size. You'd cause network thrashing when resizing a browser, and there is no way the savings of removing the few bytes of JS to a separate file is worth it. – Evan Davis Commented Jan 20, 2016 at 14:37
• I would heavily remend you finding why desktop banner js file is breaking the mobile banner js file. Anything beyond seems hacky including my answer below – daghan Commented Jan 20, 2016 at 14:50

5 Answers 5

if (window.innerWidth < 1000) {
   ... mobile banner code
} else {
   ... desktop banner code
}

And if user resizes the window, you are on your own :)

You can use screen.width in Javascript

if (screen.width > 1000) {
//load file for screen width 1000 and up here
} else {
//load file for screen width under 1000 here
}

This loads only one of the two files, depending on screen size.

If you are trying to load a JavaScript file, you can detect the user agent with navigator.userAgent and load a different script for mobile and other users:

function isMobile() {
  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}


function loadScript(url) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}

if (isMobile()) {
  loadScript("MOBILE-script.js");
  console.log("mobile script");
} else {
  loadScript("DESKTOP-script.js");
  console.log("desktop script");
}

You could set up flags depending on the window size, everything dimensions information you will need is in the snippet above.

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

Keep in mind that you may need to bind script loading on a resize event handler. I highly remend using a debouncing pipe function in order to handle resizing more efficiently.

Afterwards you can load scripts using some utility functions as:

function loadScript(url, callback) {
  // Adding the script tag to the head as suggested before
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Then bind the event to the callback function.
  // There are several events for cross browser patibility.
  script.onreadystatechange = callback;
  script.onload = callback;

  // Fire the loading
  head.appendChild(script);
}

if (x > 1000) {
  //desktop
  loadScript("desktop.js", myPrettyCode);
} else {
  //mobile tablet
    loadScript("mobile.js", myPrettyCode);
}

Keep in mind that utility libraries like Modernizr have some useful feature detection helpers that may help you. David Walsh has also provided a quite smart way to detecting screen sizes. Also , unloading a script is pretty harsh here is a relevant StackOverflow question

You may also take a look at this question as it may be helpful as well as taking a look at require.js , it's an efficient JavaScript file and module loader.

Screen size can be retrieved using

screen.availWidth // 1920
screen.availHeight // 1112