9

I want to load a particular jQuery script/function in desktop browsers, but not mobile browsers. At the moment, the script runs very slow on mobile browsers, but works fine on desktop browsers.

The function in question is a smooth scrolling plugin, so that when a user clicks a link, the page scrolls smoothly to the anchor on the same page. It is not necessary for it to scroll smoothly on mobile browsers - it is too slow, and often doesn't work.

What would I need to add to my code below to ensure that it is still executed as normal in desktop browsers, but not mobile (particularly iPad/iPhone/iPod)?

  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/lib/jquery/jquery.js"%3E%3C/script%3E'));</script>    
<script src="js/css_browser_selector.js"></script>
<script src="js/src/jquery.smooth-scroll.js">    
</script>
<script src="js/lib/jquery.ba-bbq.js"></script>
<script>
$(document).ready(function() {
  $('a[href*="#"]').live('click', function() {
    if ( this.hash ) {
      $.bbq.pushState( '#/' + this.hash.slice(1) );
      return false;
    }
  });

  $(window).bind('hashchange', function(event) {
    var tgt = location.hash.replace(/^#\/?/,'');
    if ( document.getElementById(tgt) ) {
      $.smoothScroll({scrollTarget: '#' + tgt});
    }
  });

    $(window).trigger('hashchange');
});
 </script>
rossautomatica
  • 459
  • 4
  • 9
  • 25

2 Answers2

11

jsFiddle Demo

Look for the existence of touch, if it is not present then you are more than likely dealing with a desktop:

edit: my original try/catch approach was apparently deprecated ( https://stackoverflow.com/a/4819886/1026459 )

$(document).ready(function() {
 var isDesktop = (function() {
  return !('ontouchstart' in window) // works on most browsers 
  || !('onmsgesturechange' in window); // works on ie10
 })();
 //edit, if you want to use this variable outside of this closure, or later use this:
 window.isDesktop = isDesktop;
 if( isDesktop ){ /* desktop things */ }
});
Community
  • 1
  • 1
Travis J
  • 81,153
  • 41
  • 202
  • 273
  • Travis - thanks for your answer! I just have a further query. I pasted the code where you put the /* desktop things */ comment, but unfortunately, it's now not working on desktop. Is there anything I should be adding/omitting for it to work correctly? – rossautomatica Mar 31 '13 at 18:31
  • @rossautomatica - It must be some other aspect of your code. Try to see if this jsfiddle alerts for you: http://jsfiddle.net/vEdzG/ . If it does then perhaps you changed scope somewhere? It is hard to know what changed without seeing the code. If you tried to access this outside of the closure you may not have scope for the `isDesktop` variable. You can always attach it to the global namespace (see edit). – Travis J Mar 31 '13 at 18:35
  • This all appears to work fine now - I didn't include the $(document).ready(function() part of the code which was present in my original script. I added that, and it all seems to work as intended on both desktop and mobile. Thanks again! – rossautomatica Mar 31 '13 at 19:19
4

You could either try to retrieve the user agent and use that information to decide if you want to include your smooth scroll script. Another solution would be to check for browser width and then decide if you want to include the script or not.

<script>
(function ($) {
   if(is_touch_device()) {
      $.when(
         $.getScript( "/mypath/myscript1.js" ),
         $.getScript( "/mypath/myscript2.js" ),
         $.getScript( "/mypath/myscript3.js" ),
         $.Deferred(function( deferred ){
            $( deferred.resolve );
         })
      ).done(function(){
          //place your code here, the scripts are all loaded
      });
   }
})(jQuery);
</script>

Using when() requires jQuery 1.5 or higher, getScript() was added in 1.0.

EDIT as travis stated you could also look for the touch event. In that case you should use:

function is_touch_device() {
  return !!('ontouchstart' in window) // works on most browsers 
      || !!('onmsgesturechange' in window); // works on ie10
};

Snippet above from the second SO answer here: What's the best way to detect a 'touch screen' device using JavaScript?

Community
  • 1
  • 1
am_
  • 2,378
  • 1
  • 21
  • 28
  • Thanks for your answer. Would that also work for multiple .js files? – rossautomatica Mar 31 '13 at 18:33
  • Yes, that would also work for multiple .js files. Just add those JS files that you want included after your condition (touch/browser width/browser agent) is true. – am_ Mar 31 '13 at 18:37
  • I updated my answer to show how you could add multiple javascript files, if you need to execute any javascript once these are loaded just put it in the done() function. – am_ Mar 31 '13 at 18:54
  • Thanks for your help. Travis's solution worked for me, so I've gone with that, but I appreciate your assistance also! – rossautomatica Mar 31 '13 at 19:20