How to disable this part of my javascript on mobile devices?

Question

Alright, so I am trying to port a parallax website to Wordpress and it has given me nothing but headaches so far. Now I finally have it all working on desktop browsers but on mobile browsers it is producing all sorts of issues. If someone could tell me how to disable this part of my script(which uses Stellar and iScroll) from displaying on mobile browsers, or better yet, maybe you see why I am having so many issues. Either way I would be extremely grateful for some advice since jQuery/Javascript is pretty foreign to me. TIA!

//*************************************************************************** STELLER JS SCROLL
var STELLARJS = {
    init: function() {
        var self = this;
        jQuery(function(){
            //self.$sections = $('div.section').each(function(index){
                //$(this).data('sectionIndex', index);
            //});

            //self.handleEvents();

            //self.debugOffsets.init();
            //self.debugOffsetParents.init();

            self.initParallax();
        });
    },

    initParallax: function() {
        var isHomePage = jQuery('body').hasClass('home'),
            $main = jQuery('div.main');

        if (isHomePage) {
            //$main.width($main.width() + $(window).width() - 1000);
        }

        //if ($.browser.msie) {
        //  $('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
        //}


        if (isMobileWebkit) {

            iScrollInstance = new iScroll('scroller');

              jQuery('#wrapper').stellar({
                parallaxBackgrounds:false,
                scrollProperty: 'transform',
                positionProperty: 'customPositionTransform',
                hideDistantElements: false,
                horizontalScrolling: false,
                verticalOffset: verticalOffset
              });

              console.log('isMobileWebkit'+iScrollInstance);
        } else {
            console.log('is not MobileWebkit');
             jQuery(window).stellar({
                /*
                    scrollProperty: 'scroll',
                    positionProperty: 'position',
                    horizontalScrolling: true,
                    verticalScrolling: true,
                    horizontalOffset: 0,
                    verticalOffset: 0,
                    responsive: false,
                    parallaxBackgrounds: true,
                    parallaxElements: true,
                    hideDistantElements: true,
                    hideElement: function($elem) { $elem.hide(); },
                    showElement: function($elem) { $elem.show(); }
                */
                positionProperty: 'customPositionTransform',
                horizontalScrolling: false,
                verticalOffset: verticalOffset,
                horizontalOffset: 0,
                verticalScrolling: true,
                hideDistantElements: false,

            });
        }


    },

    handleEvents: function() {
        var self = this,
            //Debounce function from Underscore.js
            debounce = function(func, wait) {
                console.log('debounce');
                var timeout;
                return function() {
                    var context = this, args = arguments;
                    var later = function() {
                        timeout = null;
                        func.apply(context, args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                }
            },
            handleScroll = function() {
                console.log('handleScroll');
                var scrollLeft = $(window).scrollLeft(),
                    sectionIndex = Math.round((scrollLeft - 40) / self.$sections.first().outerWidth()),
                    $activeSection = self.$sections.eq(sectionIndex);

                if ($activeSection.length === 0) {
                    $activeSection = self.$sections.last();
                }

                if ($activeSection.length === 0) return;

                jQuery(window).unbind('scroll.stellarsite');

                if (scrollLeft === 0) {
                    jQuery(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                } else {
                    jQuery('html,body').animate({
                        scrollLeft: $activeSection.offset().left - 40
                    }, 600, 'easeInOutExpo', function() {
                        setTimeout(function(){
                            jQuery(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                        }, 10);
                    });
                }

                jQuery(window).bind('mousewheel', function(){
                    jQuery('html,body').stop(true, true);
                });

                jQuery(document).bind('keydown', function(e){
                    var key = e.which;

                    if (key === 37 || key === 39) {
                        $('html,body').stop(true, true);
                    }
                });
            };

        if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
            jQuery(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
        }
    },
    debugOffsets: {
        init: function() {
            this.$debug = jQuery('#debugOffsets');

            //if (window.location.href.indexOf('#show-offsets') > -1) {
                this.show();
            //}
        },
        show: function() {
            this.$debug.fadeIn();
            jQuery('body').addClass('debugOffsets');
            jQuery('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
        },
        hide: function() {
            this.debug.fadeOut;
            jQuery('body').removeClass('debugOffsets');
        }
    },
    debugOffsetParents: {
        init: function() {
            this.$debug = jQuery('#debugOffsets');
            this.$debug.fadeIn();
            console.log('show');
            jQuery('body').addClass('debugOffsetParents');
            jQuery('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
            jQuery('h2').each(function(){
                jQuery(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
            });
            jQuery('body').addClass('debug');   
        }
    }
};

Answer 1

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

if (!isMobile()) {
 //if its not mobile then start script otherwise turn it off (just place the script    under this comment
}

Answer 2

Checking by UA is not the greatest idea, since there are new mobile devices/kindles/blackberries/Firefox-os-phones/Ubuntu-phones etc. that are created every once in awhile. Any list of device useragents is going to be outdated fairly soon.

If you're looking to turn off certain effects on touch-based devices, this may be what you want: How to check browser for touchstart support using JS/jQuery?

Basically you can use

if (document.createTouch) {
    //mobile code
} else {
    //desktop, non-touch code
}

Answer 3

i have found this code here that detects if it is a mobile in javascript

window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }

so you can use this function to detect a mobile , if so add the code within the (isMobileWebkit) which i thinks disable the parallax effect , so the code could look like this

if(window.mobilecheck())
{
           iScrollInstance = new iScroll('scroller');

              jQuery('#wrapper').stellar({
                parallaxBackgrounds:false,
                scrollProperty: 'transform',
                positionProperty: 'customPositionTransform',
                hideDistantElements: false,
                horizontalScrolling: false,
                verticalOffset: verticalOffset
              });
}

this is not tested i hope it works