Stop function until clicked ok or cancel - JQUERY - javascript

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>

Related

Checking if button clicked

Is it possible to check if (condition) onclick of an event of a button? cause I want to return a value if user click on popupButton
function showPopup(){
popup.style.visibility = "visible";
popupButton.onclick = ()=>{
popup.style.visibility = "hidden";
}
popupClose.onclick = () => {
popup.style.visibility = "hidden";
}
}
I suggest you do this
window.addEventListener("load", () => {
document.getElementById("popBut").addEventListener("click", e => {
console.log("Open button clicked"); // here you can call something
document.getElementById("popup").classList.remove("hide");
})
document.querySelector("#popup div.close").addEventListener("click", e => {
console.log("Close button clicked"); // here you can call something
document.getElementById("popup").classList.add("hide");
})
})
.hide {
display: none;
}
#popup {
height: 100px;
width: 100px;
background-color: yellow;
border: 1px solid black;
}
.close {
display: inline-block;
float: right
}
<button type="button" id="popBut">Show</button>
<div id="popup" class="hide"><div class="close">X</div>Here is a popup </div>
You are trying to read a return value from an asynchronous call. By the time the return fires the other code has already finished running. You need to use a promise and make the other code wait for a response back before executing.
function askQuestion() {
return new Promise(function(resolve, reject) {
const msg = document.getElementById("msg");
const btnYes = document.getElementById("btnYes");
const btnNo = document.getElementById("btnNo");
const cleanUp = function() {
msg.classList.remove("active");
btnYes.removeEventListener("click", yesFnc);
btnNo.removeEventListener("click", noFnc);
}
const yesFnc = function() {
resolve(true);
cleanUp();
}
const noFnc = function() {
resolve(false);
cleanUp();
}
btnYes.addEventListener("click", yesFnc);
btnNo.addEventListener("click", noFnc);
msg.classList.add("active");
});
}
function example1 () {
askQuestion().then(function(result){
console.log("The answer was: ", result);
});
}
async function example2 () {
const result = await askQuestion()
console.log("The answer was: ", result);
}
document.getElementById("test1").addEventListener("click", example1);
document.getElementById("test2").addEventListener("click", example2);
#msg {
display: none;
position: absolute;
top: 0; left: 0;
background-color: #CCC;
border: 1px solid black;
width: 300px;
padding: 1em;
}
#msg.active {
display: block;
}
<button id="test1">Example 1</button>
<button id="test2">Example 2</button>
<div id="msg">
<h2>Do you like pie?</h2>
<button id="btnYes" type="button">Yes</button>
<button id="btnNo" type="button">No</button>
</div>

How to make a generic toggle function in JQuery?

I have a sidemenu in HTML like this:
_Layout.cshtml
<div class="col nav-left h-100">
<p>Menu</p>
</div>
In my Site.js I have made a generic JQuery function for the toggle:
var eventHandler = {
addToggle: function addToggle(btnElem, openEvent, closeEvent) {
const isClosedClass = 'this-is-closed';
btnElem.click(function () {
if ($(this).hasClass(isClosedClass)) {
openEvent();
} else {
closeEvent();
}
});
}
};
In my _Layout.cshtml I call this function like this:
<script>
eventHandler.addToggle($(".btn-toggle-something"),
function () {
// Slide down
},
function () {
// Slide up
});
</script>
Now I getting stuck how to write the logic for the actual toggle on a div.
How can I toggle my side menu with a generic function?
Sources I looked:
https://api.jquery.com/toggle/
How to toggle (hide / show) sidebar div using jQuery
.slideUp() and .slideDown() in combination with .toggleClass() will work - please see below:
var eventHandler = {
addToggle: function addToggle(btnElem, openEvent, closeEvent) {
const isClosedClass = 'this-is-closed';
btnElem.click(function () {
if ($(this).hasClass(isClosedClass)) {
openEvent();
} else {
closeEvent();
}
// Toggle `isClosedClass` for next time this is clicked.
btnElem.toggleClass(isClosedClass);
});
}
};
// Bind slideDown/slideUp.
var leftNav = $('.nav-left');
eventHandler.addToggle($('.btn-toggle-something'),
function () {
leftNav.slideDown();
},
function () {
leftNav.slideUp();
}
);
body {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.nav-left {
background-color: lightskyblue;
width: 200px;
height: 400px;
}
.btn-toggle-something {
cursor: pointer;
position: fixed;
top: 0;
left: 250px;
height: 50px;
width: 50px;
background-color: salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col nav-left h-100">
<p>Menu</p>
</div>
<div class="btn-toggle-something">Toggle</div>

How do I move an object 250px on first click and 250px back on second click

I have an object and when I click the button it moves 250px.
$(document).ready(function(){
$("#jqueryAirlinesBut").click(function(){
$("#flyingDroneImage").animate({right: '250px'});
});
});
Now when I click the button again I want it to move 250px back to where it was. I am new to jQuery and it seems like there are no if statements in that language? So what do I do this?
You should use a boolean variable to be able to track which click you're on.
See the example in the snippet.
$(document).ready(function() {
var firstClick = false;
$("#jqueryAirlinesBut").on('click', function() {
if (!firstClick) {
$("#flyingDroneImage").animate({
left: '+=250px'
});
firstClick = true;
} else {
$("#flyingDroneImage").animate({
left: '-=250px'
});
firstClick = false;
}
});
});
#flyingDroneImage {
width: 30px;
height: 30px;
background-color: blue;
position: absolute;
top: 50%;
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jqueryAirlinesBut">Move</button>
<div id="flyingDroneImage"></div>
Why not just use a variable to manage state? Something like this:
var isClicked = false;
$(document).ready(function(){
$("#jqueryAirlinesBut").click(function(){
if(!isClicked){
$("#flyingDroneImage").animate({right: '250px'});
isClicked = true;
} else {
$("#flyingDroneImage").animate({right: '0px'});
isClicked = false;
}
});
});
Here is an Example which may help you:
$(document).ready(function(){
var moved=false;
$("button").click(function(){
if(moved===false){
$("div").animate({'margin-left': '250px'});
moved=true;
}else{
$("div").animate({'margin-left': '0'});
moved=false;
}
});
});
div{
width:50px;
height:50px;
background:#000;
margin-top:20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Move</button>
<div></div>
save your state
$(document).ready(function(){
// save state
var isLeft = true;
// have a function that responds to state
var goTheOtherWay = function() {
var r;
if (isLeft) {
r = {left: '250px'};
} else {
r = {left: 0};
}
isLeft = !isLeft;
return r;
};
$("#jqueryAirlinesBut").click(function() {
// pass in your state-aware function to $.animate()
$("#flyingDroneImage").animate(goTheOtherWay());
});
});
#canvas {
postiion: absolute;
}
#flyingDroneImage {
background-image: url('http://rotorfx.com/wp-content/uploads/2015/12/large_large-3.jpg');
width: 150px;
height: 150px;
border: 1px solid gray;
background-size: 100%;
background-repeat: no-repeat;
background-position-y: 50%;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jqueryAirlinesBut">jqueryAirlinesBut</button>
<div id="canvas">
<div id="flyingDroneImage"></div>
</div>
$(document).ready(function(){
$("#jqueryAirlineBut").click(function(){
( $("#flyingDroneIMage").css('left') === '0px') ?
$("#flyingDroneIMage").animate({left: '250px'}) : $("#flyingDroneIMage").animate({left: '0px'});
});
});
#flyingDroneIMage{
position:relative;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="submit" id="jqueryAirlineBut" value="Click to move"/>
<image id="flyingDroneIMage" src="http://lorempixel.com/400/200"/>
Something like this:
$(document).ready(function() {
var toggler = true; //keeps track of where to move
$("#jqueryAirlinesBut").click(function() {
$('#flyingDroneImage').animate({
right: toggler ? '-=250' : '+=250' //decides where to move based on the toggler
}, function() {
toggler = toggler ? false : true //switches the toggler
});
});
});
right: toggler ? '-=250' : '+=250'
The above is a ternary conditional operation.
It means: change the right property based on the following: if the toggler is true, the right property will have 250 pixels subtracted from the current right property, otherwise it will have 250 pixels added to it.
It could be written as
var amountToChange;
if(toggler == true){
amountToChange = '+=250'; //Adds 250 to the existing property
}else{
amountToChange = '-=250'; //Subtracts 250 from the existing property
}
The last function is a callback function, it gets called automatically when the animation finishes its last frame. You can also write that function somewhere else and pass it as the callback, and it will be executed when the animation ends.
You can read about it in the jQuery.animate documentation, it's the complete section

clicking an element to remove other element class

I am making a website I want to make a rule that, if "all" the div is clicked, the "display: none" <div> will appear by removing its 'none' class. My code is not working and I don't understand why.
I've tried everything that I know, searching the web for an answer to this problem and I can't find anything that could help me with this particular situation.
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
});
$("#btn-2").click(function() {
check2 = 1;
});
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
div {
position: fixed;
padding: 20px;
background-color: lightblue;
width: 150px;
}
#btn-1 {
bottom: 0;
}
#btn-2 {
bottom: 0;
left: 250px;
}
#btn-3 {
top: 0;
}
.none {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn-1">
</div>
<div id="btn-2">
</div>
<div id="btn-3" class="none">
</div>
Let's see what your code is really doing:
var check1;
var check2;
$("#btn-1").click(function() { // <-- this function is run after a click
check1 = 1;
});
$("#btn-2").click(function() { // <-- this function is run after a click
check2 = 1;
});
// <-- there are no clicks yet, so none of the above functions are run yet
// both click1 and click2 are undefined.
if (check1 == 1 && check2 == 1) {
// This does not run, because both click1 and click2 are undefined at this point
$("#btn-3").removeClass("none");
}
To fix this, you have to make sure the checks are done after the clicks happen. So:
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
checkClicks();
});
$("#btn-2").click(function() {
check2 = 1;
checkClicks();
});
function checkClicks() {
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
}
You have to check if all are clicked when you click a button...
var check1, check2;
$("#btn-1").click(function() {
check1 = 1;
if (check1 == 1 && check2 == 1)
$("#btn-3").removeClass("none");
});
$("#btn-2").click(function() {
check2 = 1;
if (check1 == 1 && check2 == 1)
$("#btn-3").removeClass("none");
});
add your if in event :
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
});
$("#btn-2").click(function() {
check2 = 1;
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
});
create a function something like
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
checkHide()
});
$("#btn-2").click(function() {
check2 = 1;
checkHide()
});
function checkHide(){
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
}
div {
position: fixed;
padding: 20px;
background-color: lightblue;
width: 150px;
}
#btn-1 {
bottom: 0;
}
#btn-2 {
bottom: 0;
left: 250px;
}
#btn-3 {
top: 0;
}
.none {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn-1">
</div>
<div id="btn-2">
</div>
<div id="btn-3" class="none">
</div>
The if condition that you placed outside the click even needs to be inserted inside those 2 click events.
Please have a look to the snippit for the solution.
Best Regards and Happy Coding ;)
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
});
$("#btn-2").click(function() {
check2 = 1;
if (check1 == 1 && check2 == 1) {
$("#btn-3").removeClass("none");
}
});
div {
position: fixed;
padding: 20px;
background-color: lightblue;
width: 150px;
}
#btn-1 {
bottom: 0;
}
#btn-2 {
bottom: 0;
left: 250px;
}
#btn-3 {
top: 0;
}
.none {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn-1">
</div>
<div id="btn-2">
</div>
<div id="btn-3" class="none">
</div>
The conditional statement within the code block of the click event, otherwise your if statement will not fire when the conditions are met true
var check1;
var check2;
$("#btn-1").click(function() {
check1 = 1;
console.log(check1);
if (check1 && check2) {
$("#btn-3").removeClass("none");
}
});
$("#btn-2").click(function() {
check2 = 1;
console.log(check2);
if (check1 && check2) {
$("#btn-3").removeClass("none");
}
});
div {
position: fixed;
padding: 20px;
background-color: lightblue;
width: 150px;
}
#btn-1 {
bottom: 0;
}
#btn-2 {
bottom: 0;
left: 250px;
}
#btn-3 {
top: 0;
}
.none {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn-1">
</div>
<div id="btn-2">
</div>
<div id="btn-3" class="none">
</div>

Making a javascript popup draggable

I am creating a JavaScript popup. The code is as below.
The HTML:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
The CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
The Script:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
function hideNow(e) {
if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}
The jsFiddle Link:
http://jsfiddle.net/K9qL4/2/
The Issue:
The above script works fine, but I need to make the popUp draggable.
Here's some code that will do what you want. It relies only on an object called drag to store all its values, but you can easily alter that. The example relies on there being a div with the id of mydiv (a document.write() is used in this instance to supply that) that has a position attribute of absolute or fixed. You can see it in action at Jamie
document.write("<" + "div id='mydiv' style='background:blue; width:100px;"
"height:100px; position:fixed;'>" + "<" + "/div>");
var drag = new Object();
drag.obj = document.getElementById('mydiv');
drag.obj.addEventListener('mousedown', function(e)
{
drag.top = parseInt(drag.obj.offsetTop);
drag.left = parseInt(drag.obj.offsetLeft);
drag.oldx = drag.x;
drag.oldy = drag.y;
drag.drag = true;
});
window.addEventListener('mouseup', function()
{
drag.drag = false;
});
window.addEventListener('mousemove', function(e)
{
drag.x = e.clientX;
drag.y = e.clientY;
var diffw = drag.x - drag.oldx;
var diffh = drag.y - drag.oldy;
if (drag.drag)
{
drag.obj.style.left = drag.left + diffw + 'px';
drag.obj.style.top = drag.top + diffh + 'px';
e.preventDefault();
}
});
Use the
.draggable();
jquery function, here is your updated fiddle:
http://jsfiddle.net/N9rQK/
If you don't want to use jQuery, you should read this subject: Draggable div without jQuery UI

Categories