keydown to trigger an event??
I'm trying to get a keydown function to trigger an event... The same as the onclick event I currently have working...
I got the buttons to work on keydown, but I cant get them to work just like the onclick. Trying to get them to do the same thing.
This is what i have.
~ HTML~:D
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Week 7 jslider key function</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jslider.js" type="text/javascript"></script>
<link href="jslider.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="topDiv" class="innderDiv"></div>
<div id="leftDiv" class="innderDiv"></div>
<div id="rightDiv" class="innderDiv"></div>
<div id="bottomDiv" class="innderDiv"></div>
</div>
<!--end container-->
<br />
<div id="btns">
<div id="leftCol">
<div id="leftControl" class="divControl key c37">
<p>LOGO 1</p>
</div>
<!--end leftControl-->
</div>
<!--end leftCol-->
<div id="middleCol">
<div id="topControl" class="divControl key c38">
<p>LOGO 3</p>
</div>
<!--end topControl-->
<div id="bottomControl" class="divControl key c40">
<p>LOGO 4</p>
</div>
<!--end bottomControl-->
</div>
<!--end middleCol-->
<div id="rightCol">
<div id="rightControl" class="divControl key c39">
<p>LOGO 2</p>
</div>
<!--end rightControl-->
</div>
<!--end rightCol-->
</div>
<!--end btns-->
<div class="clear"></div>
</div>
<!--end wrapper-->
</body>
</html>
~JavaScript/jQuery~:eek:
Code:
// click button function
$(document).ready(function(){
// controls bottom div
$("#bottomControl").click(function() {
$(".innderDiv").hide();
$(".innderDiv").css("z-Index","0");
$("#bottomDiv").css({"margin-top":"400px",
"display":"block",
"z-index":"10"});
$("#bottomDiv").animate({
marginTop: "0px"
},500);
$("#bottomControl").html("Black on White");
$("#bottomDiv").css("background-image","url(images/logo4.png)");
});
// controls top div
$("#topControl").click(function() {
$(".innderDiv").hide();
$(".innderDiv").css("z-Index","0");
$("#topDiv").css({"margin-top":"-400px",
"display":"block",
"z-index":"10"});
$("#topDiv").animate({
marginTop: "0px"
},500);
$("#topControl").html("White on Black");
$("#topDiv").css("background-image","url(images/logo3.png)");
});
// controls right div
$("#rightControl").click(function() {
$(".innderDiv").hide();
$(".innderDiv").css("z-Index","0");
$("#rightDiv").css({"margin-left":"400px",
"display":"block",
"z-index":"10"});
$("#rightDiv").animate({
marginLeft: "0px"
},500);
$("#rightControl").html("Red on White");
$("#rightDiv").css("background-image","url(images/logo2.png)");
});
// controls left div
$("#leftControl").click(function() {
$(".innderDiv").hide();
$(".innderDiv").css("z-Index","0");
$("#leftDiv").css({"margin-left":"-400px",
"display":"block",
"z-index":"10"});
$("#leftDiv").animate({
marginLeft: "0px"
},500);
$("#leftControl").html("White on Red");
$("#leftDiv").css("background-image","url(images/logo1.png)");
});
});
// press key function
$(window).keydown(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.c' + key).addClass('keydown');
console.log(key);
});
$(window).keyup(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.c' + key).removeClass('keydown');
});
I just want the keydown function to do the same thing the onclick does.:confused:
