<!--
/*************************************************************
* 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;'>
<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;'>
<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;'>
</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> |
Stumble It!
Bookmark in del.icio.us
Download
