We Keep Coding

FadeIn random Javascript Game

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>

Hover in prepend() function

HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs

Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/

Showing/hiding <div> with JavaScript

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/

Popup with same target location shows appears differently

I have two popups that come from in line code:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
This is the "target" they are referencing:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -125px;
margin-left: -200px;"></span>
Inline Code:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">
//content
</div>
And:
<div id="popup2" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">
//content
</div>
The call:
<script>
Sys.onReady(function () {
popup.show();
})
</script>
Or:
<script>
Sys.onReady(function () {
popup2.show();
})
</script>
When I call the first popup it shows up in the middle of the screen as a popup. The second one (popup2) does not. It shows up at the top left of the screen pushing the rest of the content down. Why?
Edit, here is the css:
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}

problems displaying Javascript message within <p>

I using jQuery-UI sortable which works fine. The problem that I am having is that the message "New order saved!" or "Save failed" is not displaying in the < p > area. The function is either not executing or something.
Below is the code for the .aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="jQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery.min.js" type="text/javascript"></script>
<script src="jQuery/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQuery/json2.js" type="text/javascript"></script>
<script src="jQuery/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sortable").sortable({ placeholder: "vacant" });
$("#sortable").disableSelection();
$("#sortable input[type=text]").width($("#sortable img").width() - 10);
$("#sortable label").mouseover(function () {
$(this).parent().children("input[type=text]").show().val($(this).html());
$(this).hide();
});
$("#sortable input[type=text]").mouseout(function () {
$(this).parent().children("label").show().html($(this).val());
$(this).hide();
});
$(".ContainerDiv").hover(
function () {
$(this).find(".deleteClass").show();
},
function () {
$(this).find(".deleteClass").hide();
});
$(".deleteClass").click(function () {
$(this).closest("li").remove();
});
$("#orderPhoto").click(function () {
var photos = $.map($("li.ui-state-default"), function (item, index) {
var imgDetail = new Object();
imgDetail.Id = $(item).find("img").attr("id");
imgDetail.Caption = $(item).find("label").html();
imgDetail.Order = index + 1;
return imgDetail;
});
var jsonPhotos = JSON.stringify(photos);
$.ajax({
type: "POST",
contentType: "application/json",
data: "{photos:" + jsonPhotos + "}",
url: "WebService.asmx/updatePhoto",
dataType: "json",
success: function (data) {
if (data.d === "saved") {
$("<p>").text("New order saved!")
.addClass("success").appendTo("#left");
} else {
$("<p>").text("Save failed")
.addClass("failure").appendTo("#left");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
});
</script>
<style type="text/css">
#sortable
{
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li
{
position: relative;
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
text-align: left;
}
#sortable .vacant
{
border: 3px dotted #66d164;
width: 150px;
height: 175px;
background-color: #fff;
}
#outerWrap
{
width: 1004px;
margin: auto;
position: relative;
background-color: #eee;
border: 1px solid #999;
}
#outerWrap:after
{
content: ".";
display: block;
visibility: hidden;
clear: both;
}
#left
{
width: 218px;
float: left;
}
#images
{
margin: 0;
padding: 0;
float: left;
width: 786px;
}
h1
{
font: italic normal 24px Georgia, Serif;
text-align: center;
margin: 10px 0;
}
p
{
margin: 0;
font: 12px Arial, Sans-serif;
padding: 0 10px;
}
.deleteClass
{
/* PhotoListItem is relative so relative to it */
position: absolute;
top: 1px;
right: 3px;
background: black;
color: Red;
font-weight: bold;
font-size: 12px;
padding: 5px;
opacity: 0.60;
filter: alpha(opacity="60");
margin-top: 3px;
display: none;
cursor: pointer;
}
.deleteClass:hover
{
opacity: 0.90;
filter: alpha(opacity="90");
}
.image_resize
{
width: 150px;
height: 150px;
border: 0;
}
.success, .failure
{
margin: 0 0 0 10px;
padding: 4px 0 4px 26px;
position: absolute;
bottom: 18px;
font-weight: bold;
}
.success
{
background: url('../img/tick.png') no-repeat 0 1px;
color: #12751c;
}
.failure
{
background: url('../img/cross.png') no-repeat 0 0;
color: #861b16;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div id="outerWrap">
<div id="left">
<h1>
Image Organiser</h1>
<p>
Re-order the images by dragging an image to a new location. Your changes will be
saved automatically.</p>
</div>
<div id="images">
<asp:ListView ID="ListViewAlbumPhotoView" runat="server" GroupItemCount="15">
<LayoutTemplate>
<ul id="sortable">
<li id="groupPlaceholder" runat="server">1</li>
</ul>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<li class="ui-state-default">
<div class="ContainerDiv">
<div class="deleteClass">
X</div>
<img id='<%#Eval("photo_id")%>' src='<%# "uploads/" + Eval("photo_file_name")%>'
alt="" class="image_resize" />
<div style="height: 25px; margin-top: 3px">
<label>
<%# Eval("photo_title")%></label>
<input type="text" style="display: none" />
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
<input type="button" id="orderPhoto" value="Save change" />
</div>
</div>
</form>
</body>
</html>
The problem is with
success: function (data) {
if (data.d === "saved") {
$("<p>").text("New order saved!")
.addClass("success").appendTo("#left");
} else {
$("<p>").text("Save failed")
.addClass("failure").appendTo("#left");
}
},
Could someone tell me how to message display in the < p > area?
Any help would be greatly appreciated.
Thanks

Be sure to add the closing tag as well:
$("<p></p>").text("Save failed").addClass("failure").appendTo("#left");
Update: Also make sure the success function is even being called--Use a tool like Firebug (Firefox) or Developer tools in Chrome or Safari to inspect net traffic to see what the result of your call is.

You don't use brackets around the p inside the jquery function
try $('p')
Are you trying to update the single paragraph element already there? Or do you want to insert
a new paragraph element every single time. If you want the second case, just combine everything at once.
if (data.d === "saved") {
$("<p class='success'>New order saved!</p>").appendTo("#left");
}
else {
$("<p class='failure'>Save failed!</p>").appendTo("#left");
}