Apply javascript for mobile or desktop only

Question

I have 2 scripts one that I would like to use for any screen width less than 990px and another for anything greater. These scripts come from a 3rd party and only work on the actual domain (so testing will be hard for anyone else).

Here are the scripts they gave me:

For mobile:

<script>
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
    </script>

For Desktop:

<script>
    (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
    </script>

I have tried this for the desktop view but I know something is off.

For Desktop:

 <script>

        (function(){
        var viewportWidth = $(window).width();
        if (viewportWidth > 900) {
                    var t = document.getElementsByTagName("script")[0];
                    var s = document.createElement("script"); s.async = true;
                    s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                    t.parentNode.insertBefore(s, t);
       } })();
        </script>

Any suggestions?

UPDATE*** Code based on response below

    <script>
if ( $(window).width() > 990) {     
  (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
}
else {
  (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
}
</script>

If the site doesn't use jQuery you can't use a jQuery object such as `$(window)` and neither methods such as `.width()`. [Get the size of the screen, current web page and browser window](http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) has an vanilla javascript method for getting the window size. Please note that this javascript is only executed ONCE and it checks the page width when the page LOADS - if you resize your window afterwards it won't reexecute the code. — h2ooooooo, Apr 04 '16 at 14:28
I added jquery to load, this on in particular but it still does not work. — Matt L, Apr 04 '16 at 14:29

Scimonster · Accepted Answer · 2016-04-04T14:38:32.877

1

If you're not using jQuery, you can't use a jQuery method. Use the following condition instead:

if (window.innerWidth > 900) { // code for large screens

edited Apr 04 '16 at 14:38

answered Apr 04 '16 at 14:28

Scimonster

32,893
9
77
89

I can use Jquery but it's not working based on what I added below the update above. – Matt L Apr 04 '16 at 14:43
Is jQuery loaded before the script? – Scimonster Apr 04 '16 at 14:53

Aeldred · Answer 2 · 2016-04-04T14:24:24.753

0

You can use sompething like this, if you have size screen informations :

if ( $(window).width() > 990) {     
  //Add your javascript for large screens here
}
else {
  //Add your javascript for small screens here
}

EDIT : if really jQuery can't be used, you can try to use :

window.innerWidth

to get the width. But it'll depend too of the resized window...!

edited Apr 04 '16 at 14:24

answered Apr 04 '16 at 14:21

Aeldred

314
2
15

I have tried this but it is not working for some reason. See updated code above based on your response. – Matt L Apr 04 '16 at 14:23

Apply javascript for mobile or desktop only

2 Answers2