I have a problem with my script I do not come on.
When I click "Link 5" window appears. And then I have only one chance to close this window, to press the "close" button.
I want another function, namely the onkeypress function.
When I press Esc then the window should also close. I hope you can help me.
<li onClick="return pop('pop')" id="stream">Link 5</li>
<div id="pop" class="parentDisable" onselectstart="return false" onselectstart="return false">
<table border="1" id="popup">
<tr>
<td>
<a href="" onClick="return hide('pop')" style="float: right; margin: 4px;">
<img src="http://www.imgbox.de/users/Metraax/close.png" />
</a>
</td>
</tr>
<tr>
<td>
<h2>Fenster geöffnet</h2>
</td>
</tr>
<tr>
<td>height: auto;</td>
</tr>
</table>
</div>
<script type="text/javascript">
function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
if (e.keycode == '27')
{document.getElementById(div).style.display='none';}
document.getElementById(div).style.display='none';
document.getElementById(div).style.display='none';
return false
}
</script>
<style>
.parentDisable {
z-index:999;
width:100%;
height:100%;
display:none;
position: absolute;
top:0;
left:0;
background-color: rgba(204, 204, 204, 0.4);
color: #aaa;
filter: alpha(opacity=50);
}
#popup {
width: 44.48%;
position: absolute;
top: 200px;
left: 27.76%;
color: #000;
background-color: #C4C4C4;
border-radius: 5px;
box-shadow: 0px 0px 20px gray;
}
#popup tr td h2 {
float: left;
font-size: 20px;
}
#popup tr {
cursor: default;
}
</style>
Something like this:
function pop(div) {
var d = document.getElementById(div);
d.style.display = 'block';
if (document.addEventListener) {
document.addEventListener ("keyup", function(e) {
onEsc(e, d);
}, false);
}else{
if (document.attachEvent)
button.attachEvent ("keyup", function(e) {
onEsc(e, d);
});
}
return false
}
function hide(div) {
document.getElementById(div).style.display = 'none';
return false
}
function onEsc(event, elem) {
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
if (event.which === 27) {
elem.style.display = 'none';
document.removeEventListener("keyup");
}
}
FIDDLE
You can use this code with jQuery:
$(document).keyup(function(e) {
if (e.keyCode == 27) { <YOUR CODE HERE> } // esc
});
Related
I have 2 divs (#1 and #2) and two buttons. When a button is clicked, it should select a div to move and when the arrow keys are pressed, this div should move. The other should remain in its place. If the other button is clicked, the div that had previously moved should remain in its new position and the newly selected div should move along with the arrow keys.
.counter {
border-radius:50%;
width:20px;
height:20px;
position:absolute;
transition:top linear 0.6s, left linear 0.6s;
font-size:20px;
font-weight:bold;
text-align:center;
padding:20px;
top: 525px;
left: 60px;
background-color:red;
}
<button onclick="one">Move One</button>
<button onclick="two">Move Two</button>
<div class="counter" id="1" >1</div>
<div class="counter" id="2">2</div>
var go = "1"
function one() {
go = "1"
}
function two() {
go = "2"
}
document.onkeydown = detectKey;
function detectKey(e) {
var posLeft = document.getElementById('').offsetLeft
var posTop = document.getElementById('').offsetTop
if (e.keyCode == '39') {
if (go === "1") {
document.getElementById('1').style.left = (posLeft+150)+"px"
}
if (e.keyCode == '38') {
document.getElementById('1').style.top = (posTop-150)+"px"
}
}
if (e.keyCode == '39') {
if (go === "2") {
document.getElementById('2').style.left = (posLeft+150)+"px"
}
if (e.keyCode == '38') {
document.getElementById('2').style.top = (posTop-150)+"px"
}
}
}
Here is a solution. I have edited the values a bit, but you can easily change them back.
const buttonOne = document.getElementById('button-one');
const buttonTwo = document.getElementById('button-two');
const elementOne = document.getElementById('one');
const elementTwo = document.getElementById('two');
buttonOne.addEventListener('click', clickOnButtonOne);
buttonTwo.addEventListener('click', clickOnButtonTwo);
let selectedElement = null;
function clickOnButtonOne() {
selectedElement = elementOne;
}
function clickOnButtonTwo() {
selectedElement = elementTwo;
}
document.onkeydown = detectKey;
function detectKey(e) {
if (selectedElement) {
if (e.keyCode == '39') {
var posLeft = selectedElement.offsetLeft
selectedElement.style.left = (posLeft + 50) + "px"
}
if (e.keyCode == '38') {
var posTop = selectedElement.offsetTop
selectedElement.style.top = (posTop - 50) + "px"
}
}
}
.counter {
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
transition: top linear 0.6s, left linear 0.6s;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 20px;
top: 500px;
left: 60px;
background-color: red;
}
<button id="button-one" onclick="one">Move One</button>
<button id="button-two" onclick="two">Move Two</button>
<div class="counter" id="one">1</div>
<div class="counter" id="two">2</div>
I'm trying to do a function that when I press the enter key it disappears a div (containerMessage) and another (containerResult) one appears, what am I doing wrong? When I press the enter key the function is not even called
A Live Example
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="bloco">
<h1>NSGM</h1>
<h2>Namorada Super Gostosa e Modelo</h2>
<img src="girlfriend.png">
<div id="containerMessage">
<p id="message">Qual seu nome meu amor</p>
<form>
<input type="text" name="name" id="digitarNome">
</form>
<div id="containerResult">
<p id="result">EU TE AMO RODRIGO</p>
</div>
</div>
</div>
<script src="NSGM.js"></script>
</body>
</html>
Javascript
var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
validate(e);
}
});
function validate(e) {
if (document.getElementById('containerMessage').style.display == 'block') {
document.getElementById('containerMessage').style.display = 'none'
document.getElementById('containerResult').style.display = 'block'
}
}
When you press enter, the form gets submitted, so you'll have to prevent that default behaviour:
var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
e.preventDefault(); // Prevent submitting the form
validate(e);
}
});
The other issue is that you're hiding the containerMessage div which contains your containerResult, so it will never be shown. Check the snippet below, but basically you'll just have to move the containerResult div out of the containerMessage div.
var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
e.preventDefault();
validate(e);
}
});
function validate(e) {
let container = document.getElementById("containerMessage");
if (!container.style.display || container.style.display == "block") {
container.style.display = "none";
document.getElementById("containerResult").style.display = "block";
}
}
body {
background-color: red;
margin: 0;
}
img {
height: 50vh;
}
#bloco {
text-align: center;
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
h1 {
margin: 100px 0px 0px 0px;
font-size: 10em;
}
h2 {
margin: 0;
font-size: 3em;
}
p {
font-size: 3em;
margin: 0;
}
h1,
h2,
p {
color: white;
}
input[type="text"] {
margin: 50px 0px 0px 0px;
padding: 16px 20px;
border: none;
border-radius: 8px;
background-color: #f1f1f1;
font-size: 2em;
text-align: center;
}
input[type="text"]:focus {
background-color: #ea8079;
color: white;
outline: 0;
}
#result {
font-size: 6em;
}
#containerResult {
display: none;
}
#containerMessage {
display: block;
}
<div id="bloco">
<h1>NSGM</h1>
<h2>Namorada Super Gostosa e Modelo</h2>
<div id="containerMessage">
<p id="message">Qual seu nome meu amor</p>
<form>
<input type="text" name="name" id="digitarNome" />
</form>
</div>
<div id="containerResult">
<p id="result">EU TE AMO RODRIGO</p>
</div>
</div>
The problem is that .style.display will only return the current style if it has been previously set inline or via javascript.
Otherwise, you must use:
getComputedStyle(element, null).display
where element is previously selected in the DOM.
I removed the form from the example to remove that distraction.
var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
validate(e);
}
});
function validate(e) {
let msgDiv = document.getElementById('containerMessage');
let resDiv = document.getElementById('containerResult');
let divStyle = getComputedStyle(msgDiv, null).display;
if (divStyle == 'block') {
msgDiv.style.display = 'none';
resDiv.style.display = 'block';
}
}
#containerResult{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="bloco">
<div id="containerMessage">
Nome meu amor: <input type="text" name="name" id="digitarNome">
</div>
<div id="containerResult">
<p id="result">EU TE AMO RODRIGO</p>
</div>
</div>
References:
https://stackoverflow.com/a/4866269/1447509
Element.style will only retrieve the styles from the attribute on the element so
document.getElementById('containerMessage').style.display == 'block'
Will always return false
From W3 schools https://www.w3schools.com/jsref/prop_html_style.asp
Note: The style property only returns the CSS declarations set in the element's inline style attribute, e.g.
. It is not possible to use this property to get information about style rules from the section in the document or external style sheets.
You can instead apply the display style as in line attribute like so
<div id="containerMassage" style="display:block"></div>
Following is my code
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else if(event.target === close[0]) {
container.hide();
} else {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
Here, what does not work, is when I click on the close div, the container does not close. I am very confused why it does not work. Could someone help me with this along with some insights on why it did not work with my code.
Thanks
Jeff
The close button is inside the container div so $(event.target).closest(container).length would be truthy and second else if doesn't meet. So give higher priority to the close div by updating the order of if statements.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if (event.target === close[0]) {
container.hide();
} else if (event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else {
container.hide();
}
}
init();
});
.container {
width: 400px;
height: 400px;
background-color: red;
position: relative;
//display:none;
}
.closeButton {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
The problem is in "|| $(event.target).closest(container).length" - that will be true for clicking on the close button. So instead of going to else if and else parts, it'll be true even for click button and it'll try to show the container. See updated snippet.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0]) {
container.show();
} else if(event.target === close[0]) {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
i created custom confirm box like this:
function formPopup(message, callback) {
message = message + '<div class="clear"></div><button class="mybutton" name="check" value="true">Yes</button>' +
'<button class="mybutton mybutton2" name="check" value="false">No</button>';
createPopup("Message", message);
$(".popup .body button[name='check']").bind("click", function (e) {
val = $(this).val();
if (val == "true") {
$(".popup").find(".close").trigger("click");
typeof (callback) != "undefined" ? callback() : null;
} else {
$(".popup").find(".close").trigger("click");
}
});
}
i want when i run formPopup function the page wait like "confirm" or "alert" until i will click on $(".popup .body button[name='check']").
i tried with
promise and when
but its didnt helped.
tnx a lot
Do you mean something like this?
jQuery could not get "this" in your click function, i replaced it with e.target, so event.target == the button that you are clicking.
function showPopup(message, callback) {
$(".popup").css("display", "block");
$(".title").html(message);
// only button 1, value will be true anyways, but just to show how to access the button object
$(".b1").on("click", (e) => {
var val = $(e.target).val();
if (val == "true") {
closePopup();
typeof (callback) != "undefined" ? callback() : null;
} else {
closePopup();
}
});
// button 2, try to split as much as you can, makes everything alot easier
$(".b2").on("click", (e) => {
closePopup();
});
}
function closePopup() {
$(".popup").css("display", "none");
setTimeout(() => {
showPopup("back again", () => { console.log("callback"); });
}, 2000);
}
showPopup("message", () => { console.log("callback"); });
.popup {
position: fixed;
display: none;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.popup-content {
position: absolute;
color: red;
background: green;
width: 300px;
left: calc(50% - 150px);
height: 100px;
top: calc(50% - 50px);
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clear">
</div>
<div class="popup">
<div class="popup-content">
<h1 class="title"></h1>
<button class="b1" name="check" value="true">Yes</button>
<button class="b2" name="check" value="false">No</button>
</div>
</div>
I'm trying to build my form so that when a user fills in an input and presses enter they get the next input field.
I've got this working okay in the fact it shows the next div only I can't get the validation working...
// Form on enter next div...
$(window).load(function(){
$('footer .active input').on("keyup", function(e) {
e.preventDefault();
if (e.keyCode === 13) {
if( $('footer .active input').val().length === 0 ){
alert('NO!');
} else {
var $activeElement = $("footer .active");
$( "footer .active" ).next().addClass( "active" ).removeClass('inactive');
$activeElement.removeClass("active").addClass('inactive');
}
}
});
});
form {
overflow: hidden;
width:100%; min-height:200px;
position:relative;
}
div.inactive {
position: absolute;
display: none;
width:100%;
border-bottom:1px solid rgba(255,255,255,0.3);
}
input {
padding:2.5rem 0;
font-size:4rem;
font-weight:200;
width:80%;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<form action="">
<div class="input active">
<input type="text" placeholder="Who are you?" />
</div>
<div class="input inactive">
<input type="text" placeholder="What is your Email?" />
</div>
<div class="enter-btn"></div>
</form>
</footer>
You will have to use $(document).on("keyup",'footer .active input', function(e) {})
// Form on enter next div...
$(document).on("keyup", 'footer .active input', function(e) {
if (e.keyCode == 13) {
if ($('footer .active input').val() == '') {
alert('NO!');
} else {
var $activeElement = $("footer .active");
$("footer .active").next().addClass("active");
$activeElement.removeClass("active");
}
}
});
form {
overflow: hidden;
width: 100%;
min-height: 200px;
position: relative;
}
form div.input {
position: absolute;
display: none;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
form div.input input {
padding: 2.5rem 0;
font-size: 4rem;
font-weight: 200;
width: 80%;
}
form div.input.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<form action="">
<div class="input active">
<input type="text" placeholder="Who are you?" />
</div>
<div class="input">
<input type="text" placeholder="What is your Email?" />
</div>
<div class="enter-btn"></div>
</form>
</footer>
Change the line:
if( $('footer .active input').length === '' ){
to
if( $('footer .active input').val() == '' ){
and try again.
Note: you have to check the value entered in the input.
Updated Fiddle
do not use "length === '' "
length returns a interger so you can't compare it to an empty string (with typeof string)
try
if( $('footer .active input').val().length <= 0 ){
This line of code right here:
if( $('footer .active input').length === ''
This comparison is wrong for three reasons:
You're comparing an expected number value to a string value using a strict comparison operator
You should expect the value of length to be 0, not an empty string
You're comparing the property length of a jQuery object, which is equivalent to the number of DOM elements that match your selector.
Change the line to this:
if($('footer .active input').val().length == 0)
Or this, if you don't want to check the length:
if($('footer .active input').val() == '')
Note: you might want to use e.target instead of querying the same element twice.
$('footer .active input').length is the number of elements that match the selector. If you want to get the input's value use .val() instead:
// Form on enter next div...
$('footer .active input').on("keyup", function(e) {
if (e.keyCode == 13) {
if ($('footer .active input').val() == '') {
alert('NO!');
} else {
var $activeElement = $("footer .active");
$("footer .active").next().addClass("active");
$activeElement.removeClass("active");
}
}
});
https://jsfiddle.net/g51xbfy6/2/