I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>
Related
I have 1 input area and one popup area when I click to input, the popup will show, and when I click anywhere else in the body (except popup and input), I want the popup to go hidden.
function show(){
document.getElementById('content').style.display = 'flex'
}
*{margin: 0;padding: 0;}
.main{width: 100%;height: 100%;background: rgb(160, 160, 160);}
input {width: 400px;height: 60px;}
.input, #content {display: flex;justify-content: center;padding-top: 20px;}
#content {display:none}
button {width: 150px;height: 50px;margin-top: 20px;}
h2 {background: #000;color: aliceblue;margin-top: 20px;text-align: center;}
.content-inner {width:400px;height: 200px;background: rgb(109, 68, 68);;}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text" onfocus="show()">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
You can listen to document click events and then check if the click happened in the input area or somewhere else, then show or hide the modal.
Since your whole visible div in the first place is a div with class="input" and you got an input inside it, so whenever the click event does not contain input class it should hide the modal and vise versa.
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input")) {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
Also if in any case, you want to close the modal if the click event happened anywhere outside the modal itself or input area you can check for another condition to see whether click event happened inside div with id="content" or not.
So the final code should be something like this:
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
So if you want to add another listener to the content inside the modal you can just define another event listener for it just like this:
const content = document.getElementById("content");
const button = document.querySelector("button");
const contentInner = document.querySelector(".content-inner");
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
button.addEventListener("click", function() {
const span = document.createElement("span");
const text = document.createTextNode("newer span");
span.append(text);
contentInner.append(span)
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click the event and hide div when clicking outside of the specific element.
<script>
$(document).mouseup(function(e){
var container = $("#elementID");
// If the target of the click isn't the container
if(!container.is(e.target) && container.has(e.target).length === 0){
container.hide();
}
});
</script>
I am curious...do the CSS scroll-snap properties have a API (events) that can be hooked into via JavaScript?
I am tinkering with the idea of creating a website that uses scroll-snap to move between 100vh "slides". After each slide is done "scroll-snapping" I would like to trigger an animation.
I am sure there are crafty ways I could check each "slide" to see if it is taking 100% of the viewport, but that sort of sucks. It would be far better to fire a function after the scroll event is complete.
Here is a super simple example:
$(document).ready(function() {
let slideNumber = $('.container > .slide').length;
if (slideNumber > 0) {
$('.container > .slide').each(function() {
$('#dotNav').append('<li></li>');
});
}
//DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE.
});
html {
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
scroll-snap-type: y mandatory;
}
.container {
width: 100%;
scroll-snap-type: y mandatory;
position: relative;
.slide {
height: 100vh;
width: 100%;
background: #cccccc;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
&:nth-child(odd) {
background: blue;
h2 {
color: #ffffff;
}
}
h2 {
margin: 0;
font-size: 40px;
text-transform: uppercase;
}
}
ul#dotNav {
position: fixed;
top: 50%;
right: 20px;
list-style: none;
li {
width: 20px;
height: 20px;
margin-bottom: 10px;
cursor: pointer;
a {
display: block;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 50%;
}
}
li.active {
background: #000000;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slide" id="slide0">
<h2>Slide 1</h2>
</div>
<div class="slide" id="slide1">
<h2>Slide 2</h2>
</div>
<div class="slide" id="slide2">
<h2>Slide 3</h2>
</div>
<ul id="dotNav">
</ul>
</div>
You can see it working here:
https://codepen.io/trafficdaddy/pen/BMGBBg
Hope someone out there has an answer! :)
You can do this with an IntersectionObserver:
document.addEventListener("DOMContentLoaded", () => {
(function scrollSpy() {
const targets = document.querySelectorAll(".section"),
options = {
threshold: 0.5
};
// check if IntersectionObserver is supported
if ("IntersectionObserver" in window) {
(() => {
const inView = target => {
const interSecObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
fireyourfunction();
}
});
}, options);
interSecObs.observe(target);
};
targets.forEach(inView);
})();
}
})();
});
I am building a simple website for a client, they have two studios and they would like to display them on googleMaps in the contact section. Problem is, I cannot display two maps at once. So I would like to make it so that when you click on one address it hides a map and displays the other and vice-versa. Here is the code:
function showMapOne() {
document.getElementById("mapOne").style.display = "block";
document.getElementById("mapTwo").style.display = "none";
}
function showMapTwo() {
document.getElementById("mapOne").style.display = "none";
document.getElementById("mapTwo").style.display = "block";
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div id="addressOne">
Via G. Mattei, 114 - Arese - MI
</div>
<div id="addressTwo">
Via Miralago, 12 - Laveno Mombello - VA
</div>
<div id="mapDivOne">
<div id="mapOne"></div>
</div>
<div id="mapDivTwo">
<div id="mapTwo"></div>
</div>
You are missing the () in the function call onClick="showMapOne()" and onClick="showMapTwo()"
Perhaps you mean this?
window.onload=function() {
document.getElementById("address_One").onclick=document.getElementById("address_Two").onclick=function() {
var id = this.id.split("_")[1];
document.getElementById("mapOne").style.display = id=="One"?"block":"none";
document.getElementById("mapTwo").style.display = id=="Two"?"block":"none";
}
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div>
<a id="address_One" href="#">Via G. Mattei, 114 - Arese - MI</a>
</div>
<div id="mapOne">Map 1</div>
<div id="addressTwo">
<a href="#" id="address_Two" >Via Miralago, 12 - Laveno Mombello - VA</a>
</div>
<div id="mapTwo">Map 2</div>
I wrote simple JavaScript to show hidden <div> after clicking another <div>. Everything works fine however when clicking checkbox in that <div> the hidden one appears and hides instantly.
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
.divCell {
width: 500px;
height: 35px;
margin: 2px 0;
display: inline-block;
background-color: #D4F78F;
}
.checkbox_div {
width: 25px;
position: relative;
margin: 5px;
float: left;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: white;
border-radius: 4px;
}
.div_name_divcell {
line-height: 35px;
width: auto;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="divCell" id="click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"><span></span>
</label>
</div>
<div class="div_name_divcell">Name1</div>
</div>
<div id="hidden1" style="display: none;">
hidden text
</div>
Fiddle:
https://jsfiddle.net/mamzj4tw/
Add event.preventdefault to your code
$(document).ready(function() {
$('#click1').click(function(event) {
event.preventDefault();
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
Here is the Fiddle: https://jsfiddle.net/mamzj4tw/1/
You can use just return false;
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
return false;
});
});
https://jsfiddle.net/shadiq_aust/m91wf79y/1/
I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>