|
JavaScript - Control Web Page Buttons With Arrow Keys
I have three buttons on a typical page (sample page: http://jimoberst.com/paintings/p18.html). One goes to the previous page, one to the next, and one up a level. Can I link these buttons to 3 arrow keys to simplify navigation for the user? I thought this would be a common task, but I cannot find any canned code on the web to do it. I can code simple html, but don't know javascript. Thanks!
Similar TutorialsDisable Arrow Keys I am creating an online flash gaming site, Aaron's Game Zone: http://azzaboi.weebly.com Some of the games on it use the arrow keys, however IE also uses them to scroll the page. I am learning JavaScript and am trying to write some script to pervent the page scrolling up and down while playing a game. For example... Guardian Rock uses the arrow keys to slide around, at the same time the page scrolls. http://azzaboi.weebly.com/guardianrock.html Here is the script I've tried to write to pervent the scrolling: Code: <script type="text/javascript">
function KeyPressHappened(e){
if (!e) e=window.event;
var key=e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 37 || key == 38 || key == 39 || key == 40)
{
e.preventDefault();
return false;
}
return true;
}
document.onkeypress = KeyPressHappened;
</script>
There's a bug in it or it's not correct, no error message given, could anyone point out the mistake please? hi everybody; i'm using this code to trigger functions with left and right arrow keys.. but they work even if the arrow keys pressed in input boxes.. is there any way to prevent this code to work when user presses the arrow keys in input boxes? Code: document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
geri();
gostergeyaz();
break;
case 39:
ileri();
gostergeyaz();
break;
}
};
I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this? Here's the javascript part of the code: Code: function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}
On http://kisa.ca/cc/ I'm using JQuery's .keydown() to grab arrow keys. http://pastie.org/938572 But my friends using Linux are unable to use arrows to play the game: http://alteeve.com/files/cc.png Halp? I am trying to assign the left and right arrows, but I cannot get the code to work. It would be great to get some help--I am a newbie to coding. <html> <head> <script language="javascript" type="text/javascript"> document.onkeydown=function(e) { var thelink if (e.keyCode==37) thelink='prevlink' else if (e.keyCode==39) thelink='nextlink' else return document.location.href=document.getElementById(thelink).href} </script> </head> <body> <a href="#" onkeydown="return previous(this)" id="prevlink">PREVIOUS</a><br /> <br /> <a href="#" onkeydown="return next(this)" id="nextlink">NEXT</a> </body> </html> Hello. I want to move something with the arrow keys, but some aprt of script is incorrect and it's not working Code: </style>
<script type="text/javascript">
function setup() {
row=0;
col=0;
imageSnake(row,col);
}
</script>
</head>
<body onload="setup()" onkeydown="handleKey(event)">
<center>
<script type="text/JavaScript">
document.write('<table border="1" cellspacing="0" cellpadding="10">')
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
document.write('<td style="border:0"; id="count++";>');
document.write('</td>');
}
document.write('</tr>');
}
function handleKey(e) {
if (e.type == 'keydown' && (e.keyCode == 27 || (e.keyCode >= 37 && e.keyCode <= 40))) {
switch(e.keyCode) {
case 37:
dC = -1;
dR = 0;
break;
}
emptyCell(row,col);
function emptyCell
var id = 'r' + r + 'c' + c;
var cell = document.getElementById(id);
if (cell) cell.innerHTML='';
}
row += dR
col += dC
function insertImage(r,c) {
var id = 'r' + r + 'c' + c;
var cell = document.getElementById(id);
var color = cell.className;
if (color != 'white') {
var image = 'img.gif';
}else{
var image = 'img2.gif';
}
cell.innerHTML = '<img src="" + image + alt="" + color + 'image' />';
}
</script>
Thank you for any noticed error. Hello. My difficulty is in adding Flash control buttons (play, stop, rewind, et cetera) to a window for playing movies. My initial code to create a window for the Shockwave/Flash player worked just fine: Code: <html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
function playMovie(file){
var moviePlayer=window.open('assets/'&&file&&'', '', 'height=480,width=640,resizable=0,status=0,locationbar=0,menubar=0,top=200,left=350');
moviePlayer.document.write('<html><head><title>Movie Player</title>');
moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
moviePlayer.document.write('</head><body"><center>');
moviePlayer.document.write('<object width="640" height="480">');
moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480">');
moviePlayer.document.write('</embed></object>');
moviePlayer.document.write('</center></body></html>');
moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>
</html>
However, I then tried to add some of the material found on this webpage: http://www.permadi.com/tutorial/flashjscommand/ The resulting code: Code: <html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
function playMovie(file){
var moviePlayer=window.open('assets/'&&file&&'', '', 'height=510,width=640,resizable=1,status=0,locationbar=0,menubar=0,top=200,left=350');
moviePlayer.document.write('<html><head><title>Movie Player</title>');
moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
moviePlayer.document.write('<script type="text/javascript">');
moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
moviePlayer.document.write('else{return document.getElementById(file);}}');
moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
moviePlayer.document.write('</script>');
moviePlayer.document.write('</head><body><center>');
moviePlayer.document.write('<object width="640" height="480">');
moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
moviePlayer.document.write('<param name="ShowControls" value="1">');
moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480" pluginspage="http://www.macromedia.com/go/getflashplayer">');
moviePlayer.document.write('</embed></object>');
moviePlayer.document.write('<a href="javascript:movieControlPlay();"><img src="play.png" alt="Play" height="50" width="50" border="0" /></a> ');
moviePlayer.document.write('<a href="javascript:movieControlStop();"><img src="stop.png" alt="Stop" height="50" width="50" border="0" /></a> ');
moviePlayer.document.write('<a href="javascript:movieControlRewind();"><img src="rewind.png" alt="Rewind" height="50" width="50" border="0" /></a>');
moviePlayer.document.write('</center></body></html>');
moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>
</html>
Where the problem is: Code: moviePlayer.document.write('<script type="text/javascript">');
moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
moviePlayer.document.write('else{return document.getElementById(file);}}');
moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
moviePlayer.document.write('</script>');
And: Code: <p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
So it's just the sections dealing with the buttons and handling the buttons in the generated page header. Any help would be appreciated. Thanks. I've seen websites that have things like feedback and an arrow facing up that either take you to the top of the page or opens a form to give your feedback.
Help will be greatly appreciated! Situation: I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END. condition of the frame, fixed width/height, no scroll, no border. Very new to javascript but need this code to make a page work for BIZ. Thank you in advance for anyone kind enough to point the right direction! Hey guys, I've been searching for a few hours and haven't been able to find a code snippet to see if this is available. I'm attempting to pass text from my website to another website that has a form setup on it. I'd like to fill in the pertinent data for my users on the page that I load for them. I cannot make any changes to the receiving page as it is run by another company. I've pasted some of the code that is available on the receiving form. Thanks for any help. Code: <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<input name="txtBranch" type="text" maxlength="4" id="txtBranch" tabindex="1" style="height:14px;width:35px;" />
<input name="txtClient" type="text" maxlength="11" size="11" id="txtClient" tabindex="2" style="height:14px;" />
Im trying to fill in the data in these 2 input fields. I want to use an onkeydown() on my web site and the web site to know which key I pressed. Specifically know I pressed the arrow keys and store which key was pressed in a variable. any help? must work on all browsers. how could i save radio buttons choices especially when i have many groups of radio buttons. i mean when refreshing the page they stay as they are.
Hey! I searched a while on the web for this but i didn't find a solution that really worked. So is there a way how i can prevent IE9 from scrolling when i use the arrow keys? Hi All, I have a javascript scrollbar in the middle of the webpage, with two images as arrow at both end. Onclick of up and down arrow images the inside content moves up and down respectively. All works fine. What I need is, when I scroll down the down arrow should be disabled or invisible (as there is nothing to scrolldown) and same way when the content is at the top, the up arrow should be disabled or invisible. Please help... Sharing the code : <body> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_event.js" type="text/javascript"></script> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_scroll.js" type="text/javascript"></script> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/scroll_controls.js" type="text/javascript"></script> <script type="text/javascript"> function init_dw_Scroll() { var wndo = new dw_scrollObj('wn1', 'lyr1'); wndo.setUpScrollControls('scroll_links'); wndo.setUpScrollControls('wn1'); var wndo2 = new dw_scrollObj('wn2', 'lyr2'); var wndo3 = new dw_scrollObj('wn3', 'lyr3'); wndo3.setUpScrollbar("dragBar", "track", "v", 1, 1); wndo3.setUpScrollControls('scrollbar'); wndo3.setUpScrollControls('extra_controls'); wndo3.setUpScrollControls('wn3'); } if ( dw_scrollObj.isSupported() ) { dw_writeStyleSheet('http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css'); dw_Event.add( window, 'load', init_dw_Scroll); } </script> <link rel="stylesheet" href="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css" media="screen"> <h2>Demonstration</h2> <div class="holder1"> <div class="hasImage scroll_controls" id="scroll_links"> <a class="mouseover_up up" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-up.gif" alt="" width="12" height="12"></a> <a class="mouseover_down dn" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-dn.gif" alt="" width="12" height="12"></a> </div> <div id="wn1"> <div style="left: 0px; top: 0px; visibility: visible;" id="lyr1"> <h3>Mouseover Scrolling </h3> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.</p> <p>The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.</p> <p>Content repeated for your scrolling pleasure </p> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.</p> <p>The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.</p> <p>Back to the <a href="#" class="click_up_to_0_0">top</a></p> </div> </div> </div> Hi, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! I have a randomly generated Language file that corresponds to keys, the reason Ii say randomly generated is that the letter to key values used are not standard assignments. It seems the language coding is DEC in sets of 3 values by 5 .i.e. "248 036 034 036 248" = A "036 084 084 084 120" = a (See attached : ENGLISH-1.txt) How would I assign these values to a sentence lets say: All great : 248 036 034 036 248 ll gre 036 084 084 084 120 t but convert all characters to their correspondnig sets of 5 ? This then needs to get sent to a database where it is interpreted into sets of Binary to turn on and off LEDs' ... I have never worked with Javascript or LED's before, so any help is so appreciated. How to use the shortcut keys in jvascript? Can someone illustrate it to me with an example? Such as suppose on clicking the Ctrl+alt key,i want to display a prompt dialog box........How to do this? Need some urgent help..... thank you in advance Hi all, I was under the impression that I and object/associative array could have other objects as the keys for properties. That is, I should be able to set myObject[anotherObject] = 1. However, while this seems to work at first glance, any new object I set as a property key overwrites the first one. Here is the result of me testing in my Chrome console: Code: > var obj1 = new Object();
> var obj1.someProperty = "test"
"test"
> var obj2 = new Object();
> obj2.someOtherProperty = "test2"
"test2"
> obj1 == obj2
false
> obj1 === obj2 // the two objects I created are definitely not the same
false
> x = {}
> x[obj1] = 0 // set the two objs as property keys on x
0
> x[obj2] = 1
1
> x[obj1]
1 // blargh! x.obj2 overwrote x.obj1!
Any idea if this is possible, and if I'm just messing up with something dumb? I need to disable some keys from their default behaviour in Google Chrome on Windows with javascript. The script below works for most keys but not for F10, left Windows key, right Windows key, NumLock and left Alt. (which are the keys I need to disable) Code: <script type="text/javascript">
addEventListener("keydown", function (event) {
if(KeyID == 121 KeyID == 91 || KeyID == 92 || KeyID == 144|| KeyID == 18 ){
event.preventDefault();
}
}, true);
</script>
I have also without luck tried event.stopPropagation () - event.cancelBubble = true - return false og void(). I would like to know if their is a solution or it simply isn't possible to disable the mentioned keys. |
|||||||