0

I'm trying to append a jQuery script with src attributes in my head tag when the window size is less of 580px.

I try with this code:

<script>
    $(document).ready(function(){
        var windowSize = $(window).width();
        if( windowSize > 300 && windowSize < 570) {
            $('head').append('<script src=\"http://code.jquery.com/jquery-1.11.3.min.js\" type="text/javascript\"><\/script>');     
        }
    });
</script>

But it seems it doesn't work. Instead, I put inside the script a simple alert and it works:

<script>
    $(document).ready(function(){
        var windowSize = $(window).width();                 
        if( windowSize > 300 && windowSize < 570) { 
            $('head').append('<script>alert("hi");<\/script>');
        }
    });
</script>

I think the problem is the src="". What am I supposed to do?

johnny 5
  • 16,589
  • 46
  • 82
  • 156
Maki
  • 169
  • 1
  • 4
  • 12
  • 2
    If you use `$(document).ready` it mean that you already have jquery included. – jcubic Nov 30 '15 at 17:42
  • @jcubic yes, I have jQuery included. But I would like to load that script (the one above) only when the window size is less then 580px. Because it conflicts with other script I need for Tablet and Desktop resolution. – Maki Nov 30 '15 at 17:52
  • Your code is working on my machine. – jcubic Nov 30 '15 at 17:57
  • Why on earth would you include different scripts based on window size? That is not the way to go. If I go to your website using a desktop browser but with a non-maximized browser, would I then get the "tablet experience"? What is the actual problem you are trying to solve here? – Anders Marzi Tornblad Dec 01 '15 at 15:23
  • Take a look at this question: http://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery/10113434#10113434 – Anders Marzi Tornblad Dec 01 '15 at 15:23

2 Answers2

1

I see 2 problems with this code:

1) You are using jQuery syntax in your script block to add a reference to load jQuery? This will NOT work unless you already have a copy of jQuery loaded somewhere and are trying to use this code to update it to something else for some reason.

2) I see you are escaping the " like so: \" in your first example. You DO NOT need to do that in jQuery, assuming issue 1 is not really an issue or resolved. jQuery will properly handle double quotes inside a single quote or vice versa.

Cliff Ribaudo
  • 8,509
  • 2
  • 50
  • 74
  • Your code will not work because `` will close the script you're executing. You should use ' – jcubic Nov 30 '15 at 17:55
0

This is old school lession 

function loadScript(url, callback){ 
   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 compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

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

}

Bijeshp009
  • 218
  • 2
  • 9