Tumblr Style Keyboard Navigation - javascript

I don't know much about how it works. My guess is JavaScript, but anyway.
When you go to your dashboard in Tumblr you can go back and forth between pages in your feed with your keyboard. ← to go forward to newer posts and → to go to older posts.
Can someone help me figure out how they do this.

Well, what you have do is set up a "keyup" event listener for your document element that reads which key your user pressed, then execute an action if the keycode matches the code for your left or right keys.
The "left" key's keycode is 37. the right is 39. So the listener for the "left" key you would set up is this:
document.onkeyup = function(e){
if (e.keyCode == 37) { //"left" key.
//your code
}
if (e.keyCode == 39) { //"right" key.
//your code
}
}

Figured it out:
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 37:
window.location = "{PreviousPage}";
break;
case 39:
window.location = "{NextPage}";
break;
}
}
</script>

Related

W3Schools game tutorial trouble

So im just starting out learning Javascript, and I'm following the game tutorial in https://www.w3schools.com/graphics/game_obstacles.asp
This is the point i've gotten stuck at. If you check out the code in the example, they've added a working obstacle, but the game won't work with the keyboard. (only with buttons added to the site)
I want to be able to steer the character with my keyboard, and have a working obstacle, that will stop the game when the two touch.
I would appreciate any help i could get from this. (the code i use is in the example in the link above)
you will need a little bit more than in the shown example.
Here is a reference with an example for key pressed events Link
Short excerpt:
"Clear" JavaScript:
<script type="text/javascript">
function myKeyPress(e){
var keynum;
if(window.event) { // IE
keynum = e.keyCode;
} else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
alert(String.fromCharCode(keynum));
}
</script>
<form>
<input type="text" onkeypress="return myKeyPress(event)" />
</form>
You could also solve it in jquery
JQuery:
$(document).keypress(function(event){
alert(String.fromCharCode(event.which));
});
Add this in you code to move the block.
window.addEventListener('keydown', function(event) {
console.log(event);
if(event.keyCode === 38){
console.log(event);
myGamePiece.speedY -= 1;
} else if (event.keyCode === 37){
myGamePiece.speedX = -1;
} else if (event.keyCode === 39){
myGamePiece.speedX = 1;
} else if (event.keyCode === 40){
myGamePiece.speedY = 1;
}
});
Do following changes:
Add onkeypress event in body element i.e. <body onkeypress="myFunction(event)" onload="startGame()" >.
Define myFunction function as following:
function myFunction(event)
{
switch(event.which || event.keyCode)
{
case 117: //Up 'U'
moveup();
break;
case 106: //Down 'J'
movedown();
break;
case 104: //Left 'H'
moveleft();
break;
case 107: //Right 'K'
moveright();
break;
}
}
You can get complete working code here. You can copy the complete code and run it locally.

css HTML gallery react to keyboard

I recently made a rudimentary html/css galery that is practicaly a table with next/previous buttons.The thing is I want to make it responsive to keyboard.Like if anyone hits the "left" button on keyboard it should go on the previous photo and if it hits the "right" button go on the next page.
I would love if you could make it with as less javascript/jquery as possible.I searched google for something like that but I haven't found none !
If you need any code of my website please let me know.
Please help !
You could capture the keyboard interaction using .on() and the keydown event, and decide what to do after the returned value like :
$(document).on("keydown", function (e) {
e.preventDefault();
var code = e.which || e.keyCode;
console.log(code)
if (code == 40) {
// down arrow pressed : do something
console.log("down arrow pressed")
}
});
See JSFIDDLE
The keyboard map of the navigation arrows are
// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow
EDIT : to avoid excessive use of if else if else, you could use switch (which performs better) like :
$(document).on("keydown", function (e) {
e.preventDefault();
var code = e.which || e.keyCode;
switch (code) {
case 37:
console.log("left arrow pressed")
break;
case 38:
console.log("up arrow pressed")
break;
case 39:
console.log("right arrow pressed")
break;
case 40:
console.log("down arrow pressed")
break;
default:
return false
}
});
See updated JSFIDDLE
JFK's answer is correct, but I extended that a little
$(document).on("keydown", function (e) {
var code = e.which || e.keyCode;
if (code == 40 || code == 39) { // down & right
// replace selector with your button id/class
$('.btn-next').click();
} else if (code == 38 || code == 37) { // up & left
// replace selector with your button id/class
$('.btn-previous').click();
}
});
The code simulates a click on the next/previous buttons so you are able to place any code which should happen when clicking or key pressing only once.

Key Navigation with Javascript

Please Help! I have spent a week to complete this game and this is the final huddle i have been stuck with for a couple of days now. I know some techy out there would probably take a glance and flick something in place. But I'm not very sophisticated with javascript and therefore need some help.
$(document).keydown(function(e){
// left arrow
if (e.keyCode == 37 && currentCell > 0) {
currentCell--;
ChangeCurrentCell();
return false;
}
// up arrow
if (e.keyCode == 38 && currentRow > 0) {
currentRow--;
ChangeCurrentCell();
return false;
}
// right arrow
if (e.keyCode == 39 && currentCell < MAX_CELL) {
currentCell++;
ChangeCurrentCell();
return false;
}
//down arrow
if (e.keyCode == 40 && currentRow < MAX_ROW) {
currentRow++;
ChangeCurrentCell();
return false;
}
// enter key
if (e.keyCode == 13) {
}
});
function ChangeCurrentCell()
{
document.getElementById(Boxes[currentRow + currentCell]).focus();
SimulateMouseOver(document.getElementById(Boxes[currentRow + currentCell]));
}
// function will trigger event of selecting current focus.
function selectElement()
{
}
$(document).ready(function(){
loadDivs()
// will give initial focus to top left element paving way for key navigation
ChangeCurrentCell();
// above gives first element in Boxes the focus when loading.
The div element will not focus despite getting it and calling the focus method, i have tried to trigger mousehover on the element with no luck. Please assist me, i put my masters thesis aside despite already being on a tight schedule to do this game which is a requirement for a job position. I have done whole the whole game logic and it all works well, if i send the code in as it is it will definitely be discarded because it doesnt meet the key navigation requirement ... i am desperate i will even pay if i need to -frustrated Student
Look at this
It's my solution for a test, maybe the same...maybe can help you :) If it is, please use it as a hint and don't copy all my code :D
Regards,
L.
You can bind to the document.keydown event to capture key strokes. Then you can use event.which (normalized by jQuery) to determine which key was pressed.
$(document).on("keydown", function (event) {
if (event.which === 37) {
//code for left arrow
} else if (event.which === 38) {
//code for up arrow
} else if (event.which === 39) {
//code for right arrow
} else if (event.which === 40) {
//code for down arrow
}
});
UPDATE
I just noticed you didn't tag your question with jQuery. To use native JS you'll have to change how you bind to the document.keydown event and how you determine the key that was pressed (different browser implementations store the info under different indexes of the event object).
to make it more convenient () not necessary:
`var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32;`
then bind to keydown, keypress doesn't catch arrow keys
and do something like this:
$(document).bind("keydown", function (e){
var which = e.which;
var navigationKeyWasPressed = which !== undefined && which >= 39 && which <= 40;
//do nothing if no significant key was pressed
if (!navigationKeyWasPressed ) {
return;
}
if ($(".selectedWithKey").length === 1){
switch (which) {
case LEFT:
//...
break;
case UP:
//...
break;
case RIGHT:
//...
break;
case DOWN:
//...
break;
case SPACE:
//turn card
break;
default: //non arrow pressed
//...
}
} else {
// if no card is selected, select one to start arrow navigation
$(".sponsor:first").addClass("selectedWithKey")
}
});

Changing variable after keypress?

I'm trying to make a fun little game.
You have to press all the keys on the screen as fast as you can, without getting it wrong.
But struggling to change the variable after the first keypress. This is what I have:
<script language="JavaScript">
document.onkeydown = checkKeycode;
var uyhgg=13;
function checkKeycode(e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
} else if (e) {
keycode = e.which;
}
if (keycode == uyhgg){
document.write(keycode);
} else {
alert("you hit the wrong key");
}
}
</script>
Now after document.write(keycode); I want it to change the variable uyhgg (key code) to something else. 13 is enter.
A call to document.write() after your page loads will obliterate the page. Instead of that, I suggest you make the code update some page element.
if (keycode == uyhgg){
document.getElementById("something").innerHTML = keycode;
}
Put a <div> or <span> or whatever somewhere on the page with that "id" value:
<div id='something'>your keycode will go here</div>
As for changing the variable, well, you should be able to just change it.
uyhgg = 32;
or whatever you need to change it according to, well, whatever the game needs.
Uhmm ... you simply assign it?
document.onkeydown = checkKeycode;
var uyhgg=13;
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
if (keycode == uyhgg){
document.write(keycode);
uyhgg = 27;
alertUyhgg();
}
else {
alert("you hit the wrong key");
}
}
function alertUyhgg() {
alert(uyhgg);
}

Overwriting key events

How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});

Categories