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>
Related
I am working on a beginner project and I have extreme trouble creating a simple start screen. I want to have a blank screen with a play button and a title. Pressing the play button should cause the header and button to disappear and the cards to be shown. However, when I press the play button I get this error:
Uncaught TypeError: GameLoop.start is not a function
at enterGame (blackjack.js:30:14)
at HTMLButtonElement.onclick (index.html:16:43)
I cannot figure out what this means as start is definitely a function in GameLoop. This is what I see now when I enter my game:
The dealer card and buttons show for some reason, unknown to me. Here is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>cwd.gameloop.js</title>
<meta charset="UTF-8">
<meta name="viewport" content=""width=device-width, initial-scale="1.0">
<title>Black Jack</title>
<link rel="stylesheet" href="blackjack.css">
<script src="blackjack.js"></script>
<script src="gameloop.js"></script>
</head>
<body>
<div id="start-screen" class="screen" style="display:block">
<h1>Welcome to the Blackjack trainer!</h1>
<button onclick="enterGame()">Play</button>
</div>
<canvas id="canvas" style="display:none"></canvas>
<h2>Dealer: <span id="dealer-sum"></span></h2>
<div id="dealer-cards">
<img id="hidden" src="./Card images/card_back.png">
</div>
<h2>You: <span id="player-sum"></span></h2>
<div id="player-cards"></div>
<br>
<button id="hit">Hit</button>
<button id="stand":>Stand</button>
<button id="double":>Double</button>
<button id="surr":>Surrender</button>
<p id="results"></p>
</body>
</html>
blackjack.css:
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
background-color: #225338;
}
#dealer-cards img {
height: 280px;
width: 200px;
margin: 1px;
}
#player-cards img {
height: 280px;
width: 200px;
margin: 1px;
}
#hit {
width: 100px;
height: 50px;
font-size: 20px;
}
#stand {
width: 100px;
height: 50px;
font-size: 20px;
}
#double {
width: 100px;
height: 50px;
font-size: 20px;
}
#surr {
width: 100px;
height: 50px;
font-size: 20px;
}
relevant parts of blackjack.js:
window.onload = function() {
}
window.onresize = function() {
GameLoop.onresize();
}
function enterGame() {
GameLoop.start();
}
gameloop.js:
class GameLoop {
constructor() {
this.fps = 60;
this.ctx = null;
this.cnv = null;
this.loop = null;
}
prepareCanvas() {
this.cnv = document.getElementById('canvas');
this.ctx = this.cnv.getContext('2d');
document.body.style.margin = 0;
document.body.style.padding = 0;
this.onresize();
}
onresize() {
if ( this.cnv ) {
this.cnv.width = window.innerWidth;
this.cnv.height = window.innerHeight;
this.resize();
}
}
start() {
this.toggleScreen('start-screen',false);
this.toggleScreen('canvas',true);
this.prepareCanvas();
this.init();
this.loop = setInterval(() => {
this.update();
this.render();
}, 1000/this.fps);
}
toggleScreen(id,toggle) {
let element = document.getElementById(id);
let display = ( toggle ) ? 'block' : 'none';
element.style.display = display;
}
I have been stuck on this for hours.
You have not implemented the following methods of your GameLoop class:
resize()
init()
update()
render()
You have instantiated the GameLoop class incorrectly. This is the way to do it properly:
const blackJackGame = new GameLoop()
blackJackGame.start();
Your toggleScreen() function is not a toggle function. It is a set function. You are passing the id of an element to this function with a true or false setting. A proper toggle function checks the state of the element and then flips it to the other state.
It is very difficult to understand how you want this code to work, so all that can be done is show you what is definitely not working with this code.
Finally, in your HTML, you have created a div called start-screen. It might be an idea to wrap the rest of your HTML in another div called game-screen. Then you can start by displaying the start screen and after the Enter button is pressed, you can hide the start screen and show the game screen.
Please note that I have created a CSS class called #game-screen so that the game screen is not visible at the beginning.
function enterGame() {
document.getElementById('start-screen').style.display = 'none';
document.getElementById('game-screen').style.display = 'block';
}
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
background-color: #225338;
}
#game-screen {
display: none;
}
#dealer-cards img {
height: 280px;
width: 200px;
margin: 1px;
}
#player-cards img {
height: 280px;
width: 200px;
margin: 1px;
}
#hit {
width: 100px;
height: 50px;
font-size: 20px;
}
#stand {
width: 100px;
height: 50px;
font-size: 20px;
}
#double {
width: 100px;
height: 50px;
font-size: 20px;
}
#surr {
width: 100px;
height: 50px;
font-size: 20px;
}
<div id="start-screen" class="screen" style="display:block">
<h1>Welcome to the Blackjack trainer!</h1>
<button onclick="enterGame()">Play</button>
</div>
<div id="game-screen">
<canvas id="canvas" style="display:none"></canvas>
<h2>Dealer: <span id="dealer-sum"></span></h2>
<div id="dealer-cards">
<img id="hidden" src="https://source.unsplash.com/random/100x100/?card">
</div>
<h2>You: <span id="player-sum"></span></h2>
<div id="player-cards"></div>
<br>
<button id="hit">Hit</button>
<button id="stand" :>Stand</button>
<button id="double" :>Double</button>
<button id="surr" :>Surrender</button>
<p id="results"></p>
</div>
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. CSS is working great I am pretty sure something is wrong with the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
You need to restructure your code. There are few errors found
1.Uncaught ReferenceError:
$ is not defined because link was added in between the tag it should be added with src attribute.
2.The $element argument is getting undefined because script is added before html and is unable to get the required data as it is called on page load so, I have moved it to bottom of the page.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. I am pretty sure CSS is working all right and there has to be some problem with JavaScript.The countdown did not start instead I was left with just this barenter image description here
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
</style>
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
</body>
</html>
I Think You Have Error In Many Things Like You Have To Add Jquery cdn Before script ,Error in Script tag ,And Also You Have to add html elements before script tag
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(6000, 6000, $('#progressBar'));
</script>
</body>
</html>
Try This It Work Fine For Me
I found different error, move the jquery import, and add the function on document ready.
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$(function() {
progress(600, 600, $('#progressBar')); });
</script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
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 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>