Hi,
I need to implement keyboard shortcuts on my website. I've searched for a few minutes but I did not find anything concrete. Basically, what I want to do is "attach" a keyboard shortcut to a certain link so that when I click the left arrow it goes to a page, and when I click the right arrow it goes to another page.
So all I would have to do is call a JavaScript file and in my HTML do something like this:
Code:
Code:
<a href="page1.html" id="keyboard_shortcuts">Page 1</a>
<a href="page2.html" id="keyboard_shortcuts">Page 2</a>
Whereas the id has to do with the JavaScript file. I hope I made myself clear.
jQuery is the answer.
http://jquery.com/
Now I have a script that I were using for a Slideshow, it counts divs within a parent div which has attribute class set to slide. It then bind keydown event to the main body and checks if left arrow (37) or right array (39) was pressed.
Finally it hides current div, updates page and shows the next or previous div.
Just check it ou yourself, ask if you don't understand something.
Code:
<!DOCTYPE html>
<head>
<title>{$TITLE}</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var page = 1;
var pages = 0;
var title = null;
$.each($(".slide div"), function()
{
$(this).css({"width":"100%", "height":"100%", "position":"absolute", "display":"block", "font-size":28});
$(this).toggle();
pages++;
});
$(".slide div:nth-child("+page+")").css("font-size", 28);
$(".slide div:nth-child("+page+")").toggle();
$(this).bind("keydown", function(event)
{
var key = event.keyCode;
if(key == 37)
{
$(".slide div:nth-child("+page+")").toggle();
page = (page > 1) ? (page - 1) : 1;
$(".slide div:nth-child("+page+")").toggle();
}
else if(key == 39)
{
$(".slide div:nth-child("+page+")").toggle();
page = (page < pages) ? (page + 1) : pages;
$(".slide div:nth-child("+page+")").toggle();
}
});
});
</script>
<!--[if IE 8]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
</head>
<body>
<div class="slide">
<div title="Page 1">
Sometext 1
</div>
<div title="Page 2">
Sometext 2
</div>
<div title="Page 3">
Sometext 3
</div>
</div>
</body>
</html>
Thank you, but I want to load whole new pages, not divs.
Do you know how to do this? Also I would like to avoid using jQuery at all costs. I would prefer if it could be done in Prototype or just raw JavaScript. But if it's not possible, I understand.
I found this in a quick search:
http://code.google.com/p/prototype-hotkeys/. Looks pretty good but I'm not sure where to start.
I never used prototype, jquery is quite ok...
How much I've seen of prototype, I'm sure you can take the jquery code I've posted and convert it to prototype.
Where I call,
$(".slide div:nth-child("+page+")").toggle();, you would need to get the
href attribute of the element.
In jquery I would do something like this.
Code:
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
As for what you found....
Code:
function add(a, b) {
alert(parseInt(a) + parseInt(b));
}
Hotkeys.bind("alt+a", add, 3, 4);
This looks just like a plugin for jquery, with the same name.
I think you need to replace Hotkeys with an element, like in jquery, $(document).bind(); or just leave Hotkeys... what ever..
"alt+a" defines obviously the shortcuts, add is the function that processes the event, while 3 and 4 are passed as argument a and b to the function add.
I know jQuery is ok, I like it too. But in this case I am forced to stick to Prototype or raw JavaScript as I don't want to force users to load jQuery just for a fancy keyboard shortcut. I don't think it's worth it honestly.
Regarding the jQuery method, it's not working for me. I replaced $(".slide div:nth-child("+page+")").toggle(); with the given code and added anchor tags instead of the 3 divs. But it just doesn't work. Probably just a very silly mistake on my part. Here is the current markup I'm using:
Code:
<!DOCTYPE html>
<head>
<title>{$TITLE}</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var page = 1;
var pages = 0;
var title = null;
$.each($(".slide div"), function()
{
$(this).css({"width":"100%", "height":"100%", "position":"absolute", "display":"block", "font-size":28});
$(this).toggle();
pages++;
});
$(".slide div:nth-child("+page+")").css("font-size", 28);
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
$(this).bind("keydown", function(event)
{
var key = event.keyCode;
if(key == 37)
{
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
page = (page > 1) ? (page - 1) : 1;
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
}
else if(key == 39)
{
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
page = (page < pages) ? (page + 1) : pages;
$(body).load($(".slide div:nth-child("+page+")").attr("href"));
}
});
});
</script>
<!--[if IE 8]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
</head>
<body>
<div class="slide">
<a href="keyboard_shortcut.html" title="Page 1">Sometext1</a>
<a href="keyboard_shortcut2.html" title="Page 2">Sometext2</a>
<a href="keyboard_shortcut3.html" title="Page 3">Sometext3</a>
</div>
</body>
</html>
Once again, thank you!
I see your point...
Well this is how I would do it with ordinary javascript.
Code:
<!DOCTYPE html>
<head>
<title>{$TITLE}</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
var pages = {
0:"index.htm",
1:"1.php",
2:"2.php",
3:"3.php",
4:"4.php",
};
var page = 0;
function keydown(e)
{
e = (e) ? e : window.event;
var key = (e.charCode) ? e.charCode : e.keyCode;
if(key == 37)
{
page = (page > 0) ? (page - 1) : 0;
}
else if(key == 39)
{
page = (page < 4) ? (page + 1) : 4;
}
window.location = pages[page];
}
</script>
<!--[if IE 8]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="style/ie.css" /><![endif]-->
</head>
<body onload="" onkeydown="keydown(event)">
</body>
</html>
In this script you need to remember, the javascript code needs to be loaded in every other file that your redirect the user to, and you need to update the
page variable with PHP for example, or simply assign the right number to it in every file.
I wanted to do this as well, I had a problem so I scapped the idea, I got it working one time though
Awesome, there is only one little problem now. If I press the up or down arrows the current page is reloaded. And I need to use them to scroll up and down the page.
Any ideas on how to stop this?
Yes, that's because of the function keydown....
Change it to look like this...
Code:
function keydown(e)
{
e = (e) ? e : window.event;
var key = (e.charCode) ? e.charCode : e.keyCode;
if(key == 37)
{
page = (page > 0) ? (page - 1) : 0;
window.location = pages[page];
}
else if(key == 39)
{
page = (page < 4) ? (page + 1) : 4;
window.location = pages[page];
}
}
It's because I called window.location at the end of the function, so it get executed any time a button is pressed, my mistake sorry....
Brilliant! Thank you so much for your help. Much appreciated.