We Keep Coding

Using jQuery to changing background colour of a div

I'm trying to change the background colour of my div when the user presses either C, M or Y. I need to use the keypress method, but for some reason my code doesn't work.
$(document).ready(function() {
$(document).keypress(function(event) {
if (event === 99) {
$(".light").css('background-color', "#00ffff");
} else if (event === 121) {
$(".light").css('background-color', "#00ffff");
} else if (event === 109) {
$(".light").css('background-color', "#00ffff");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="light"></div>

You need to use event.which to determine which key was pressed. Here's working code:
$(document).ready(function() {
$(document).keypress(function(event) {
if (event.which === 99) {
$(".light").css('background-color', "#00ffff");
} else if (event.which === 121) {
$(".light").css('background-color', "#00ffff");
} else if (event.which === 109) {
$(".light").css('background-color', "#00ffff");
}
});
});
div.light {
width: 50px;
height: 50px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="light"></div>

You need to use the which value from the keypress event. I would also suggest that you use a switch-statment.
$(document).ready(function() {
$(document).keypress(function(e) {
var color = null;
switch (e.which || e.keyCode || 0) { // Cover all cases
case 99: // Key - C
color = '#00FFFF'; break;
case 109: // Key - M
color = '#FF00FF'; break;
case 121: // Key - Y
color = '#FFFF00'; break;
default:
color = '#FFFFFF';
}
$('.light').css('background-color', color);
});
});
.light {
width: 95vw;
height: 95vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="light"></div>
Thanks to smarx for the heads-up about jQuery and which.

Need help getting loop to work with an onkeydown event in javascript

I need help figuring out how to get the loop to work properly with onKeydown. Right now, I'm having issues where if you press the key once, it outputs 10 message in one go.
var i = 0;
do {
if (document.onkeydown = keyPress) {
i += 1;
console.log(i);
}
} while (i < 5);
function keyPress(m) {
if (m.keyCode == '38') {
i
document.write("you moved North" + "<br>");
//up arrow
} else if (m.keyCode == '40') {
document.write("you moved South" + "<br>");
//down arrow
} else if (m.keyCode == '37') {
document.write("you moved West" + "<br>");
//left arrow
} else if (m.keyCode == '39') {
document.write("you moved East" + "<br>");
//right arrow
}
}

Not sure if this is your problem, but given your code, document.onkeydown is always going to equal keyPress. Switch:
if (document.onkeydown = keyPress) {
...
}
To:
if (document.onkeydown == keyPress) {
...
}

Toggle up/down with up down keys in auto suggest

I am trying to make auto-suggest using ajax with php and mysql. Auto-suggest is working well but I am getting problem with toggling up down with up down keys. I am following this jsfiddle as example for completing my work. But can't get why Navigate function is been called twice. Because it alerts twice when I press down keys.
jquery
var Navigate = function(diff){
displayBoxIndex += diff;
var oBoxCollection = $("#searched a .searchFull");
if (displayBoxIndex >= oBoxCollection.length) {
displayBoxIndex = 0;
alert("A");
}
if (displayBoxIndex < 0) {
displayBoxIndex = oBoxCollection.length - 1;
alert("B");
}
var cssClass = "selected";
oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}
$(document).on('keypress keyup', "#search", function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
HTML
<div id="searched" style="display: block;">
<a href="http://localhost/c2c/init/product/78">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/77">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/76">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/73">
<div class="searchFull">
</a>

Here is the solution for your issue:
You call two events like: keypress and keyup. So, it will call twice.
Just remove one like here i remove keypress and here it works well.
$(document).on('keyup', function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
//alert("down");
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
Check Fiddle here.
And as per comment Here selected class not removed checked in firebug. See below image.
Hope it helps.

Change position of the element

What I need to do is to move the div element around the text string depending on the pressed arrow key. Actually the HTML string would look following:
mytextpharse<div class="blink"></div>
then, on the .keyUp event I'm gonna pick informations on which button was pressed (event.which) and if pressed key is the 37 or 39 (which are: left, right arrow keys) I would like to move the div.blink to the right direction based on the event.whichbutton pressed. So if I would press the left arrow key twice it should format the string into the following format:
mytextphar<div class="blink"></div>se
Could that be done in jQuery? If so, I need ideas on which functions should I use.

this should do the trick (using search and substr): (jsfiddle)
$( document ).keyup(function(e) {
if(e.which == 37)
{
var str = $("#content").html();
str = str.substr(0,str.search(/<div/)-1) + '<div class="blink"></div>' + str.substr(str.search(/<div/)-1,1) + str.substr(str.search(/<\/div>/)+6);
$("#content").html(str)
}
if(e.which == 39)
{
var str = $("#content").html();
str = str.substr(0,str.search(/<div/)) + str.substr(str.search(/<\/div>/)+6,1) + '<div class="blink"></div>' + str.substr(str.search(/<\/div>/)+7);
$("#content").html(str)
}
});
html:
<div id='content'>
mytext<div class="blink"></div>pharse
</div>

Here is your answer
CODE
HTML:
<div id="www">mytextpharse<div class="blink"></div></div>
JQUERY
$(document).ready(function(){
$pos = 3
$("body").keydown(function(e) {
if(e.keyCode == 37) {
if($pos > 1){ pos($pos-1);$pos--}
else{pos(3);$pos = 3; }
}else if(e.keyCode == 39) {
if($pos < 3){ pos($pos+1); $pos++
}else{
pos(1); $pos= 1
}
}
});
function pos($step){
console.log($step)
switch($step){
case 1:
$('#www').html('<div class="blink"></div>mytextpharse')
break;
case 2:
$('#www').html('mytext<div class="blink"></div>pharse')
break;
case 3:
$('#www').html('mytextpharse<div class="blink"></div>')
break;
}
}
})
Fiddle http://jsfiddle.net/krunalp1993/zEazF/2/
Hope it helps you :)

Jquery increase/decrease number in input text by up/down arrows keyboard

I have a basic quantity field and would like to allow the user to increase/decrease the number within this input box based on the keyboard up/down.
Following on from: EndangeredMassa answer on keyboard code https://stackoverflow.com/a/375426/560287 how would I add this into a keyup function?
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}

//cache our input since we will be working with it each time an arrow key is pressed
var $input = $('input');
//bind the the `keydown` event for the `document` object which will catch all `keydown` events that bubble up the DOM
$(document).on('keydown', function (event) {
//up-arrow (regular and num-pad)
if (event.which == 38 || event.which == 104) {
//make sure to use `parseInt()` so you can numerically add to the value rather than concocting a longer string
$input.val((parseInt($input.val()) + 1));
//down-arrow (regular and num-pad)
} else if (event.which == 40 || event.which == 98) {
$input.val((parseInt($input.val()) - 1));
}
});
Here is a demo: http://jsfiddle.net/QRNP8/1/
Note that jQuery normalizes the charCode/keyCode properties into event.which:
Query normalizes the following properties for cross-browser
consistency:
target
relatedTarget
pageX
pageY
which
metaKey
Source: http://api.jquery.com/category/events/event-object/

Setting your input type to number will work as well. Though this won't work too great in IE9 and below.
<input type="number">
Source: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown
Usages:
$('#textInput').updown();
View live demo here: http://jsfiddle.net/XCtaH/embedded/result/
Keyboard and mousewheel events supported

$("input").keypress(function(event) {
var val=$(this).val();
if ( event.keyCode== 38) {
val++
$(this).val(val)
}
if ( event.keyCode== 40) {
val--
$(this).val(val)
};
});

You could do:
<input type="text" id="yourinput" value="0">
$(document).on("keypress", '*', function(e) {
if (e.keyCode == 38) { // up
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
if (e.keyCode == 40) { // down
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
});
fiddle here http://jsfiddle.net/mSCBL/1/

$("something").keyup(function(e){
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}
});
Where something is a selector which matches your input(s).

Your codes looks correct-ish. If your just wondering how to bind the code to the event...
$('#itemId').keyup(function(e){
/*YOUR CODE*/
});

This should work
if(keynum == 38) { // up
this.value = parseInt(this.value)-1;
}
if(keynum == 27) { // down
this.value = parseInt(this.value)+1;
}