Icontem

File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Keyboard Shortcut  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Example of things can be achieved using class
Class: Keyboard Shortcut
Invoke functions when multiple keys are pressed
Author: By
Last change:
Date: 9 years ago
Size: 4,514 bytes
 

Contents

Class file image Download
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Keyboard shortcut class provides ability to bind functions
 * to custom key combinations.
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Multiple-key-combinations-using-javascript
**************************************************************/
-->
<html>
<head>
</head>
<body>
<table border='1' cellpadding='5' cellspacing='0' style='width: 600px;'>
<tr>
<td style='width: 300px;'>
<p>Creating input elements:
<ul>
<li>Ctr+Alt+T - for text box</li>
<li>Ctr+Alt+R - for radio</li>
<li>Ctr+Alt+C - for checkbox</li>
<li>Ctr+Alt+B - for button</li>
<li>Ctr+Alt+L - remove last input</li>
<li>Ctr+Alt+D - remove all inputs</li>
</ul>
</p>
</td>
<td style='width: 300px;'>
&nbsp;
<div id='inputs'>
</div>
</td>
</tr>
<tr>
<td>
<p>Maninpulate DIV elements:
<ul>
<li>H - to hide red box</li>
<li>S - to show red box</li>
<li>Arrows - to move redbox around</li>
</ul>
</p>
</td>
<td style='height: 200px; position: relative;'>
<div style='height: 200px; width: 300px; position: relative;'>
&nbsp;
<div id='move' style='width: 100px; height: 100px; position:absolute; background-color: red; top:50px; left:50px;'>
</div>
</div>
</td>
</tr>
<tr>
<td>
<p>And much more:
<ul>
<li>Ctrl + M - go to main page</li>
<li>F12 - close window</li>
</ul>
</p>
</td>
<td style='height: 200px; position: relative;'>
&nbsp;
</td>
</tr>
</table>
<script type="text/javascript" src="./kb_shortcut.packed.js" ></script>
<script type="text/javascript">
var kb = new kb_shortcut();
kb.add(["Ctrl", "Alt", "t"], function(){
	var prnt = document.getElementById("inputs");
	var p = document.createElement("p");
	var i = document.createElement("input");
	i.setAttribute("type", "text");
	p.appendChild(i);
	prnt.appendChild(p);
});
kb.add(["Ctrl", "Alt", "c"], function(){
	var prnt = document.getElementById("inputs");
	var p = document.createElement("p");
	var i = document.createElement("input");
	i.setAttribute("type", "checkbox");
	p.appendChild(i);
	prnt.appendChild(p);
});
kb.add(["Ctrl", "Alt", "r"], function(){
	var prnt = document.getElementById("inputs");
	var p = document.createElement("p");
	var i = document.createElement("input");
	i.setAttribute("type", "radio");
	p.appendChild(i);
	prnt.appendChild(p);
});
kb.add(["Ctrl", "Alt", "b"], function(){
	var prnt = document.getElementById("inputs");
	var p = document.createElement("p");
	var i = document.createElement("input");
	i.setAttribute("type", "button");
	i.setAttribute("value", "button");
	p.appendChild(i);
	prnt.appendChild(p);
});
kb.add(["Ctrl", "Alt", "l"], function(){
	var prnt = document.getElementById("inputs");
	if(prnt.lastChild)
	{
		prnt.removeChild(prnt.lastChild);
	}
});
kb.add(["Ctrl", "Alt", "d"], function(){
	var prnt = document.getElementById("inputs");
	while(prnt.lastChild)
	{
		prnt.removeChild(prnt.lastChild);
	}
});
kb.add("H", function(){
	var prnt = document.getElementById("move").style.display = "none";
});
kb.add("S", function(){
	var prnt = document.getElementById("move").style.display = "block";
});
kb.add("Up", function(){
	var prnt = document.getElementById("move");
	if(parseInt(prnt.style.top) - 10 < 0)
	{
		prnt.style.top = 0 + "px";
	}
	else
	{
		prnt.style.top = (parseInt(prnt.style.top) - 10) + "px";
	}
}, 100);
kb.add("Left", function(){
	var prnt = document.getElementById("move");
	if(parseInt(prnt.style.left) - 10 < 0)
	{
		prnt.style.left = 0 + "px";
	}
	else
	{
		prnt.style.left = (parseInt(prnt.style.left) - 10) + "px";
	}
}, 100);
kb.add("Down", function(){
	var prnt = document.getElementById("move");
	if(parseInt(prnt.style.top) + 10 > 100)
	{
		prnt.style.top = 100 + "px";
	}
	else
	{
		prnt.style.top = (parseInt(prnt.style.top) + 10) + "px";
	}
}, 100);
kb.add("Right", function(){
	var prnt = document.getElementById("move");
	if(parseInt(prnt.style.left) + 10 > 200)
	{
		prnt.style.left = 200 + "px";
	}
	else
	{
		prnt.style.left = (parseInt(prnt.style.left) + 10) + "px";
	}
}, 100);
kb.add(["Ctrl", "M"], function(){
	window.location = "/";
});
kb.add("F12", function(){
	window.close();
});
</script>
</body>
</html>