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>
Related
I am using this code for dragging container left / right. This works well. User can also click on the "thumb". The problem is that click happens also after drag. It should be either drag or click. How can I isolate one or another? It has to work on tablets of course.
var thumbContainer = document.querySelector('.aplbox-thumb-container'),
thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
startXThumb,
startTouchThumb
if ("ontouchstart" in window) {
thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);
function dragStartThumb(e) {
if (e.preventDefault) e.preventDefault();
e.stopPropagation()
if (!startTouchThumb) {
startTouchThumb = true;
document.addEventListener('mousemove', dragMoveThumb)
document.addEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.addEventListener('touchmove', dragMoveThumb)
document.addEventListener('touchend', dragEndThumb);
}
var point;
if (e.type == 'touchstart') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var currX = thumbContainer.style.transform.replace(/[^\d.]/g, '');
currX = parseInt(currX) || 0;
startXThumb = point.pageX + currX;
}
}
function dragMoveThumb(e) {
if (startTouchThumb) {
var point;
if (e.type == 'touchmove') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var diff = point.pageX - startXThumb;
if (diff > 0) diff = 0;
else if (diff < -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth) diff = -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth;
thumbContainer.style.transform = 'translateX(' + diff + 'px)';
}
}
function dragEndThumb(e) {
e.stopPropagation()
if (startTouchThumb) {
startTouchThumb = false;
document.removeEventListener('mousemove', dragMoveThumb)
document.removeEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.removeEventListener('touchmove', dragMoveThumb)
document.removeEventListener('touchend', dragEndThumb);
}
}
}
//click thumb
thumbContainerWrap.addEventListener('click', function(e) {
if (e.target.closest('.aplbox-thumb')) {
console.log('click')
}
})
.aplbox-thumb-container-wrap {
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
width: 100%;
height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.aplbox-thumb-container {
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
touch-action: none;
}
.aplbox-thumb {
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
background: #333;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}
<div class="aplbox-thumb-container-wrap">
<div class="aplbox-thumb-container" style="width: 1300px;">
<div class="aplbox-thumb" data-id="0"></div>
<div class="aplbox-thumb" data-id="1"></div>
<div class="aplbox-thumb" data-id="2"></div>
<div class="aplbox-thumb" data-id="3"></div>
<div class="aplbox-thumb" data-id="4"></div>
<div class="aplbox-thumb" data-id="5"></div>
<div class="aplbox-thumb" data-id="6"></div>
<div class="aplbox-thumb" data-id="7"></div>
<div class="aplbox-thumb" data-id="8"></div>
<div class="aplbox-thumb" data-id="9"></div>
<div class="aplbox-thumb" data-id="10"></div>
<div class="aplbox-thumb" data-id="11"></div>
</div>
</div>
Declare the variable moved. In the dragStartThumb function set this variable to false, and in the dragMoveThumb function set it to true and in the onclick event check this variable. Like below. Something like #Amirhoseinh73 wrote, but instead of setting the flag to true in the touchend function we set the flag to true in the mousemove function, because we don't want have always variable set to true.
var thumbContainer = document.querySelector('.aplbox-thumb-container'),
thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
startXThumb,
startTouchThumb
let moved = false;
if ("ontouchstart" in window) {
thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);
function dragStartThumb(e) {
moved = false;
//if (e.preventDefault) e.preventDefault();
e.stopPropagation()
if (!startTouchThumb) {
startTouchThumb = true;
document.addEventListener('mousemove', dragMoveThumb)
document.addEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.addEventListener('touchmove', dragMoveThumb)
document.addEventListener('touchend', dragEndThumb);
}
var point;
if (e.type == 'touchstart') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
//e.preventDefault();
} else {
point = e;
//e.preventDefault();
}
var currX = thumbContainer.style.transform.replace(/[^\d.]/g, '');
currX = parseInt(currX) || 0;
startXThumb = point.pageX + currX;
}
}
function dragMoveThumb(e) {
moved = true;
if (startTouchThumb) {
var point;
if (e.type == 'touchmove') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var diff = point.pageX - startXThumb;
if (diff > 0) diff = 0;
else if (diff < -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth) diff = -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth;
thumbContainer.style.transform = 'translateX(' + diff + 'px)';
}
}
function dragEndThumb(e) {
e.stopPropagation()
if (startTouchThumb) {
startTouchThumb = false;
document.removeEventListener('mousemove', dragMoveThumb)
document.removeEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.removeEventListener('touchmove', dragMoveThumb)
document.removeEventListener('touchend', dragEndThumb);
}
}
}
//click thumb
thumbContainerWrap.addEventListener('click', function(e) {
if (e.target.closest('.aplbox-thumb') && !moved) {
console.log('click')
}
})
.aplbox-thumb-container-wrap {
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
width: 100%;
height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.aplbox-thumb-container {
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
touch-action: none;
}
.aplbox-thumb {
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
background: #333;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}
<div class="aplbox-thumb-container-wrap">
<div class="aplbox-thumb-container" style="width: 1300px;">
<div class="aplbox-thumb" data-id="0"></div>
<div class="aplbox-thumb" data-id="1"></div>
<div class="aplbox-thumb" data-id="2"></div>
<div class="aplbox-thumb" data-id="3"></div>
<div class="aplbox-thumb" data-id="4"></div>
<div class="aplbox-thumb" data-id="5"></div>
<div class="aplbox-thumb" data-id="6"></div>
<div class="aplbox-thumb" data-id="7"></div>
<div class="aplbox-thumb" data-id="8"></div>
<div class="aplbox-thumb" data-id="9"></div>
<div class="aplbox-thumb" data-id="10"></div>
<div class="aplbox-thumb" data-id="11"></div>
</div>
</div>
I want to do section-by-section scrolling on the site. I'm not happy with the jquery option and ready-made libraries, so I decided to write my own in pure javascript. But nothing works for me. Can you tell me what's wrong?
let sections = [...document.querySelectorAll('.slide')];
let currentSection = 0;
let length = sections.length - 1;
window.addEventListener('wheel', function(e) {
e.preventDefault();
(e.deltaY > 0) ? ++currentSection : --currentSection;
if (currentSection < 0) currentSection = 0;
else if (currentSection > (length)) currentSection = (length);
scrollToSection(currentSection);
});
function scrollToSection(currentSection) {
sections.forEach((item, i) => {
if (i === currentSection) {
item.scrollIntoView({
behavior: 'smooth'
})
}
});
}
* {
padding: 0;
margin: 0;
}
div {
height: 100vh;
background-color: pink;
display: flex;
flex-wrap: wrap;
border:3px solid red;
}
<main>
<div className='slide'>1</div>
<div className='slide'>2</div>
<div className='slide'>3</div>
<div className='slide'>4</div>
</main>
I have this code and the problem is the "main" and "left/right" image are not being displayed. I have gone through the entire logic and can't figure out what is wrong.
The code works if I replace else with else if(flag===1 && child[I].id=="left" || child[I].id=="right")
Expected output:
movement of mouse should change the image, this change is determined by the height of the <body> element.
Output getting:
only one image is displayed and does not changes no mater where I move my mouse.
[ also changing event from "mouseover" to "mousemove" does not help ]
so why isn't it working when I remove it, shouldn't at least "main" work??
PS: I'm unable to provide an image, please find another one.
'use strict';
(function() {
var wlen = screen.availWidth;
var whet = screen.availHeight;
var last = {};
var chk = 3;
var eye = document.getElementsByClassName("eyes");
var build = function(ele) {
if (ele.previousElementSibling !== null) ele.previousElementSibling.style = "none";
last = ele.style;
last.display = "block";
}
var anite = function() {
var x = event.screenX;
var y = event.screenY;
last.display = "none";
var child;
var flag;
y < whet / 3 ? flag = 2 : (y > 2 * whet / 3) ? flag = 0 : flag = 1;
x < wlen / 2 ? child = eye[1].childNodes : child = eye[0].childNodes;
for (let i = 0; i < child.length; i++) {
if (child[i].id) {
if (child[i].id == "main" && flag === 0) {
build(child[i]);
} else if (child[i].id.search(/a/i) === 0 && flag === 2) {
build(child[i]);
} else {
build(child[i]);
}
}
}
}
document.addEventListener("mouseover", anite, false);
})()
html,body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
main {
width: 100%;
overflow: hidden;
}
.eyes {
width:50%;
float: left;
height: 300px;
}
#main {
background: url('eyes.png') no-repeat 0 0;
width: 1000px;
height: 254px;
display:none;
}
#left {
background: url('eyes.png') no-repeat 0 -254px;
width: 1000px;
height: 254px;
display:none;
}
#aLeft {
background: url('eyes.png') no-repeat 0 -508px;
width: 1000px;
height: 254px;
display:none;
}
#right {
background: url('eyes.png') no-repeat 0 -762px;
width: 1000px;
height: 254px;
display:none;
}
#aRight {
background: url('eyes.png') no-repeat 0 -1016px;
width: 1000px;
height: 280px;
display:none;
}
<html>
<head>
<title>Student Details</title>
</head>
<body>
<main>
<div class="eyes">
<!-- <img src="eyes.png" alt="eyes"> -->
<p id="main"></p>
<p id="right"></p>
<p id="aRight"></p>
</div>
<div class="eyes">
<p id="main"></p>
<p id="left"></p>
<p id="aLeft"></p>
</div>
</main>
</body>
</html>
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 making a slideshow in Javascript with a Play / Pause and Next / Prev. I have manage to slideshow working with play/pause button, but now i wanted to add Next and Prev button to it. Can some one please help me how can i do that.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Slideshow</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button { text-align: center; }
</style>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</head>
<body>
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
</body>
</html>
Here is JavaScript:
<script language="javascript" type="text/javascript">
var i = 0;
var path = new Array();
//var timer = setInterval("slide()",2000);
var timer;
// LIST OF IMAGES
path[0] = "http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg";
path[1] = "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg";
path[2] = "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg";
path[3] = "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg";
function slide() {
document.getElementById("imgSlideshow").src = path[i];
i = (i + 1)%path.length;
//console.log(i);
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",2000);
}
}
var imgNumber = 1;
var numberOfImg = path.length;
function previousImage() {
if(imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
</script>
Any Help is appreciated and thanks in advance.
Only minor changes in the logic.
var imgNumber = 0;
var path = ["http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg"
];
var numberOfImg = path.length;
var timer = null;
function slide() {
imgNumber = (imgNumber + 1) % path.length;
console.log(imgNumber);
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
}
function setTimer() {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(slide, 2000);
}
return false;
}
function previousImage() {
--imgNumber;
if (imgNumber < 0) {
imgNumber = numberOfImg - 1;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function nextImage() {
++imgNumber;
if (imgNumber > (numberOfImg - 1)) {
imgNumber = 0;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button {
text-align: center;
}
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
<div id="counter"></div>