I am working on a project about the Miracle Worker play for my english class. I'm coding a game for it, but I cannot continue because my button won't click and I can't type into my text input. Does anyone know why?
body {
animation-name: example;
animation-duration: 10s;
animation-iteration count: 1000000000000000000000000000000000000000000000000000000000000;
}
#keyframes example {
0% {
background-color: turquoise;
}
25% {
background-color: lightblue;
}
50% {
background-color: blue;
}
75% {
background-color: teal;
}
100% {
background-color: cyan;
}
}
h1 {
font-family: marker felt;
position: relative;
bottom: 90px;
}
.one {
background-color: lime;
}
.two {
background-color: green;
}
div {
height: 67px;
width: 67px;
position: relative;
left: 450px;
bottom: 935px;
font-family: marker felt;
}
#u {
position: relative;
left: 385px;
top: 5px;
}
button {
background: black;
color: white;
height: 50px;
width: 100px;
font-family: marker felt;
position: relative;
bottom: 75px;
}
p {
font-family: marker felt;
text-align: right;
position: relative;
bottom: 475px;
}
input {
position: relative;
bottom: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>
The Miracle Worker Game
</title>
<script>
var pos = 0;
var ans = document.getElementById("answer").value;
var sco = 0;
function myTurn() {
if (pos == 0) {
if (ans == 2) {
sco++;
document.getElementById("zescore").innerHTML = sco;
}
}
}
</script>
</head>
<body>
<div id="u">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="smile" height=50 width=50 />
</div>
<h1>The Miracle Worker Game<br>By: Jude Farley</h1>
<h1>Score:</h1>
<h1>id="zescore">0</h1>
<h1><br><input id="answer" name="Text1" type="text" value="Ans: (True=1/False=2)"/><br><button onclick="myTurn">Submit and Move</button></h1>
<p>
Questions:
<br>
<br>1. Helen had meningitis as a baby and went blind and deaf (false)
<br>
<br>2. Kate wants to Help Helen and
<br>contacts the Perkins Institute in New York (false)
<br>
<br>3. The principal, Anagnos, sends Annie Sullivan to Helen (true)
<br>
<br>4. When Annie comes, Helen has been disciplined but needs to learn (false)
<br>
<br>5. Annie starts attempting to teach Helen sign language (true)
<br>
<br>6. Helen does not understand things have names (true)
<br>
<br>7. Annie then tries to teach Helen manners (true)
<br>
<br>8. The Kellers agree with Annie's teaching methods and
<br>let her teach Helen any way she wants (false)
<br>
<br>9. Annie takes Helen to the garden house to teach her for 2 weeks (true)
<br>
<br>10. Annie runs water over Helen's hand and Helen
<br>understands language (true)</p>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>
<div class="two">4</div>
<div class="one">5</div>
<div class="two">6</div>
<div class="one">7</div>
<div class="two">8</div>
<div class="one">9</div>
<div class="two">10</div>
</body>
</html>
If you place a z-index on the button element, you can then click successfully.
button, input{
z-index:10;
}
You can debug this using the 'Inspect Element' in any modern browser, and as you can see the <p> element is overlapping a lot of the content here. By allowing for stacking (via using z-index), you will be able to stack the desired element above and below each other.
To test this then, you can use button:hover{background:tomato}, for example, and can hence hover and click on the item.
First of all, you have a wrong ID here:
<h1>id="zescore">0</h1>
should be:
<h1 id="zescore">0</h1>
Also, you have your button in the background so you will have to put a z-index property in your button, for example, z-index: 2 to your button:
button{
z-index: 2;
}
Dude Your script should run once the document is ready
Put your script code inside document ready of jquery or javascript function
you can not acces any html element until the dom is loaded
Related
i am building a project for my company and I am wondering how do i make a div dissapear after 20 seconds? Because I am building a site with a div with position: -webkit-sticky; and
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
</style>
<div class="sticky">
<div class="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>
I would just like to know how can I set a timeout for that warning with JavaScript?
Thanks,
Ring Games
you can use a setTimeout to hide the element after 20 seconds.
const areaWarning = document.getElementById("areaWarning")
setTimeout(hideElement, 20000)
function hideElement() {
areaWarning.style.display = "none"
}
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
<div class="sticky">
<div id="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>
In vanilla JS without ES6, something like:
<script>
window.addEventListener('load', function() {
var warning = document.querySelector(".sticky");
setTimeout(function() {
warning.style.visibility = "hidden";
}, 20000);
})
</script>
I have a button, when you click it shows a loading div and opens a new tab which loads an html. I want to hide this div when the html in the new tab loads. I've tried so many things to hide this but no one works, can I have some help? I'm new on html, javascript, ajax, jquery development.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
00% { transform: rotate(360deg); }
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("div").show();
var win = window.open("new2.html");
});
});
</script>
</head>
<body>
<button id="show">Show</button>
<center>
<div id="loadingImage" style="display:none;">
<div id="white-background"></div>
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</center>
</div>
</div>
</center>
</body>
</html>
You can not remove the loading if cause your browser IS in loading state. So you might ask google or mozilla to remove it ;) It just is shown cause your new window CAN NOT LOAD THE PAGE.To open a window is like open a new browser. Without "http://whatever" it will show a error 404 or in some case this "logo". So if you use a full qualified URL nothing is shown. Your code has some more issues.
1.) jquery is depriated and overkill
2.) do not use such libs untilyou has understand javascript at its base !
3.) you should use chrome as developement browser - with F12 it opens a nice IDE which can clean up also your messy HTML code ;) Ther was some divs not correctly nested. Will mix up javascript and css.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
00% {
transform: rotate(360deg);
}
}
#white-background {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox {
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head></head>
<body>
<button id="show" onclick="javascript:winopen('new2.html');">Show</button>
<div id="progress" style="display:none;">
<div id="white-background">
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</div>
</center>
</div>
</div>
<script>
//if you load or put scripts at the end the DOM (direct before </body>) the
//page html is already loaded so no need
// for onload tricks The page is already ready here.
var win;
var progress;
var baseurl = ""
baseurl = window.location.href;//current page location
//current url
url = baseurl.split("/");
//remove current filname by split to array
url.pop();
//remove last array element
baseurl = url.join("/");
// join rest of array
console.log(baseurl);
function winopen(page) {
progress = document.getElementById("progress");// get the div by its id
//i have put the file in the same directory. i gues you has to change "/" to "/YOUR_SUBDIRECTORY e.g. /test//"
var href = baseurl + "/" + page; //create new url for the window open thing
progress.style.display = "block";// show the progress info
win = (window.open(href)); // open the window
progress.style.display = "none;"; // it's loaded hide the progress info
}
//bonus trick:
function content_manager(showme_id,hideme_id) {
document.getElementById(hideme_id).style.display="none";
document.getElementById(showme_id).style.display="block";
}
</script>
</body>
</html>
You own me a beer ;) BTW: you might not see you loading stage. Its too fast to see. Comment out the hide part or use the chrome debugger to se whats going on :)
To center things : center a info box you might also read about the z-index css property. You can hide the whole page by a div with is width 100% height 100% , has a frixed position and has a z-index: 2; so you put your loading info over the page and hide the page completely. You might use as background-color: rgba(1,1,1,.5) to make it half transparent ;)
If you are on same domain then try with localStorage:
Add this script:
<script>
localStorage.setItem("ispageloaded",false);
function load(){
var func=setTimeout(function(){
if(localStorage.getItem("ispageloaded")){
clearTimeout(func);
//Then hide loading div here...
}else{
load();
}
},2000);
}
load();
window.open("nav2.html","_blank");
</script>
Add this script to nav2.html:
<script>
localStorage.setItem("ispageloaded",true);
</script>
Hope you are understood this script...
If you are using ajax code to populate that content, you can hide that div with a single line code.
I am confused with the use and advantages of web workers. I was able to create two buttons that start two counters and the values of both counters are displayed in the screen. Also I created ball movement to create animation. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#keyframes ballmovement {
0% {
left: 0px;
top: 0px;
background-color: yellow;
}
33% {
margin-left: 100px;
margin-top: 160px;
}
66% {
margin-left: 200px;
margin-top: 0px;
}
100% {
margin-left: 300px;
margin-top: 160px;
background-color: purple;
}
}
.animate {
animation-name: ballmovement;
animation-duration: 3s;
animation-iteration-count: 40;
animation-direction: alternate;
}
#ball {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
}
#container {
float: left;
height: 500px;
width: 50%;
}
#bus {
display: inline;
}
</style>
<script>
function startWorker1() {
i = 0;
timedCount1();
}
function startWorker2() {
j = 0;
timedCount2();
}
function timedCount1() {
i = i + 1;
document.getElementById("result1").innerHTML = i;
setTimeout("timedCount1()", 500);
}
function timedCount2() {
j = j + 1;
document.getElementById("result2").innerHTML = j;
setTimeout("timedCount2()", 500);
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</head>
<body>
<div id="container">
<div id="ball" class="animate"></div>
</div>
<div id="bus">
<button onclick="startWorker1()">Start Worker 1</button>
<button onclick="startWorker2()">Start Worker 2</button>
<button onclick="stopWorker()">Stop Worker</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>
The code worked really smoothly and no process disturbed the other process.
Since I created in the code above three processes that are working in parallel, why do we need web workers?
All non-Web-worker JavaScript in a single document is single-threaded: it can only use one processor on the machine, and any significant uninterrupted processing will hog up the tab, preventing not only other JavaScript processes (*), but even display updating, even GIF animations. There are no long-running functions in your code, so you can't see the effect.
For example, try this:
function naiveFibonacci(n) {
if (n <= 2) return 1;
return naiveFibonacci(n - 1) + naiveFibonacci(n - 2);
}
s.addEventListener('click', evt => r.textContent = `is ${naiveFibonacci(parseInt(n.value))}`);
Naive Fibonacci of: <input id="n"><button id="s">Go</button> <span id="r"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif">
On my computer, naiveFibonacci(42) takes about 2 seconds. Don't go too high, or your browser pane will crash; if you go too low, you just might miss the effect. You will notice that the spinning GIF will pause while the calculation is being made.
Changing uninterrupted calculations to timeouts so that they can give the browser some breathing space is, while trivial in this case, not trivial in a general case, so while it was necessary before Web workers, it's not ideal. Offloading long calculations to Web workers is the scenario they are designed for.
*) general "processes" as in "stuff that needs to be going on", not a technical "processes" as in "instances of computer program being executed"
I am currently trying to have a part of the text one my website, when clicked scroll to a certain location in the website. I have this code which works, but just jumps, which takes away from the user interface.
The following is the code that I currently have:
Go to Part One!
<div id="part1">Hey Yeah!</div>
Please know that I don't code like that, It is just for the example.
Define a function as here:
function scrollToBox(element, offset) {
var destination = $(element).offset().top - (offset ? offset : 120);
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1500);
}
Then in onclick event you can call it like following code:
scrollToBox('#part1', 0);
Provided is a PLUNKER and a Snippet that uses jQuery animate(). The details are in the comments in the source.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' />
<style>
/* Core~~~~~~~~~~~~~~~*/
html {
box-sizing: border-box;
font: 300 16px/1.428'Quicksand';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #000;
color: #eee;
display: table;
}
h1,
h2,
h3,
h4,
h5,
h6,
legend {
font-variant: small-caps;
margin-bottom: 15px;
color: #Fc3;
text-align: center;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.3rem;
}
legend {
font-size: 1.35rem;
}
p {
margin: 0 5px 15px;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
}
a {
color: #Fc0;
text-decoration: none;
margin: 10px 20px;
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
}
a:hover {
color: #CCC;
}
header {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
border-bottom: 3px outset #bbb;
height: 80px;
z-index: 11;
background: #000;
text-align: center;
}
footer {
position: relative;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-top: 3px outset #bbb;
text-align: center;
height: 80px;
z-index: 11;
background: #000;
margin: 0 auto;
}
.content {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 20px;
}
.sec {
width: 92%;
height: auto;
border: 5px ridge #999;
border-radius: 12px;
margin: 20px auto;
}
</style>
</head>
<body>
<header>
<nav id="top">To End
</nav>
</header>
<section class="sec">
<article class="content">
<iframe src='http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll' scrolling='no' frameborder='0' width='100%'></iframe>
</article>
</section>
<main id='main'>
<article class="content">
"'I had NOT!' cried the Mouse, sharply and very angrily. 'A knot!' said Alice, always ready to make herself useful, and looking anxiously about her. 'Oh, do let me help to undo it!' 'I shall do nothing of the sort,' said the Mouse, getting up and walking
away. 'You insult me by talking such nonsense!' 'I didn't mean it!' pleaded poor Alice. 'But you're so easily offended, you know!' The Mouse only growled in reply. 'Please come back and finish your story!'
</article>
<article class="content">
Alice called after it; and the others all joined in chorus, 'Yes, please do!' but the Mouse only shook its head impatiently, and walked a little quicker. 'What a pity it wouldn't stay!' sighed the Lory, as soon as it was quite out of sight; and an old
Crab took the opportunity of saying to her daughter 'Ah, my dear! Let this be a lesson to you never to lose YOUR temper!' 'Hold your tongue, Ma!' said the young Crab, a little snappishly. 'You're enough to try the patience of an oyster!' 'I wish
I had our Dinah here, I know I do!' said Alice aloud, addressing nobody in particular.
</article>
<article class="content">
'She'd soon fetch it back!' 'And who is Dinah, if I might venture to ask the question?' said the Lory. Alice replied eagerly, for she was always ready to talk about her pet: 'Dinah's our cat. And she's such a capital one for catching mice you can't think!
And oh, I wish you could see her after the birds! Why, she'll eat a little bird as soon as look at it!' This speech caused a remarkable sensation among the party. Some of the birds hurried off at once: one old Magpie began wrapping itself up very
carefully, remarking, 'I really must be getting home; the night-air doesn't suit my throat!' and a Canary called out in a trembling voice to its children, 'Come away, my dears! It's high time you were all in bed!'"
</article>
<article class="content">
"Death!" I shouted. "Death is coming! Death!" and leaving him to digest that if he could, I hurried on after the artillery-man. At the corner I looked back. The soldier had left him, and he was still standing by his box, with the pots of orchids on the
lid of it, and staring vaguely over the trees. No one in Weybridge could tell us where the headquarters were established; the whole place was in such confusion as I had never seen in any town before. Carts, carriages everywhere, the most astonishing
miscellany of conveyances and horseflesh. The respectable inhabitants of the place, men in golf and boating costumes, wives prettily dressed, were packing, river-side loafers energetically helping, children excited, and, for the most part, highly
delighted at this astonishing variation of their Sunday experiences. In the midst of it all the worthy vicar was very pluckily holding an early celebration, and his bell was jangling out above the excitement.
</article>
<article class="content">
I and the artilleryman, seated on the step of the drinking fountain, made a very passable meal upon what we had brought with us. Patrols of soldiers--here no longer hussars, but grenadiers in white--were warning people to move now or to take refuge in
their cellars as soon as the firing began. We saw as we crossed the railway bridge that a growing crowd of people had assembled in and about the railway station, and the swarming platform was piled with boxes and packages. The ordinary traffic had
been stopped, I believe, in order to allow of the passage of troops and guns to Chertsey, and I have heard since that a savage struggle occurred for places in the special trains that were put on at a later hour.
</article>
<article class="content">
We remained at Weybridge until midday, and at that hour we found ourselves at the place near Shepperton Lock where the Wey and Thames join. Part of the time we spent helping two old women to pack a little cart. The Wey has a treble mouth, and at this
point boats are to be hired, and there was a ferry across the river. On the Shepperton side was an inn with a lawn, and beyond that the tower of Shepperton Church--it has been replaced by a spire--rose above the trees. Here we found an excited and
noisy crowd of fugitives. As yet the flight had not grown to a panic, but there were already far more people than all the boats going to and fro could enable to cross. People came panting along under heavy burdens; one husband
</article>
</main>
<section class="sec">
<article class="content">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</article>
</section>
<footer>
<nav id="end">To Top
</nav>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
//Delagate: click event to all anchors
$("a").on('click', function(event) {
//Condition: If this anchor has "href=#" then...
if (this.hash !== "") {
//Inhibit: Default behavior of anchor
event.preventDefault();
//Store anchor's "#"
var hash = this.hash;
/*
||Target the root and parent of page content.
||.animate() scrolling from clicked anchor to
||location designated by the anchor's hash.
*/
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
//return anchor behavior to anchor
window.location.hash = hash;
});
}
});
});
</script>
</body>
</html>
I am a newbie to CSS and HTML5 and JavaScript. The codes that you see below are not mine. I ran the codes on a browser and there was an image of three cars and textboxs beneath the cars and submit buttons. When I tried to add more cars to the existing code, for example I added Chrysler, Dodge, etc, the submit buttons became misaligned. What I am trying to do is to spread these cars out so that they cover the WHOLE page. At the moment, you will see three cars concentrated in the middle of your screen. What I would like to do is add 6 more cars to the existing 3 cars, so that there will be a total of 9 cars -- 3 cars per row, and there will be three rows in all. And these nine cars will be evenly spread out throughout the page. Also, if I don't want the logo of a car, but a box with the NAME of individual cars, how do I go about doing that? In other words, there will be 9 boxes in all, each box containing the actual name of the car, and beneath each box you have a textbox into which the user adds his comments, and below the textbox you have the submit radio button. My problem (as a result of inexperience) is tat when I'm adding more and more cars, the textboxes remain in place but the submit radio buttons become seriously misaligned.
Also, the background turquoise color only covers the area immediately surrounding the three cars. How can I have the color cover the whole page?
<!DOCTYPE html>
<html>
<head>
<style>
#form {
background-color: rgb(0,255,255);
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility: hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
</style>
</head>
<body>
<div id="form">
<form method="post" action="furiousindex.php">
<div class="car">
<label for="Mercedes">
<img src="http://tinyurl.com/on964r9" />
</label>
<div class="comment">
<input type="text" id="Mercedes" placeholder="Mercedes"
/>
</div>
</div>
<div class="car">
<label for="BMW">
<img src="http://tinyurl.com/on964r9" />
</label>
<div class="comment">
<input type="text" id="BMW" placeholder="BMW" />
</div>
</div>
<div class="car">
<label for="Audi">
<img src="http://tinyurl.com/on964r9" />
</label>
<div class="comment">
<input type="text" id="Audi" placeholder="Audi" />
</div>
</div>
<input id="button" type="submit" name="submit" value="Submit">
</form>
</div>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'>
</script>
<script>
$('.car').click(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
var id = $(this).children('label').attr('for');
var buttonOffset;
switch (id) {
case 'Mercedes':
buttonOffset = '0';
break;
case 'BMW':
buttonOffset = '33%';
break;
case 'Audi':
buttonOffset = '66%';
break;
}
$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});
$('.comment').mouseleave(function() {
setTimeout(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
}, 5000);
});
</script>
</body>
</html>
Add this to #form. It will restrict the size of the box around the cars to fit a max of three cars wide (based on other variables) and you can add as many rows as you like.
#form {
width: 450px;
}
To make the entire background turquoise:
body {
background-color: rgb(0,255,255);
}
I think this covers everything. If not, let me know what I missed.