Input
Touch gestures
Touch gestures can be managed thanks to the Hammer.js library. Here is an example:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/input/touch_gestures/try" />
<title>Input: Touch gestures - Example</title>
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="messages">Loading...</div>
<!-- Using Hammer.js library internally: https://hammerjs.github.io/ -->
<div id="container">
<div id="my_element">Pinch me and rotate me</div>
You can read more about it in the <a href="https://hammerjs.github.io/" target="_blank">Hammer.js library</a> web site.
</div>
<br />
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/input/touch_gestures" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; width:100%; height:100%; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
#container { position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#ddaadd; display:none; visibility:hidden; }
#my_element { position:absolute; background-color:#aa0000; border:2px dotted #0000aa; color:#ccccff; }
#messages { text-align:center; color:#00aa00; font-weight:bold; }
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
/* Using Hammer.js library internally: https://hammerjs.github.io/ */
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Managing some touch gestures:
//* Hammer.js source: https://hammerjs.github.io/ and https://github.com/hammerjs/hammer.js
//NOTE: Check Hammer.js documentation for more information.
var HammerJS = CB_Touch.getHammerJSObject();
if (HammerJS === null)
{
var message = "The 'HammerJS' object (used by the Hammer.js library) could not be found. Probably not supported.";
CB_Elements.insertContentById("messages", message);
CB_console(message);
return;
}
var element = CB_Elements.id("my_element");
if (element === null)
{
var message = "The 'my_element' element could not be found!";
CB_Elements.insertContentById("messages", message);
CB_console(message);
return;
}
CB_console("Setting touch gestures for 'my_element' using Hammer.js library...");
element.style.width = (CB_Screen.getWindowWidth() / 4) + "px";
element.style.height = (CB_Screen.getWindowHeight() / 4) + "px";
element.style.left = (parseInt(element.style.width) * 1.5) + "px";
element.style.top = (parseInt(element.style.height) * 1.5) + "px";
var mananger = new HammerJS.Manager(CB_Elements.id("container") || document.body);
var pinch = new HammerJS.Pinch();
var rotate = new HammerJS.Rotate();
pinch.recognizeWith(rotate);
mananger.add([pinch, rotate]);
//Function when rotating:
mananger.on
(
"rotate",
function(e)
{
element.style.transform = "rotate(" + Math.round(e.rotation) + "deg)";
}
);
//Function when pinching:
mananger.on
(
"pinchin pinchout",
function(e)
{
var elementWidth = parseInt(element.style.width);
var elementHeight = parseInt(element.style.height);
element.style.backgroundColor = (element.style.backgroundColor === "orange") ? "purple" : "orange";
if (e.type === "pinchout" && elementWidth < 500 && elementHeight < 500)
{
element.style.width = (elementWidth + (e.distance * 0.05)) + "px";
element.style.height = (elementHeight + (e.distance * 0.05)) + "px";
}
else //"pinchin":
{
if (elementWidth > 50 && elementHeight > 50)
{
element.style.width = (elementWidth - (e.distance * 0.05)) + "px";
element.style.height = (elementHeight - (e.distance * 0.05)) + "px";
}
}
}
);
//Hides any messages:
CB_Elements.hideById("messages");
//Shows the container (with the element that can be managed with gestures):
CB_Elements.showById("container");
}
Read the documentation of the Hammer.js library to get more information about how to use it.
You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.