Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have the beginnings of a simple game in JavaScript, CSS and HTML and the game was working until I created a jump function. OnClick, the character element (generated by the css as the green rectangle) should jump. Instead, it is static and doesn't move.
Initially, I had this code:
.animate{
animation: jump 500ms;
}
in the character's CSS, and it jumped continuously without any user interaction.
What have I done wrong? I assume it is something to do with this:
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
For an answer, I would appreciate the error to be pointed out, with new code and a clear explanation as to how the setTimeout function works. Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
CODE
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump() {
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 500);
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 1px solid #319b4e;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The issue, after copying the code and testing it, is that the term
document.getElementById was spelled with a lowercase b, like document.getElementbyId, these two lines should instead be:
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");`
As for setTimeout, it is a built in function , that executes a function (provided in first paramter) after a certain amount of time (specified in second parameter), this function works in the background, so it doesn't block other things from happening.
For more information on setTimeout (I used this website when I first started learning html etc....)
If you want to change it to the up arrow instead, simply add an event listener to check for the keyup event, and check that the keycode matches that for the up arrow (38), and other keys can be checked by console.loging the keyCode for the event, so somewhere in your JavaScript, do
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
So...
The entire snippet is
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Now working
Issue is:your write document.getElementbyId("character") but character b of getElementbyid is small so it through error
so correct is document.getElementById("character")
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
Yes, setTimeout is an inbuilt method. You can learn about more in here MDN Web Docs.
how the setTimeout function works
So, setTimeout method accepts a function/code and a delay (in ms) after which it will execute it. Refer to the above link.
It takes the event into event loop that will make it async call.
I will look into the code after a while and get back to you! :D
Bookmark MDN Web Docs, it is really handy!
Related
I've seen that there are different ways to fade in an object on load but every time I try to apply it to my own code I must be messing something up. I've been trying css and javascript so I'm good to use whatever I can get working.
I would like Hello to fade up on load but then 5 seconds later Next Page also fade's in.
Here's my code so far.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>
</head>
<body>
<div id="Welcome">
<h1> Hello </h1>
</div>
<div id="Next">
<h2> Next Page </h2>
</div>
<video autoplay muted loop id="VidBackground">
<source src="video/home.mp4">
</video>
</body>
</html>
and here's my css
h1, h3, a {
color: #ffffff;
line-height: 2;
}
#welcome {
position: absolute;
bottom: 15%;
right: 20%;
z-index: 2;
}
#next {
position: absolute;
bottom: 10%;
right: 20%;
z-index: 2;
}
#VidBackground {
position: fixed;
right: 0;
bottom: 0;
object-fit: cover;
z-index: -1;
}
This will be a good fit for CSS transitions.
You can use them like this:
transition: <css property> <transition-duration> <transition-function>
Example:
#next {
transition: opacity 0.5s ease-in-out;
opacity: 0;
/*pointer-events makes this node not respond to mouse/touch events
Which is probably what we want while the button is invisible.*/
pointer-events: none;
}
Now whenever the opacity style changes on #next it will transition instead of appearing instantaneous. Typically you would trigger it by some javascript.
window.onload = function() {
setTimeout(function() {
//Re-enable mouse/touch events on the #next button
document.getElementById("next").style.pointerEvents = 'auto';
//Show the #next button
//Since opacity style is transitioned, the opacity change will automatically trigger the transition.
document.getElementById("next").style.opacity = 1;
}, 5000);
});
Further reading on transitions can be found over at the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
I'm trying to create a simple, clickable pulsating dot. When clicked, it will move the user to another site. Problem is I can't make animation work, I've tried many examples, animate just simply doesn't work. The dot needs to be fully responsive. I already checked whether JQuery and JQueryUI are working.
Code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<img id="dot" class="wrapper__dot" src="images/dot.svg" alt="Click to enter site">
</div>
</body>
</html>
CSS:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
position:relative;
}
.wrapper {
position: absolute;
max-width: 45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
#dot {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
JAVASCRIPT:
function pulse() {
$('#dot').animate({
width: 200, height: 200,
opacity: 0.5
}, 700, function() {
$('#dot').animate({
width: 300, height: 300,
opacity: 1
}, 700, function() {
pulse();
});
});
};
pulse();
if (typeof jQuery.ui !== 'undefined') {
console.log('WORKING');
};
I put it in a comment, but I figure it deserves an answer of its own.
I would question whether jQuery is the right tool for the job. A simple animation like this is a task that can be done with finesse, using jQuery sort of feels like taking a sledgehammer to push a thumbtack into a cork board.
Instead, consider using CSS3 animations. They're very simple to set up, and they are basically universally supported (a handful of lesser-used browsers still need to play catch-up).
In this case, your CSS is simple:
#keyframes pulse {
from {
width: 300px;
height: 300px;
opacity: 1;
}
to {
width: 200px;
height: 200px;
opacity: 0.5;
}
}
Now that you have defined the animation, apply it to your element:
#box {
animation: pulse 700ms ease-in-out infinite alternate;
}
In order, those properties are:
Animation name: pulse
Animation duration: 700ms
Animation interpolation: ease-in-out - provides a nice bit of smoothness
Animation repeat: infinite
Animation direction: alternate - animate one way, then back, and so on
The browser will handle the animation natively. This means it will make use of things like its own refresh frames to animate it, which includes bonuses like lowering FPS (often to zero) when the browser tab is hidden to reduce CPU usage and so on. It will animate as smoothly as possible - JavaScript (and jQuery) animations may come close, but will never be quite as smooth.
Regarding browser compatibility (especially older IE)... Is it really worth using that sledgehammer just to provide a little eye candy to people with outdated technology?
What is wrong with this code? The button doesn't work after hovering it.
The code is just copied from the instructional website and it works there.
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
$(document).ready(function() {
$("div").mouseenter(function() {
$("div").fadeTo("fast", 1)
});
$("div").mouseleave(function() {
$("div").fadeTo("fast", 0.1)
});
});
Possible advise #1: You don't want to fade it away that much.
Change the value of fadeTo() to .5 as this was the initial value in your css.
Possible advise #2: It doesn't do anything when you click on it.
Add an onclick="alert('Clicked!');" to the div container.
Possible advise #3: You just want an hover effect for html element.
Why not use just CSS 3 transition:
div {
transition: opacity 1s;
opacity: .5;
}
div:hover {
opacity: 1;
}
Notice: Of course you'll can use vendor-prefixes to support more browsers, like -webkit-transition.
I tried sliding two images from right to left. The slide is working but only displaying the first image. Please what's the cause? This is my code:
<script type="text/javascript">
var n=0;
var nmax=2;
function timer()
{
window.setInterval(function ()
{
n+=1;
if(n>nmax)
{
n=0;
$('#slideImage').css('left','0');
}
$('#slideImage').css('left',(n)*(1366)*(-1)+'px');
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
css
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
and here is html
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" />
</div>
</div>
If you use jQuery anyway, why not use its animate function?
$(document).ready(function(e) {
$('.wn_p').animate({left: '-200px'}, {duration: 2500});
});
You can set a lot of options, so if you show some html and elaborate on your needs, we could better match the result you're expecting.
The fact only one image is shown could be a CSS thing. You're using an ID, but should use a class if there's more than one image.
Edit: I changed the selector to the class you added. You propably figured that out by now, but it should work this way.
For lots of cycle image effects it might be worthwhile checking out this jQuery Cycle Plugin: http://jquery.malsup.com/cycle2/
THis is a basic pager that might be of interest to start you off: http://jquery.malsup.com/cycle2/demo/pager.php
Here are lots of demos that might help: http://jquery.malsup.com/cycle2/demo/
use:
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var n=0,switcher=1; // Note change
var nmax=2;
function timer()
{
window.setInterval(function ()
{
if(switcher){ // Note change
n+=1;
}
else{ // Note change
n--; // Note change
} // Note change
if(n>=nmax) // Note change
{
switcher=0; // Note change
}
if(n<=0) // Note change
{
switcher=1; // Note change
}
$('#slideImage').animate({left:''+(n)*(1366)*(-1)+'px'},500); // Note change
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
<style type="text/css">
.des_p{height: 400px; width: 1366px;float: left; }
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
</style>
</head>
<body>
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" style="position:absolute; top:0px; left:2732px;" /><!-- Note change -->
</div>
</div>
</body>
</html>
actually problem was not in your js but it was in your css due to low height overflow was hidden..
i fixed that by using positioning of element in css..
according to your last comment i've updated answer for sliding images in both direction.
please pay attention in the lines marked by Note change at end.
hope it'll help you. cheers !!
try it
$(document).ready(function() {
$('#slideImage').animate({left: '-200px'},2500);
});
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}