title: How to detect window resize and then change the javascript file being added to the header?
body: <p>I have this jQuery to detect the screen size and then append a file to the header based on the sceen size.</p>
  
  <pre><code>var scriptSrc = '';
  var widowWidth = $(window).width();
  if(widowWidth &gt;= 1024)
    scriptSrc = '/js/desktop.js';
  if((widowWidth &lt;= 1023) &amp;&amp; (widowWidth &gt;= 768))
    scriptSrc = '/js/tablet.js';
  else if(widowWidth &lt;= 767)
  scriptSrc = '/js/mobile.js';
  var script = document.createElement('script');
  script.src = scriptSrc;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(script);
  </code></pre>
  
  <p>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. </p>
  
  <p>I have a <a href="http://jsfiddle.net/8wC9W/" rel="nofollow">JSFIDDLE</a> 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.</p>
  
  <p>Thanks for your time! </p>