Grow your CSS skills. Land your dream job.

Ignoring a script if the device has a touch screen (tablet, smart phone etc)

  • # September 11, 2012 at 4:34 am

    Hello, I’m new here – this is my first post.

    I’ve recently created a horizontally scrolling photography website, which uses the “scrollTo” jquery plugin to aid the user in navigating photos (they can still of course use the regular browser scroll bar is they choose to) if the user clicks on a photo the browser automatically scrolls until it is centred.

    However on actual touch screen devices, the script causes quite a few issues, given that the regular touch and drag scrolling implementation of touch screen browsers works so well with the site anyway, I’d really like to be able to detect if the device has a touch screen and disable the javascript.

    Is this possible?

    thanks.

    # September 11, 2012 at 4:41 am

    Alkan, Modernizr is your friend in this situation http://modernizr.com/

    With modernizr you can effectively test for touch capabilities among tons of other stuff and then load a script conditionally.

    That way – if it tests and discovers that a device doesn’t have touch capability, it can load the script.

    I’d write the script for you but I’d really recommend having a good read through modernizr’s info because it will revolutionise how you work and I don’t want to take that away from you.

    # September 11, 2012 at 4:55 am

    Thanks I’ll take a look – looks complicated!

    # September 11, 2012 at 5:14 am

    It appears so at first, but once you have the revelation about how it all works it will blow your mind.

    Basically you can build modernizr as you need it to test for certain things, like touch devices, support for certain types of stuff.

    For example, I use it regularly for testing form capabilities, like support for placeholder=”whatever” or support for built in date pickers.

    Then you add modernizr (as a complete package or just for the tests you want) to your head in your HTML.

    All you have to do next is make some basic rules, like – if modernizr finds that the browser doesn’t have placeholder support do this.

    Great article by Chris on this, specifically about forms but will give you an idea of how it works. http://css-tricks.com/progressively-enhancing-html5-forms/

    # September 14, 2012 at 7:19 am

    Got this working finally, thanks Andy.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".