04-15-2011, 12:37 PM
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:
Once again, thank you!
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!