reponsive or device Conditionally load JavaScript file

Question

I am looking to try this code for my project its not working for me

var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);

Conditionally load JavaScript file

not working link

http://itracktraining.com/sam.html

New Changes, same above link for demo

this seems not working i trying to call multiple jqueryfile and a function too :)

$(document).ready(function() {
                var width = $(document).width()
    var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (width > 800)
{
    js.src = "js/jquery.slimscroll.min.js";
    js.src = "js/jquery.fullPage.js";
    js.src = "js/examples.js";
    $('#fullpage').fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage'],
                sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
                css3: true
            });
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);

});

OptimusCrime · Accepted Answer · 2015-07-13T12:12:28.283

1

In your code, the element head is not defined. You need to add the line:

var head = document.getElementsByTagName('head')[0];

At the beginning of your script.

Also, it looks like you are missing the screen variable. You can swap screen.width with window.innerWidth.

Complete, working example at jsfiddle.net/syLzb4yL.

Answer to edited question can be found here.

edited Jul 13 '15 at 12:12

answered Jul 13 '15 at 11:26

OptimusCrime

14,662
13
58
96

that script will show only if we inspect or just view source – Aryan Jul 13 '15 at 11:34
What do you mean? You can see that the script indeed checks the width of the screen and debugs out `narrow` or `wide`. The scripts are not present (there are no `js/mobile_version.js` or `js/jquery_computer.js`) so of course that will not work. – OptimusCrime Jul 13 '15 at 11:36
i have updated the question kindly check same question – Aryan Jul 13 '15 at 11:46
i trying to call multiple jqueryfile and a function too :) – Aryan Jul 13 '15 at 11:49
No, because you use one instance of `js` and try to append three scripts to it. That will not work. You overwrite `src` every time. Why not just include these scripts with `` – OptimusCrime Jul 13 '15 at 11:49
i don't know how to bring that jquery file, a function with mobile condition.. iam confused with try many examples – Aryan Jul 13 '15 at 11:52
1

[Here is the entire output](http://pastebin.com/AgVGniJT) that should work. Mind that this is not tested, but it does answer the question as originally asked. If this does not work I suggest closing this question and asking a more detailed one where you express what you want in greater detail. – OptimusCrime Jul 13 '15 at 11:55

reponsive or device Conditionally load JavaScript file

1 Answers1