I was tasked with creating an animation in javascript using an existing code and altering to do two things. Switch modes, and go on until the person closes the program. The four modes are:
mode 0 - left to right
mode 1 - top to bottom
mode 2 - right to left
mode 3 - bottom to top
Switching from mode 0 - 1 is where the trouble starts. It's supposed to slide, but it jumps when I get there.
Below is my code as is.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 350;
var id = setInterval(frame, 5);
}
function frame() {
if (pos == 0) {
pos++;
elem.style.bottom= pos + 'px';
} else {
pos--;
elem.style.left = pos + "px";
if (pos == 49.985) {
pos++;
elem.style.left = pos + "px";
}
}
I suggest you use two variables for both x and y, and replace posBottom with a variable for top style.
The issue before was that when pos was equal to 0 and thus triggered the if statement, it immediately incremented, causing it to instead trigger the else, and then decremented, going back to if, and so on. It jumped because the style.bottom = 0px was causing it to go straight down to the bottom.
function myMove() {
var elem = document.getElementById("animate");
var posLeft = 350;
var posTop = 0;
var id = setInterval(frame, 5);
function frame() {
if (posLeft == 0 && posTop != 350) {
stage=1;
posTop++;
elem.style.top= posTop + 'px';
} else if (posTop == 0) {
posLeft--;
elem.style.left = posLeft + "px";
} else if (posLeft != 350) {
posLeft++;
elem.style.left = posLeft + "px";
} else if (posTop != 0) {
posTop--;
elem.style.top= posTop + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
Related
javascript beginner here! so i'm trying to do a box(that is inside a larger box) move from the top to the edge of the box. Here's the code:
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 320) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
The problem is that the small box doesn't exactly ends up at the edge, it goes more to the right. I tried doing
boxcont.style.left = (loc - 0.5) + "px";
but doesn't work. pretty sure the solution is simple but as a newbie here it's confusing me :p. Oh and i also tried doing ++ to the 0.5 and Number(0.5) so it reads it as a decimal but still doesn't work!
the big gray box is not set to the correct height and width that corresponds with the small red box's movement. You have it going down 1 and to the right 1 every 5 however, your actually going across a rectangle, not a square. set your width and height the same for the gray box and slightly adjust the stopping point to a little bit less.
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5); // every five milliseconds
function boxmove() {
if (loc == 290) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox" style = "height: 320px; width: 320px">
<div id="boxcont" ></div>
</div>
<button id="boxbtn">Move the box</button>
if (loc == 270) {
instead of
if (loc == 320) {
Gets you there.
300px is the width of the containing div and the moving div is 30px wide so 300-30=270px
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 270) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
I have this code that after a while starts to slow down, I tried everything to reduce the script and increase performance but nothing works.
Here's a snippet with the code:
var rotated = false;
function load() {
setInterval(rain, 100);
function rain() {
var deg = rotated ? 0 : 20;
var variable = screen.width + screen.width;
var side = Math.floor((Math.random() * variable));
var pos = -20;
var element = document.createElement('div');
var position = Math.random() < 0.5 ? 1 : 3;
element.style.webkitTransform = 'rotate(' + deg + 'deg)';
element.style.mozTransform = 'rotate(' + deg + 'deg)';
element.style.msTransform = 'rotate(' + deg + 'deg)';
element.style.oTransform = 'rotate(' + deg + 'deg)';
element.style.transform = 'rotate(' + deg + 'deg)';
element.style.position = "absolute";
element.style.width = "1px";
element.style.height = "10px";
element.style.top = "-20px";
element.style.zIndex = position;
document.getElementById('body').appendChild(element);
if (position == 3) {
element.style.backgroundColor = "#0018FF";
}
if (position == 1) {
element.style.backgroundColor = "#8590FF";
}
element.style.left = side + 'px';
setInterval(frame, 1);
setInterval(frame2, 2);
setInterval(frameChecker, 100);
function frame() {
pos++;
element.style.top = pos + 'px';
}
function frame2() {
side--;
element.style.left = side + "px";
}
function frameChecker() {
element.id = pos;
if (element.id > screen.height + 500) {
element.remove();
}
}
}
}
body {
font-family: "Times New Roman", Times, serif;
}
html,
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: black
}
.center {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
text-align: center;
z-index: 2;
}
.center span {
position: relative;
font-size: 500%;
text-align: center;
top: 45%;
transform: translateY(-50%);
color: white
}
<!DOCTYPE html>
<html>
<head>
<!--CSS and SCRIPT here-->
<title>GOT 404 ERROR</title>
</head>
<body onload="load()" id="body">
<div style="width:100%; height:100%; position: relative;">
<div class="center"><span>ERROR 404</span></div>
</div>
</body>
</html>
The whole JavaScript code is to make it rain, I think the problem is in somewhere in the variables but when I set as global only one dot of "rain" shows up (by global i mean outside of any function)
so i done it:
every 100 miliseconds is added a dot, this dot start 3 functions/dot to move and check its location, so i just added a "interval cleaner",(the frameChecker() if settement here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: "Times New Roman", Times, serif;}
html, body{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: black}
.center {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
text-align: center;
z-index: 2;}
.center span{
position: relative;
font-size: 500%;
text-align: center;
top: 45%;
transform: translateY(-50%);
color: white}
</style>
<script type="text/javascript">
var rotated = false;
function load(){
setInterval(rain, 200);
function rain(){
var deg = rotated ? 0 : 20;
var variable = screen.width+screen.width;
var side = Math.floor((Math.random() * variable));
var pos = -20;
var element = document.createElement('div');
var position = Math.random() < 0.5 ? 1 : 3;
element.style.webkitTransform = 'rotate('+deg+'deg)';
element.style.mozTransform = 'rotate('+deg+'deg)';
element.style.msTransform = 'rotate('+deg+'deg)';
element.style.oTransform = 'rotate('+deg+'deg)';
element.style.transform = 'rotate('+deg+'deg)';
element.style.position = "absolute";
element.style.width = "1px";
element.style.height = "10px";
element.style.top = "-20px";
element.style.zIndex = position;
document.getElementById('body').appendChild(element);
if (position == 3){element.style.backgroundColor = "#0018FF";}
if (position == 1){element.style.backgroundColor = "#8590FF";}
element.style.left = side + 'px';
var framee = setInterval(frame, 1);
var framee2 = setInterval(frame2, 2);
var frameCheckerr = setInterval(frameChecker, 100);
function frame() {
pos++;
element.style.top = pos + 'px';}
function frame2() {
side--;
element.style.left = side + "px";}
function frameChecker(){
element.id = pos;
if (element.id > screen.height+20){element.remove();clearInterval(framee);clearInterval(framee2);clearInterval(frameCheckerr);}}}}
</script>
<title>GOT 404 ERROR</title>
</head>
<body onload="load()" id="body">
<div style="width:100%; height:100%; position: relative;">
<div class="center"><span>ERROR 404</span></div>
</div>
</body>
</html>
it was petty tuff to fund out, thanks to #Pointy for saying about the functions being allways on after called with setInterval() and also the first timer (rain()) can be used with timer set was 500 for better performace
Every time your rain() function runs because of its interval timer (every 100 milliseconds), it starts three new interval timers with even faster intervals. After a minute or so, therefore, you'll have hundreds of interval timers running. That's what is making everything slow down.
You might consider setTimeout() for those nested functions. The setTimeout function calls it's callback only once after a single delay.
In the custom slider i have created, the handle is moving beyond the container. But i want it to stay within the container limits. We could just do it simple by setting margin-left as offset in CSS. But My requirement is when the handle right end detect the container's end the handle should not be allowed to move anymore. Any help is appreciated. Thanks.
Demo Link: https://jsfiddle.net/mohanravi/1pbzdyyd/30/
document.getElementsByClassName('contain')[0].addEventListener("mousedown", downHandle);
function downHandle() {
document.addEventListener("mousemove", moveHandle);
document.addEventListener("mouseup", upHandle);
}
function moveHandle(e) {
var left = e.clientX - document.getElementsByClassName('contain')[0].getBoundingClientRect().left;
var num = document.getElementsByClassName('contain')[0].offsetWidth / 100;
var val = (left / num);
if (val < 0) {
val = 0;
} else if (val > 100) {
val = 100;
}
var pos = document.getElementsByClassName('contain')[0].getBoundingClientRect().width * (val / 100);
document.getElementsByClassName('bar')[0].style.left = pos + 'px';
}
function upHandle() {
document.removeEventListener("mousemove", moveHandle);
document.removeEventListener("mouseup", upHandle);
}
.contain {
height: 4px;
width: 450px;
background: grey;
position: relative;
top: 50px;
left: 40px;
}
.bar {
width: 90px;
height: 12px;
background: transparent;
border: 1px solid red;
position: absolute;
top: calc(50% - 7px);
left: 0px;
cursor: ew-resize;
}
<div class='contain'>
<div class='bar'></div>
</div>
You need to change
this
document.getElementsByClassName('bar')[0].style.left = pos + 'px';
to this
if(pos > 90){
document.getElementsByClassName('bar')[0].style.left = pos - 90 + 'px';
}
else{
document.getElementsByClassName('bar')[0].style.left = 0 + 'px';
}
since width of your bar is 90px I am subtracting 90.
See this updated fiddle
I know PHP,VB.net but I'm beginner in JavaScript. I have a problem with animation. The first one is working, but second one not...
var elem = document.getElementById("PrviObjekat"); (this one is working)
var elem_drugi = document.getElementById("DrugiObjekat"); (this one not, it has no logic)...
However I it calls it don't works...
Full HTML/JS code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="stilizacija.css"/>
<title>Animacija</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div id = "Animacija">
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p>
<p id = "DrugiObjekat">Ovo je drugi tekst...</p>
</div>
<br>
<script>
function Animiraj()
{
var elem = document.getElementById("PrviObjekat");
var elem_drugi = document.getElementById("DrugiObjekat");
var pos = 0;
var pos2 = 195;
var id = setInterval(frame_dole, 12);
function frame_dole()
{
if (pos == 150)
{
clearInterval(frame_dole);
id = setInterval(frame_gore, 12);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
elem_drugi.style.left = pos + 'px';
}
}
function frame_gore()
{
if (pos == 0)
{
clearInterval(id);
id = setInterval(frame_dole, 12);
} else {
pos--;
elem.style.top = pos - 'px';
elem.style.left = pos - 'px';
elem_drugi.style.left = pos - 'px';
}
}
}
var PrviKliknut = false;
$("#PrviObjekat").click(function()
{
if(PrviKliknut == false)
{
$("#PrviObjekat").css({"font-size" : "20px"});
PrviKliknut = true;
}else{
$("#PrviObjekat").css({"font-size" : "16px"});
PrviKliknut = false;
}
});
$(document).ready(function()
{
console.log("Dokument je učitan.");
Animiraj();
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);
});
</script>
</body>
</html>
CSS code:
#Animacija
{
width: 550px;
height: 550px;
position: relative;
background: yellow;
}
#PrviObjekat
{
width: 145px;
height: 75px;
position: absolute;
background: red;
}
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
}
Thanks and have a nice day.
function Animiraj()
{
var elem = document.getElementById("PrviObjekat");
var elem_drugi = document.getElementById("DrugiObjekat");
var pos = 0;
var pos2 = 195;
var id = setInterval(frame_dole, 12);
function frame_dole()
{
if (pos == 150)
{
clearInterval(frame_dole);
id = setInterval(frame_gore, 12);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
elem_drugi.style.left = pos + 'px';
}
}
function frame_gore()
{
if (pos == 0)
{
clearInterval(id);
id = setInterval(frame_dole, 12);
} else {
pos--;
elem.style.top = pos - 'px';
elem.style.left = pos - 'px';
elem_drugi.style.left = pos - 'px';
}
}
}
var PrviKliknut = false;
$("#PrviObjekat").click(function()
{
if(PrviKliknut == false)
{
$("#PrviObjekat").css({"font-size" : "20px"});
PrviKliknut = true;
}else{
$("#PrviObjekat").css({"font-size" : "16px"});
PrviKliknut = false;
}
});
$(document).ready(function()
{
console.log("Dokument je učitan.");
Animiraj();
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);
});
<style>
{
width: 550px;
height: 550px;
position: relative;
background: yellow;
}
#PrviObjekat
{
width: 145px;
height: 75px;
position: absolute;
background: red;
}
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id = "Animacija">
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p>
<p id = "DrugiObjekat">Ovo je drugi tekst...</p>
</div>
<br>
</body>
**
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
position: absolute;
}
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 6 years ago.
I am trying to make an animation in JavaScript, but there is an error i cannot find because my code won't work. I am trying to get the blue box to move diagonally from left to right but it just stays still. Please help.
function animate() {
var elem = document.getElementById('ani');
var pos = 0;
var id = setInterval(frame, 3);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
#box {
background: red;
width: 400px;
height: 400px;
position: relative;
}
#ani {
background: blue;
width: 50px;
height: 50px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css' />
<script src='script.js'></script>
<title>Practice</title>
</head>
<body>
<p>
<button onclick="animate()">OK</button>
</p>
<div id="box">
<div id="ani"></div>
</div>
</body>
</html>
Use different function name than animate. [Ref]
The Element.animate() method is a shortcut method for creating and playing an animation on an element. And when global function animate() is declared, it is shadowed by Element.prototype.animate
Try this:
function animateMe() {
var elem = document.getElementById('ani');
var pos = 0;
var id = setInterval(frame, 3);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
#box {
background: red;
width: 400px;
height: 400px;
position: relative;
}
#ani {
background: blue;
width: 50px;
height: 50px;
position: absolute;
}
<p>
<button onclick="animateMe()">OK</button>
</p>
<div id="box">
<div id="ani"></div>
</div>
Note: As explained in the provided reference, you can use window.animate() as it will not refer to shadowed prototype but Global animate function
Fiddle here