Detect touch

In this example below you will see how to do a Detect touch with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by microcipcip, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright microcipcip ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Detect touch</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Detect Touch</h1>
<p>Enable touch (for example with Chrome) to see the change in the H1 background color!</p>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/microcipcip/detect-touch-JYQxwM */
html, body {
  height: 100%;
  padding: 10px;
  background: #000000;
  color: #ffffff;
}

h1 {
  color: #fff;
}
html.-no-touch h1 {
  background: green;
}
html.-is-touch h1 {
  background: purple;
}


/*Downloaded from https://www.codeseek.co/microcipcip/detect-touch-JYQxwM */
(function($) {
    'use strict';

    var $html = $('html'),
        detectTouch = function () {
            $html.addClass('-is-touch');
            $html.off('touchend', detectTouch);
        };
    
    // just for the demo
    $html.addClass('no-js -no-touch');
    
    // remove the '-no-touch' class when browsing with touch
    $html.on('touchend', detectTouch);
})(jQuery);

Comments