Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Esc Keypress bind

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");
    });
});
like image 916
William George Avatar asked Aug 06 '11 23:08

William George


People also ask

How can I tell if Esc key is pressed?

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.

What is Keyup and Keydown in jQuery?

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.

How do I close pop up Esc key?

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..


2 Answers

#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

like image 107
Joseph Marikle Avatar answered Oct 23 '22 07:10

Joseph Marikle


Try this with keyup event

$(function(){

  $(document).keyup(function(e){

    if(e.which == 27)
    {
      $("div.slider-panel").slideUp("slow");
    }
  });
});
like image 41
ShankarSangoli Avatar answered Oct 23 '22 09:10

ShankarSangoli