|
JavaScript - Controlling Arrow Keys
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;
}
};
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? 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 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";
}
}
}
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> 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!
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. 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.
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> 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. ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning. The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden. I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so. Any help would be greatly appreciated thanks so much Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please? Code: <td> <input type="checkbox" name="weddingitem1" value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br /> <input type="checkbox" name="weddingitem2" value="Champers" id="Champers"/><label for="Champers" >Champers<br /> </td> Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol Hello, I need your help. I have 2 checkboxes. How would I control one from the other? Eg. [ ] Option A [ ] Option B - If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked. - If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked. How would that be written in Javascript, I am totally confused. Any help with this is much and foremost greatly appreciated. Cheers, J I have the following code ... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. I am trying to use JavaScript to manipulate the appearance of a web browser. (1) Initially I need to identify and save the current browser settings (e.g. position, height, width, caption on or off, menubar on or off, border on or off). (2) Then I need to change the appearance of the browser to full screen, no border, no caption, no status bar, no menubar). (3) Finally, I need to return the browser to the initial settings using the settings saved at the beginning. I am a novice at JavaScript and am having a difficult time locating details of the language that permit me to accomplish my objectives. John Chapman jchapman@onlinecbt.com Problem I have an index.html that sets up 3 Frames. They are called FrameTop, FrameA and FrameB. See pic below. In FrameTop the user can type in a url into a textbox with id="urlINPUT". When user clicks LOADA it loads that url into FrameA. User can then browse web in FrameA, clicking links etc and going to new pages. The second button LOADB is designed to determine the current location/url of the page displayed in FrameA and load that into FrameB. So far when I write the javascript in FrameTop LOADA works but LOADB loads the FrameTop into FrameB! [error!] If someone can please help me with this problem it would be much appreciated. This work is going towards a free website idea. I suspect my error lies in use of parent/self in the parent.frame.location. Here is my page layout. -----------------Index.html------------------------------------- <frameset rows="5%,*"> <frame name="FrameTop" src="frame_top.html" /> <frameset cols="50%,50%"> <frame name="FrameA" id="FrameA" src="frame_a.html" /> <frame name="FrameB" id="FrameB" src="frame_b.html" /> <noframes> </noframes> </frameset> --------------------frame_top.html------------------------------- <SCRIPT language="JavaScript"> function loadURLintoA() /*gets the url typed in by user and loads it into Frame A. This works fine*/ { var urlrequest= "http://"+document.getElementById('urlINPUT').value; parent.FrameA.location.href = urlrequest; /*sets FrameA location to url that user enters in frametop input*/ } </SCRIPT> <SCRIPT language="JavaScript"> function loadAintoB() /*I WANT this to get the url of the website loaded in frame A and load it into frame B*/ { var urlofA = parent.FrameA.location; parent.FrameB.location = urlofA; /*this is supposed to get the url of FrameA and load it into FrameB*/ } </SCRIPT> </HEAD> <body bgcolor="#848484"> http://<input type="text" name="urlINPUT" value="" id="urlINPUT" size="10"> <input type="button" name="loadAbutton" id="loadAbutton" value="LOAD A" onclick="loadURLintoA()"> <input type="button" name="loadBbutton" id="loadBbutton" value="LOAD B" onclick="loadAintoB()"> ---------------------------------------------- What happens when I run index.html index.html loads the index correctly and displays FrameTop, FrameA and FrameB. The load A button also works correctly BUT when I click LoadB it loads FrameTop into FrameB! This happens when no page is loaded into FrameA AND when an external page in loaded in. Please help, I would be very greatfull if you could point out my mistake. I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit? <input type="hidden" name="weight" value=".5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="1.5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="10 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="20 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="50 <input type="hidden" name="weight_unit" value="lbs"> The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction: <html> <body> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="test@test.com"> <input type="hidden" name="currency_code" value="USD"> <input type='hidden'text' name='amt' id='amt' value="0.00"/> <table> <tr> <td> <input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr> <tr><td> <select name="os0" onChange="getamt()"> <option value="select">Please Select</option> <option value="1/2 lb.">1/2 lb. $3.99 USD</option> <option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option> <option value="10 lbs.">10 lbs. $25.80 USD</option> <option value="20 lbs.">20 lbs. $42.75 USD</option> <option value="50 lbs.">50 lbs. $86.20 USD</option> </select></td></tr> </table> <script type="text/javascript"> function getamt() { var sh=0; var choice = document.getElementById("os0").selectedIndex; if (choice == 0) { sh=0; } if (choice == 1) { sh=.5; } if (choice == 2) { sh=1.5; } if (choice == 3) { sh=10; } if (choice == 4) { sh=20 } if (choice == 5) { sh=50.00; } document.getElementById("on0").value=sh; } </script> <input type="image" src="https://images.paypal.com/images/sc-but-03.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </body> </html> Good day/evening. I am trying to reload the contents of a div asynchronously using jquery. It works fine if the link/button to do so is outside of the div I am reloading, but I need the button to be inside the div I am reloading and it does not work if I do it from there. I have thought about overlaying divs but I need the buttons to be very exactly positioned as its a graphical representation of a map and recoding the way the buttons are placed would not only annoy me but be very difficult. You see its an isometric view of a square, and the buttons need to be placed right along the edges of the 'diamond' therefore always coming inside or on top of the div that contains the map view. So, is what I am trying to do impossible or might I just be going about it the wrong way ? If it is the latter then I will post some code. Thanks in advance. EDIT: sorry, I didn't see the frameworks forum for Jquery stuff, if a mod could please move this thread in there then that would be just fab. |
|||||||