So my site basically shows the percent of strikes you have "thrown" (baseball).
I have set my JavaScript to display a gif if the percent is above 60.
However, the image seems to be ignoring the css I have set for the image. Any solutions?
Here is my HTML:
<!DOCTYPE html>
<title>Javascript Time</title>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testingJS.css">
<script src="testingJS.js" type="text/javascript"></script>
</head>
<body>
<h2>Javascript</h2>
<p id="change">Strike Percent Counter</p>
<p><input type="button" value="Ball" class="btn" onclick="throwBall()"></p>
<p><input type="button" value ="Strike" class="btn" onclick="throwStrike()"></p>
<p>Percent of Strikes:</p>
<strong><p id="percent"></p></strong>
<img id="winner" src="">
</body>
</html>
My CSS:
p, H2{
margin-bottom: -25px;
font-size: 35px;
color: white;
text-align: center;
}
#percent{
position: relative;
margin: 20px auto auto auto;
width: 25%;
font-size: 55px;
text-emphasis: 5px;
border: 7px solid gold;
}
.btn{
font-size: 29px;
float: center;
}
#winner{
margin: auto auto auto auto;
}
body{
background-image: url("http://static.zoonar.com/img/www_repository3/db/3a/39/10_4baf1185c09f28bcbe957e13a0c34fca.jpg");
}
And my JavaScript:
var ball = 0;
var strike = 0;
function throwBall(){
ball++;
var percent = strike / (ball + strike);
var round = percent.toFixed(2) * 100;
document.getElementById("percent").innerHTML = round + "%";
if (round <= 60){
document.getElementById("winner").src = "";
}
}
function throwStrike(){
strike++;
var percent = strike / (ball + strike);
var round = percent.toFixed(2) * 100;
document.getElementById("percent").innerHTML = round + "%";
if (round > 60){
document.getElementById("winner").src = "https://media.giphy.com/media/NxA9Wmq8ISblK/giphy.gif";
}
}
I'm doing this solely out of practicing my skills and have been stuck on this for sometime. Thanks in advance!
if you want to display element in the middle, set width property to fit width, display property to block and margin:0 auto;
fiddle : https://jsfiddle.net/7vuzwx8z/
Related
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
I have a game with a character that goes to a random position whenever you click on it. Also, I made it so the game automatically goes into full-screen. However, sometimes, the character goes way off-screen and (because there are no scroll bars in full-screen) you cant get to it. The code is below.
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Alfa Slab One' rel='stylesheet'> <!-- add the font used -->
<script type="text/javascript">
function move() { //move the bird
const height = screen.height; //set the screen params
const width = screen.width;
const box = document.getElementById("bird"); //search for the bird
let randY = Math.floor((Math.random() * height) + 1); //randomise the coords
let randX = Math.floor((Math.random() * width) + 1);
box.style.transform = `translate(${randX}px, ${randY}px)`; //move the bird
addScore(); //add the score
}
</script>
<script type="text/javascript">
function getreqfullscreen(){ //full screen it. I cant really understand how it works
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
function startFullScreen() {
var pagebody = document.getElementById("main");
var globalreqfullscreen = getreqfullscreen();
document.addEventListener('click', function(e){
var target = e.target
globalreqfullscreen.call(pagebody)
}, false)
}
</script>
<script type="text/javascript">
var points = 0;
function addScore() { //add the score
var pointcount = document.getElementById("scoreCount"); //get the score counter
//var points = 45; --used for testing
points = points + 1; //increment the points
pointcount.innerText = "score: " + points;
//pointCounter.removeChild(pointCounter.childNodes[0]); --used for an older prototype
}
/**************************************/
function startCountdown() { //initiate the timer - starts when the <body> loads
startFullScreen(); //make it full screen
var time = 9999999999999999999999; //would be 60, but I made it infinite
setInterval(function() { //decrease every second
var timer = document.getElementById("Timer"); //get the timer
time = time - 1; //decrement the timer
timer.innerText = "time: " + time;
if(time == 0) { //if you finished
var continuE = prompt("Would you like to restart? (type Y for yes and N for no (case sensitive)).");
if(continuE == "Y") {
window.location.reload();
} else {
history.go(-1);
}
}
},1000);
}
</script>
<style>
html {
cursor: crosshair;
background-color: #00b0e6;
user-select: none;
}
#bird {
position: absolute;
background-color: #ffffff;
cursor: crosshair;
transition: all 1s ease-in-out;
}
#bird:hover {
invert: 0 0 12px #ff0000;
}
/*
span {
height:10px;ss
width:200px;
border:5px double red;
color:#ff00ff;
background-color:#00ffff;
}
*/
p {
color: #ff00ff;
background-color: #000000;
border: 5px double red;
height: 60px;
width: 85px;
margin: 10px;
font-family: "Times New Roman";
}
.restartButton {
border-radius: 999px;
background-color: #ff00ff;
color: #00fffff;
border: 10px double blue;
transition: all 1s ease-out;
margin-left: 50%;
margin-right: 50%;
position: relative;
cursor: help;
}
.restartButton:hover {
border-radius: 999px;
background-color: #ffffff;
color: #4500fff;
border: 10px solid red;
}
#scoreCount {
color: #aff823;
position: fixed;
top: 0;
width: 10px;
height: 10px;
}
#Timer {
color: #aff823;
position: fixed;
top: 0;
left: 200px;
width: 10px;
height: 10px;
}
span {
font-family: Alfa Slab One;
}
#main {
background-color: #00b0e6;
}
</style>
</head>
<body onload="startCountdown()" id="body">
<div id="main">
<div id="pointCounter"><span id="scoreCount"></span><span id="Timer"></span></div>
<input type="button" value="RESTART" onclick="window.location.reload();" class="restartButton"/>
<img src="https://art.pixilart.com/81a784782ea5697.png" alt="" height="50px" width="50px" id="bird" onclick="move();">
</div>
<noscript>
YOU DO NOT HAVE JAVASCRIPT ENABLED. PLEASE ENABLE JAVASCRIPT ELSE THIS WEB PAGE WILL NOT WORK.
</noscript>
</body>
</html>
Because of how stack overflow works, it doesn't go into full-screen.
P.S. I have made it infinite time, it's meant to only be 60 seconds.
I am a novice HTML coder and have a silly issue!
I want to have a customized progress bar that shows the progress once SUBMIT is clicked. I tried using the tag of HTML, but it did not do the job for me.
How can I have an animation like this integrated with my code: http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource
I am not able to figure out in what section what code has to be put.
I have tried this,
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
This doesn't work because I dont want the progress bar to be visible before I click submit.
in #myBar Css Property
Display:none
is Used and in Function Again This Property is Changed to Display:inline by
elem.style.display = "inline";
Here is The Modified Code.
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
display:none; /*Displays None */
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label"></div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var label=document.getElementById("label");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.display = "inline"; //Sets Display property to its default value.
elem.style.width = width + '%';
label.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
You can use this code if you have jquery 1.8. In this version of jquery you can get progress of animation using progress property. So you can use animate() instead of setInterval() to do this work. See example
$("button").click(function(){
var width = $(".progress").children("div").width();
if (width == 0){
var percent = $(".progress").data("percent");
$(".progress").children("div").width("0%").show().animate({
"width": percent + "%"
}, {
duration: 2000,
progress: function(a, p) {
var newPer = Math.round(percent * p);
$(".progress").children("div").html(newPer + "%");
}
});
}
});
.progress {
width: 100%;
height: 30px;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 3px;
overflow: hidden;
}
.progress > div {
width: 0%;
height: 100%;
background: #1C90F3;
color: #fff;
display: none;
font-family: tahoma;
line-height: 30px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress" data-percent="80">
<div></div>
</div>
<br/>
<button>Animate progress</button>
I need to create an animation with JavaScript. I can't use CSS3. When one loads the page the progress bar should increase in width to the given parameter x.
I'm having trouble implementing it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#progressbar
{
background-color: black;
border-radius: 13px;
padding: 3px;
width:100%;
}
#progressbar2
{
background-color: orange;
width: 15%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
</style>
<script>
function func(x)
{
var result = x;
document.getElementById("progressbar2").style.width=result+"%";
document.getElementById("progressbar2").innerHTML=result +"%";
}
</script>
</head>
<body onload="func(50);">
<div id="progressbar">
<div id="progressbar2"></div>
</div>
</body>
</html>
You can use requestAnimationFrame() to accomplish what you're looking for. You can wrap up it all up in a function, like this:
// Move the progress bar to the given `n` over `overMs` ms.
function progressBarTo(id, n, overMs) {
function progressToStep(x) {
var result = x;
document.getElementById(id).style.width = result + "%";
document.getElementById(id).innerHTML = result.toFixed(2) + "%";
}
var start;
function animateBar(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
progressToStep((progress / overMs) * n);
if (progress < overMs) {
requestAnimationFrame(animateBar);
} else {
progressToStep(n);
}
}
requestAnimationFrame(animateBar);
}
progressBarTo("bar1", 20, 5000);
progressBarTo("bar2", 40, 2500);
progressBarTo("bar3", 60, 1500);
progressBarTo("bar4", 80, 750);
.outer-bar {
background-color: black;
border-radius: 13px;
padding: 3px;
width: 100%;
}
.inner-bar {
background-color: orange;
width: 0%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
<div class="outer-bar">
<div id="bar1" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar2" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar3" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar4" class="inner-bar"></div>
</div>
I'm trying to get a random generator of text and images which should be super simple but I cannot for the life of me figure out why it's not working out. Any help is greatly appreciated!
HTML
Scroll Demo #1
<body>
<div id="container">
<p>Where would you live and what would you drive?</p>
<p id="text"></p>
</div>
</body>
CSS
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
border: gray solid;
padding: auto;
background-image: url(../images/house.jpg) no-repeat;
}
#text {
font-size: 40px;
text-align: left;
}
p {
width: 100px;
color: black;
font-family: arial;
font-size: 18px;
text-align: left;
}
JQUERY
$(document).ready(function(){
var car = ["limo", "golf cart", "pig"];
var images = ["house.jpg", "dumpster.jpg", "mansion.jpg"];
var x = images[Math.Floor(Math.random() * images.length)];
document.getElementById("text").innerHTML=car[x];
$('html').css({'background-image':'url(images/' + images [x] + ')'});
});
Thanks in advance!
You appear to expect x to be a number, not an image:
var x = Math.floor(Math.random() * images.length); // not Floor