/    Sign up×
Community /Pin to ProfileBookmark

How to hide layer with esc key

Copy linkTweet thisAlerts:
Sep 28.2006

How can i clsoe popup layer with esc key

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Wisest_GuySep 28.2006 — onkeydown = function(e)

{if (e.keyCode == e.DOM_VK_ESCAPE){layer.style.display = "none";}}
Copy linkTweet thisAlerts:
@tekboyauthorSep 28.2006 — thanks i tried your code but i couldnt get it to work
[CODE]
<script>
onkeydown = function(e)
{if (e.keyCode == e.DOM_VK_ESCAPE){layer.style.display = "none";}}
i have also tried this not working either
</script>
<body onkeydown = function(e)>[/CODE]

i tried this but wont work either what im doing wrong
[CODE]
<html>
<head>
<script>
function keyPressHandler(e) {
var kC = (window.event) ? // MSIE or Firefox?
event.keyCode : e.keyCode;
var Esc = (window.event) ?

27 : e.DOM_VK_ESCAPE // MSIE : Firefox
if(kC==Esc)
//alert("Esc pressed")
document.getElementById(e).style.display = 'none';
}
</script>
</head>
<body >
<div id="e" onkeypress="keyPressHandler()"><h1> Press the escape key </h1></div>
</body>
</html>

[/CODE]
Copy linkTweet thisAlerts:
@mrhooSep 28.2006 — Not all elements can handle key events. Form input elements, textareas and the document.body do, as does the window itself.

You can't catch a key event from any element that doesn't accept element.focus().

To hide a div if escape is pressed,

set the handler to the window or body and hide the div with the handler code. I'd use keydown instead of keypress for the event.
Copy linkTweet thisAlerts:
@tekboyauthorSep 28.2006 — thanks

i made changes and got it to detect the esc key but still not able to hide the div layer

i got " Error: e is not defined"

any idea



[CODE]
<html>
<head>
<script>
function keyPressHandler(e) {
var kC = (window.event) ? // MSIE or Firefox?
event.keyCode : e.keyCode;
var Esc = (window.event) ?

27 : e.DOM_VK_ESCAPE // MSIE : Firefox
if(kC==Esc)
// alert("Esc pressed")
document.getElementById(mydiv).style.display = 'none';
}
</script>
</head>
<body onkeydown="keyPressHandler(e)">
<div id="mydiv"><h1> Press the escape key </h1></div>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@mrhooSep 28.2006 — You are passing [B]e[/B] in the handler.

Use onkeydown="keyPressHandler()"

And before you run it,

look at where you call document.getElementById([B]myDiv[/B]).


If 'myDiv' is an id it has to be quoted.
Copy linkTweet thisAlerts:
@tekboyauthorSep 28.2006 — mydiv is just an id i assigned to the layer so when esp key is press it will close that div, am i doing it wrong?

document.getElementById(mydiv).style.display = 'none';
Copy linkTweet thisAlerts:
@Wisest_GuySep 29.2006 — This should work in Mozilla and IE on Windows:

<BODY ONKEYDOWN="if (event.keyCode == 27){document.getElementById('mydiv').style.display = 'none';}">

But I don't know about other browsers or platforms.
Copy linkTweet thisAlerts:
@tekboyauthorSep 29.2006 — cool, ?
×

Success!

Help @tekboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...