keydown to trigger an event??

**unstable_nes** · 08-30-2011, 03:21 PM

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~

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~

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.

**markle976** · 08-31-2011, 09:34 PM

This should work:

Code:

// press key function
$(window).keydown(function(e) {
    key = (e.keyCode) ? e.keyCode : e.which;
    //add switch block for different keys
    $("#bottomControl").trigger('click');
	
});

**unstable_nes** · 08-31-2011, 10:10 PM

markle976... You're a genius! Now, how would I add a switch block? Sorry for my lack of intelligence, this stuff takes a while to get used to. I greatly appreciate you!

**markle976** · 08-31-2011, 10:25 PM

A switch statement is like an if statement with multiple options. I don't know the exact key codes, but it would look something like this:

Code:

var key = (e.keyCode) ? e.keyCode : e.which;
switch(key) {
	case 13:
		//execute this code block if key == 13
		$("#bottomControl").trigger('click');
		break;
	case 27:
		//execute this code block if key == 27
		$("#topControl").trigger('click');
		break;
	default:
		//code to be executed if key is different from case 1 and 2
}

Create as many cases as you need.
And, don't apologize for a lack of intelligence - all you need is practice... and google.