Hello Facepunch, I'm working on a small project and I seem to have run into a odd error. What I'm trying to do is make a script that on "keydown" changes a div's display from "none" to "inline-block" so that it's content will show, and on "keyup" it changes it back to hidden. It works, some of the time, other times I have to reload the page 3 or 4 times before it successfully functions.
easter_egg.js
[code]
$(window).on("keydown", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "inline-block");
event.preventDefault();
}
});
$(window).on("keyup", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "none");
event.preventDefault();
}
});
[/code]
relevant markup in index.php
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="easter_egg.js"></script>
</head>
<body>
<div id="easter_egg" style="display:none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis dolor augue.</p>
</div>
</body>
</html>
[/HTML]
Any help or feedback would greatly be appreciated, for reference I'm hooked into the latest version of JQuery.
[QUOTE=JakeXen;40172936]Hello Facepunch, I'm working on a small project and I seem to have run into a odd error. What I'm trying to do is make a script that on "keydown" changes a div's display from "none" to "inline-block" so that it's content will show, and on "keyup" it changes it back to hidden. It works, some of the time, other times I have to reload the page 3 or 4 times before it successfully functions.
easter_egg.js
[code]
$(window).on("keydown", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "inline-block");
event.preventDefault();
}
});
$(window).on("keyup", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "none");
event.preventDefault();
}
});
[/code]
relevant markup in index.php
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="easter_egg.js"></script>
</head>
<body>
<div id="easter_egg" style="display:none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis dolor augue.</p>
</div>
</body>
</html>
[/HTML]
Any help or feedback would greatly be appreciated, for reference I'm hooked into the latest version of JQuery.[/QUOTE]
Is your code inside document ready?
-snip- Stupid me
Yep, everything is the index is fine. The issue is with easter_egg.js, to be honest I have never used JQuery before.
Just for reference, to hide/show elements you could use:
[code]
$("#easter_egg").toggle();
[/code]
This does not implicitely work in your code, as the keydown event will keep triggering, and it'll keep toggling the div. (Ofcourse you can set a flag, but it's more code than the solution above)
[QUOTE=Creepy;40214207]Try this:
[CODE]$(document).ready(function() {
$(window).on("keydown", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "inline-block");
event.preventDefault();
}
});
$(window).on("keyup", function (event) {
if (event.which == 192) {
$("#easter_egg").css("display", "none");
event.preventDefault();
}
});
});[/CODE]
[CODE]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="easter_egg" style="display:none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis dolor augue.</p>
</div>
<script type="text/javascript" src="easter_egg.js"></script>
</body>
</html>[/CODE][/QUOTE]
That fixed it! Thanks man, this was driving me crazy!
[QUOTE=JakeXen;40256333]That fixed it! Thanks man, this was driving me crazy![/QUOTE]
No problem :dance:
My advice, don't just copy and paste the code, actually look over it and see what went wrong :] Maybe mess with it a few.
Sorry, you need to Log In to post a reply to this thread.
