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: 12 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>