I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.
Here are the relevant codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Maze - Zoom Zoom</title>
<script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<!-- Commands -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Commands</div>
</a>
<div class="commands">
<div class="draggable">
<input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
</div>
</div>
</ul>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row">
<div class="col">
<div class="container" id="commands"></div>
<button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#commands").empty();
});
});
</script>
</html>
You can make divs' appear or disappear using vanilla javascript only.
A simple example below:
<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>
<script>
resetButton.addEventListener('click', () => {
container.innerHTML = '';
// Or container.style.display = 'none'; if you want container to disappear without leaving space
// Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
});
</script>
Changed to:
<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>
<script type="text/javascript">
$(document).ready(function()
{
$("reset").click(function()
{
$("#commands").empty();
});
});
</script>
Related
I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.
var myTbody = document.querySelector(".table");
var button = document.querySelector(".add-stock");
var input = document.querySelector(".stock-input");
button.addEventListener("click", function () {
var td = document.querySelectorAll("td");
var row = myTbody.insertRow(td.length + 1);
var cell_univeral = row.insertCell(td.length - 1);
cell_univeral.innerHTML = input.value;
});
And this is the related html document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Technical</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="{{url_for('static', filename='css/technical.css')}}"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Technical</a>
<a class="nav-link" href="#">Alpha-Beta</a>
<a class="nav-link" href="#">Partition</a>
<a class="nav-link disabled">More</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="top-form">
<form action='#' method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Ticker Symbols</label
>
<input
type="text"
class="form-control stock-input"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="nm"
/>
<div id="symbol" class="form-text">Add stocks one at a time</div>
</div>
<div class="buttons">
<div class="add-button">
<button type="button" class="btn btn-success add-stock">Add</button>
</div>
<div class="submit-button">
<button type="submit" class="btn btn-primary submit-btn">
Submit
</button>
<div class="spinner-border my-spinner hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
<div class="bottom-from">
<table class="table table-hover">
<thead>
<th>Symbol <span class="counter"></span></th>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="alert alert-warning" role="alert">
It may take longer for multiple stocks
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script/technical.js')}}"
/></script>
</body>
</html>
Note that for the first two click events i have no problems whatsoever though i get this error when i click again
Uncaught DOMException: Index or size is negative or greater than the allowed amount
It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help
I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks
I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}
Hello everyone I have list of items in one of the screens. Once user clicks on the item I want to hide that item show the other div container and trigger the function. Here is working example of what I have so far:
function appToggle() {
var codeVal = $(this).data(code);
console.log(codeVal);
}
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
As you can see in example above if user clicks on any item in the list new container will show and list will go off the screen. I would like once they click to trigger appToggle() function that will get code value for the current element. Is there a way to trigger this function automatically without setting function as inline element? If anyone know the way to achieve this please let me know.
Did you try doing that function as an onclick listener? e.g.
$('a.list-group-item').click(function() {
var codeVal = $(this).children('span').data('code');
console.log(codeVal);
});
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
I'm having a hard time in this code. its repeating when its already chosen and i want to add data in DB when its already chosen
When I click spin the randomizer will choose the name and that name will update his status to done and it will not choose when I click again the spin button.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Binggo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app" ng-controller="app" onload="localStorage.clear()">
<div class="jumbotron text-center">
<h1>Title is here</h1>
<p>Sub details will be printed out here</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img class="left-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="left-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-6">
<img class="middle-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="middle-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-12">
<div class="col-sm-12 less"><br>
<textarea name="remarks" class="remarkss" style="width:50%; margin-left:25%; margin-top:5%;" placeholder="Enter your remarks here !" rows="8"></textarea><br>
<center><button class="btn btn-primary send">Done</button></center>
</div>
<center><button class="btn btn-success" ng-click="spin()">Spin</button></center> <br>
</div>
</div>
</div>
</body>
</html>
you're using ng-click but Angular is not imported in this HTML.
try onclick, if it fits with the way spin function is defined.