I have the following game and the css green block is failing to jump on click. I can't seem to spot my error.
As you can see I have added the onclick event in the HTML and as far as I know the css animation is correctly coded in the style file. I want the character to jump calling the CSS animation, and ideally avoid a JScript function at this stage (or have both alternatives to see which is simpler for young students)
Can anyone spot and point out the error please.
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Update:
I know I could use a Jscript function like the below, but even that does not work?
JavaScript tried below (in the script.js)
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
Ideally, as mentioned, I want the simplest possible solution. Could both errors be pointed out (solution provided) so both alternatives are present in the answer. Which is the recommended way?
You could toggle a CSS class with javascript that executes your jump animation. You can't reference a CSS animation directly via JS
// Get your character div
const character = document.getElementById('character');
// Create "jump" animation that you referenced in the "onclick".
function jump() {
// Check if the animation is already started
if(!character.classList.contains('jumping')){
// Add the "jumping" class
character.classList.add('jumping');
// After "500 ms" remove the "jumping" class, duration must match your CSS animation length
setTimeout(function() {
character.classList.remove('jumping');
}, 500);
}
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
}
/* Moved the animation to it's own class so we can toggle it */
#character.jumping {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
I have this code in my index.html file stackblitz example
<html style="height: 100%;" lang="en" class="perfect-scrollbar-off nav-open">
<head>
<style type="text/css">
.loaderDiv {
background: #117CF7;
width: 100%;
height: 100%;
display: flex;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
#supersmartLogo {
width: 150px;
height: 150px;
position: absolute;
left: 45%;
top: 38%;
}
.wrapper {
background: url('./random.svg') center no-repeat;
background-size:50%;
margin: auto;
width: 240px;
height: 240px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="height: 100%;" class="g-sidenav-show g-sidenav-pinned">
<div id="root" style="height: 100%;">
<div class="loaderDiv">
<div class="wrapper">
<div class="loader"></div>
</div>
</div>
</div>
</body>
</html>
it's working fine but I have some problems:
the random.svg shows only for the first reload and when I move between pages the random.svg does not show.
how can I add a shadow under the spinner like this.
can anyone tell me how to fix it please or a better way to achieve this behavior?
I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so I may have missed something simple.Here is sample code:
<img src="LibraryTransparent.png" id="Library" />
<style>
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}
</style>
Don't know if this is too much, but this works:
HTML:
<div class="container">
<img src="https://placeimg.com/600/400/animals" alt="dog" />
<img src="https://placeimg.com/600/400/people" alt="people" />
</div>
CSS:
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 300px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
See it live Here: https://jsfiddle.net/billy_farroll/ajy5bm5f/
I have a problem starting a CSS transition automatically. Commonly this is done by adding a class to the element being animated. I'm creating my elements dynamically by jQuery. When adding the class immediately after creating the element it takes it's final state immediately without transition. It works only when I add a short delay. Not very nice, can this be done in a different way?
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
setTimeout(function () { bullet.addClass("animate"); }, 10);
}
setInterval(startbullet, 2000);
#wrapper {
height: 400px;
position: relative;
}
.bullet {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #0ff;
border-radius: 10px;
transition-duration: 5s;
transition-timing-function: linear;
}
.bullet.animate {
top: 150px;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
</div> <!-- end wrapper -->
You can use a keyframe animation instead of a transition, like this:
.bullet.animate {
animation-name: bulletIn;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#keyframes bulletIn {
0% { top: 10px; left: 10px; }
100% { top: 150px; left: 400px; }
}
Here is a fiddle for you https://jsfiddle.net/e3hqghv3/
According to this blog post you can call window.getComputedStyle before adding the class to force a redraw, I guess this is done under the hood by jquery's animate function.
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
window.getComputedStyle(bullet.get(0)).top;
bullet.addClass("animate");
}
Use jQuery.animate just before adding class
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
bullet.animate().addClass("animate");
}
setInterval(startbullet, 2000);
#wrapper {
height: 400px;
position: relative;
}
.bullet {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #0ff;
border-radius: 10px;
transition-duration: 5s;
transition-timing-function: linear;
}
.bullet.animate {
top: 150px;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
</div>
im really hoping someone can help me out with this project requirement as im new to JS or rather not advanced with it and i only have today to crack this one and no idea how.
Below is an image iwth how the effect needs to be, starts off from top to bottom, your see how it expands but curved at top and bottom until fully open.
Anyone have any ideas on how i can do this is JS / jQuery (non plugin based) i would be forever greateful if someone could help me on this.
Thanks a bunch
You can do that without Javascript / jQuery using just CSS3 border-radius. However, if you need to fire this up through your existing JS code, then simply wrap the style in a class, and apply that class on some event in your JS code.
Remember that in order to have that elliptical effect you have in your question, the block has to be rectangular and not square, otherwise you will end up in a circle.
A simple example snippet:
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
a:focus ~ div {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
Click
<div></div>
Snippet using jQuery to fire the effect:
$("#btn").on("click", function() {
$("#d1").addClass("effect");
});
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
div.effect {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" href="#">Click</a>
<div id="d1"></div>
You can try this.
Demo on dabblet
body {
background-color: black;
margin: 0 auto;
overflow: hidden;
}
#overlay {
border-top-left-radius: 1000px 100px;
border-top-right-radius: 1000px 100px;
border-bottom-left-radius: 1000px 100px;
border-bottom-right-radius: 1000px 100px;
width: 100%;
height: 100px;
background-color: white;
margin: 0;
position: absolute;
top: calc(50% - 50px);
-webkit-animation: anim 4s infinite;
animation: anim 4s infinite;
height: 800px;
top: calc(50% - 400px);
}
#-webkit-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
#-moz-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
<div id="overlay"></div>
My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.
Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`
What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?
Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>