|
JavaScript - Using Arrow Keys To Goggle Suggestions?
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";
}
}
}
Similar Tutorialshi 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;
}
};
Disable 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 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. 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 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. 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? Hello, I am using some api solutions in my javascript. But, those api solutions require api keys as parameters. In this case, users can see my api keys by displaying page source? What is a true approach and solution of course? Thanks Ello~ I was just wondering if ^^ anyone could look at this code and tell me where there are errors... or any suggestions so i could clean up the code a bit, so it would work :] that way i could figure it out Thank you for your time~ ^_^ Code: <html>
<head> <title> RETAKES </title>
<script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script>
<script type="text/javascript">
function TakeTest( )
// simulates a student's test taking by generating random values for the grades
// and allowing up to a certain number of retakes displaying the apropriate messages
// algorithm:
// set up: max num of retakes at 3 and passing grade at 70
// generate a random grade between 1-100 and
// IF equal or greater than the passing grade display "Your initial passing grade: ..."
// ELSE: setup the count of retakes at 0
// DO: increment the count for retakes
// generate a random grade between 1-100 and display "Your retake grade: " ..."
// WHILE: the retake count is less or equal to the max number of retakes AND the grade IS NOT a passing grade
// afterwards: either the iteration ended with a passing grade OR not, so check for which condition occurred
// IF after the retakes the grade is a passing grade then display "You Passed with a grade of: ... after ... retake(s)"
// ELSE display "You still failed after " ... " retakes."
{
var retake, passGrade, grade;
retake = 0;
grade = randomInt(1, 100);
passGrade = 70;
if (grade >= passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "Your initial passing grade: " + grade;
}
else {
retake = 0;
do {
retake++;
grade = randomInt(1, 100);
document.getElementById("text").value = document.getElementById("text").value + "Your retake grade: " + grade;
while (retake <= 3 && grade != passGrade)
}
}
if (retake <= 3 && grade == passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "You passed with a grade of " + grade + " after " + + " retake(s)";
}
else {
document.getElementById("text").value = document.getElementById("text").value + "You still failed after " + retake + " retake(s)";
}
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Student Test taking simulation</h2>
<p> <input type="button" value="Take the Test" onclick="TakeTest()"> </p>
<p> <textarea id="text" rows="60" cols="25">READY TO GO!</textarea> </p>
</div>
</body>
</html>
You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
Hi all! I'm new to the forum and hope to get some help on how to make my javascript shorter then how its now. Now i have 8 functions doing the same thing, but i dont know how to make it to one function, if possible. I have worked much with PHP with the other code on the website, so if u have sugestions with that feel free to make them. It are working with some checkboxes, if u press the first checkbox u will get a textfield after every checkbox exept the first one. If u just press one checkbox u get a textfiled after that one. P.S. All the code bellow are working together. Javascript code Code: <script type="text/javascript">
function showHide1()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
document.getElementById('64bitxref3').style.display = '';
document.getElementById('64bitxref4').style.display = '';
document.getElementById('64bitxref5').style.display = '';
document.getElementById('64bitxref6').style.display = '';
document.getElementById('64bitxref71').style.display = '';
document.getElementById('64bitxref72').style.display = '';
document.getElementById('64bitxref73').style.display = '';
document.getElementById('64bitxref8').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
document.getElementById('64bitxref3').style.display = 'none';
document.getElementById('64bitxref4').style.display = 'none';
document.getElementById('64bitxref5').style.display = 'none';
document.getElementById('64bitxref6').style.display = 'none';
document.getElementById('64bitxref71').style.display = 'none';
document.getElementById('64bitxref72').style.display = 'none';
document.getElementById('64bitxref73').style.display = 'none';
document.getElementById('64bitxref8').style.display = 'none';
}
}
function showHide2()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
}
}
function showHide3()
{
if(document.getElementById('64bitxref3').style.display == 'none')
{
document.getElementById('64bitxref3').style.display = '';
}
else
{
document.getElementById('64bitxref3').style.display = 'none';
}
}
function showHide4()
{
if(document.getElementById('64bitxref4').style.display == 'none')
{
document.getElementById('64bitxref4').style.display = '';
}
else
{
document.getElementById('64bitxref4').style.display = 'none';
}
</script>
html code (with possible php help) Code: <form method="post" action="index.php?id=2">
<table border="0">
<tr>
<td colspan="2">
<input type="text" name="search" value="<? echo $keyword; ?>" size="80" maxlength="250" />
<input type="submit" name="send" value="Sök">
<br />
</td>
</tr>
<tr width="100%">
<td>
<input id="checkbox1" type="checkbox" onClick="showHide1()" value="allt"/>
<label for="allt">Allt</label>
</td>
<td width="90%">
<input name="64bitxref1" type="text" value="" id="64bitxref1" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox2" type="checkbox" onClick="showHide2()" value="fotograf"/>
<label for="foto">Fotograf</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref2" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox3" type="checkbox" onClick="showHide3()" value="plats"/>
<label for="plats">Plats</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref3" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox4" type="checkbox" onClick="showHide4()" value="fritext"/>
<label for="fritext">Fritext</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref4" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
</table>
</form>
I hope the code could be to help i put in there, and thanks in advance. /Spikey |
|||||||