How would I use this code:

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

to detect touch screens and hide a set of divs with the same class.

How would I use this code:

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

to detect touch screens and hide a set of divs with the same class.

• javascript
• jquery
• html
• css
• detection

• 3 if (is_touch_device()) $('.myclass').hide(); ? – Denys Séguret Commented Feb 13, 2013 at 15:46
• Do I miss something in your question ? – Denys Séguret Commented Feb 13, 2013 at 15:47
• I think that will work I will try. I am still getting to grips with jquery and I know I should learn more before trying something this ambitious but I learn better by doing then seeing it in action. – Ashley Briscoe Commented Feb 13, 2013 at 15:50
• 2 WARNING: I've been bitten by onmsgesturechange, it's available on IE10 even if the device is NOT a touch device, it can't be trusted to reliably determine if a device is touch or not! – Rob Commented Jul 9, 2013 at 12:21
• 1 just check 'ontouchend' in document. – vsync Commented Feb 19, 2014 at 16:44

2 Answers 2

You would simply call the function and use basic logic.

if (is_touch_device()) {
  $('.yourclass').hide();
}

It would be implemented like this:

window.onload=function(){
  if (is_touch_device()){
    var divs=document.getElementsByClassName( 'yourclassname');
    for (var i=0; i<divs.length; i++)
      divs[i].style.display='none'; 
  }
}

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