I'd like to add a bind in which the Esc key will slide my panel back up. Here is my jQuery code.
$(document).ready(function () {
$(".port-link-container").click(function () {
$("div.slider-panel").slideUp("slow");
});
$("#wr").click(function () {
$('html, body').animate({ scrollTop: 450 }, 'slow');
$("div#wr-large").slideDown("slow");
});
$("#sema").click(function () {
$("div#sema-large").slideDown("slow");
});
$(".slider-close").click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
$("div.slider-panel").slideUp("slow");
});
});
To detect escape key press, keyup or keydown event handler will be used in jquery. It will trigger over the document when the escape key will be pressed from the keyboard. keyup event: This event is fired when key is released from the keyboard. keydown event: This event is fired when key is pressed from the keyboard.
jQuery keyup() Method The order of events related to the keyup event: keydown - The key is on its way down. keypress - The key is pressed down. keyup - The key is released.
There is no default option to close the reactive popup by pressing the esc key. You need to create event for the popup like Onkeypress or Onkeyup to trigger event. After that it will be possible to close popup by esc key..
#pannel
{
position:fixed;
width:100%;
height:200px;
background-color:#ddd;
}
<div id="pannel"></div>
$(document).keyup(function(e){
if(e.keyCode === 27)
$("#pannel").slideToggle();
});
Try that?
fiddle
Try this with keyup event
$(function(){
$(document).keyup(function(e){
if(e.which == 27)
{
$("div.slider-panel").slideUp("slow");
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With