Javascript Animation trouble - javascript

My code is for a website where when you press the movement button the two squares will move and if you press the change colour button both squares will alternate colours. The shapes do these actions at the same time. However, only one square does this while the other does nothing... please help?
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: CadetBlue;
}
div#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: Maroon;
}
</style>
<style>
#containertwo {
width: 400px;
height: 400px;
position: relative;
background: CadetBlue;
}
div#animatetwo {
width: 50px;
height: 50px;
position: absolute;
left: 350px;
top: 0px;
background-color: Olive;
}
</style>
<body>
<p>
<button onClick="myMove()">Movement</button>
</p>
<p>
<button onClick="button_click()">Change Colour</button>
</p>
<div id ="container">
<div id ="animate"></div>
<div id ="animatetwo"></div>
</div>
<div id="box" onClick="button_click();"></div>
<script>
var colors = ["Maroon","Olive"];
function button_click() {
var box = document.getElementById("animate");
var background_color = box.style.backgroundColor;
var i = colors.indexOf(background_color);
if (i === colors.length-1) {
i = -1;
}
animate.style.backgroundColor = colors[i+1];
}
</script>
<div id="box" onClick="myMove();"></div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 1);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
<div id="box" onClick="button_click();"></div>
<script>
var colorstwo = ["Maroon","Olive"];
function button_clicktwo() {
var box = document.getElementById("animatetwo");
var background_color = box.style.backgroundColor;
var i = colorstwo.indexOf(background_color);
if (i === colorstwo.length-1) {
i = -1;
}
animatetwo.style.backgroundColor = colorstwo[i+1];
}
</script>
<div id="box" onClick="myMove();"></div>
<script>
function myMovetwo() {
var elem = document.getElementById("animatetwo");
var pos = 0;
var id = setInterval(frame, 1);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>

Ok... I'll talk about the problem you're having first, then I'll try to give you some advice.
1) First of all upon clicking the "Movement" button you're only calling the myMove() function which is only responsible for moving the animated div, as you select it with:
var elem = document.getElementById("animate");
So if you desire to move both at the same time make sure you're activating the right functions, since I imagine you wanted to call myMovetwo() at the same time perhaps you could do:
function move() {
myMove();
myMovetwo();
}
That way you would call move() and both calls will run.
2) Now about your code, you should really consider isolating the different aspects of your page, and by that I mean isolating CSS, HTML and JavaScript, you can do that using the <link> tag to import your styles and the <script src="path"></script> tag to include your javascript code.
The other advice would be to remove onclick from your html tags and get the click event from your javascript code.
There are some great sources to learn this basics concepts, perhaps codecademy is a great one for starters https://www.codecademy.com/courses/html-javascript-css/0/1
Cheers!

Related

Is there any way to make the js animation go backwards

So I've been working on an animation and I cant figure out how to make the animation go backwards. I want it to got down to up, not up to down because obviously rocket ships launch and go up, not launch and go down
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.bottom = pos + 'px';
elem.style.top = pos + 'px';
}
}
}
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: none;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<!DOCTYPE html>
<html>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<img src="data:image/jpeg;base64,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" id="myAnimation" alt="rocket" />
</div>
so ya can anyone help me please

How to use Hammer.js for swiping?

So i've got hammer.js swipe to work on my div. the swipe region looks like this
https://imgur.com/ncW4nDB
so basically, i want the orange area to be able to swipe left/right and when it reaches the end (on both sides), it halts swiping.
the script and etc :
var containerDiv = document.getElementById('list-container');
var listDiv = document.getElementById('train-line-list');
// Create a manager to manager the element
var manager = new Hammer.Manager(listDiv);
// Create a recognizer
var Swipe = new Hammer.Swipe();
// Add the recognizer to the manager
manager.add(Swipe);
// Declare global variables to swiped correct distance
var deltaX = 0;
var deltaY = 0;
// Subscribe to a desired event
manager.on('swipe', function(e) {
deltaX = deltaX + e.deltaX;
var direction = e.offsetDirection;
var translate3d = 'translate3d(' + deltaX + 'px, 0, 0)';
if (direction === 4 || direction === 2) {
e.target.innerText = deltaX;
e.target.style.transform = translate3d;
}
});
<div id="list-container">
<div id="train-line-list">
<img id="" src="">
<img id="" src="">
</div>
#list-container{
z-index: 10;
position:fixed;
top:60%;
left:0;
width:100%;
height:40%;
}
#train-line-list{
width: 95%;
height: 95%;
top: 2%;
margin: 0 auto;
position: relative;
}
like i said, the swiping sort of works but the images disappear. why does this happen and how can i fix it? Also, the swiping is not very "reactive" in a way, like its slow. not natural. is there an alternative? or a better way to implement? Also, just realized, the images can be swiped as well ?? how do i "lock" the images. i just want the container of the images to be swiped.
Here is a working example
<html>
<head>
<style>
#box {
background-color: red;
height: 100px;
width: 100px;
margin-right: 10px;
}
#collection {
display: flex;
flex-direction: horizontal;
}
#container {
display: flex;
background-color: aqua;
padding: 50px 0px 50px 0px;
overflow: scroll;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
</head>
<body>
<div id="container">
<div id="collection">
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</div>
</div>
<script>
var container = document.getElementById("container");
var content = document.getElementById("collection");
var hammer = new Hammer(container);
var initialX = 0;
var deltaX = 0;
var offset = initialX + deltaX;
hammer.on("panleft panright", function(ev) {
deltaX = ev.deltaX;
offset = initialX + deltaX;
container.scroll(-offset, 0);
});
Hammer.on(container, "mouseup", function(e) {
initialX = offset;
});
</script>
</body>
</html>
You could replace the squares with your images.

Why does my <div> element start shaking when I try to move it?

I'm new to Stack Overflow.
I have a simple webpage which tries to move a colored div element back and forth.
However when I run it the div element starts moving correctly but after a few seconds it starts shaking madly, as if its boss refused to give it the salary.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Move</title>
<link rel="stylesheet" href="D:\Web\CSS\CSS.css"/>
<script src="D:\Web\JS\JS.js">
</script>
</head>
<body>
<div id="container">
<div id="box">
</div>
</div>
</body>
</html>
JavaScript:
window.onload = function() {
var x = 0;
var box = document.getElementById("box");
setInterval(moveRight, 5);
function moveRight() {
if(x >= 150) {
clearInterval();
setInterval(moveLeft, 5);
} else {
x += 1;
box.style.left = x + "px";
}
}
function moveLeft() {
if(x <= 0) {
clearInterval();
setInterval(moveRight, 5);
} else {
x -= 1;
box.style.left = x + "px";
}
}
}
CSS:
body {
background-color: #246;
}
#container {
width: 200px;
height: 50px;
background: #268;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: #2ac;
position: absolute;
}
Plz help me
Thanks
You're not clearing the interval since you're not passing a variable to it, therefore it's not doing anything. If you set the interval to a variable, you can clear the interval when you switch the direction.
Reference: https://www.w3schools.com/jsref/met_win_clearinterval.asp
Here's an example:
(function() {
var direction;
var x = 0;
var box = document.getElementById("box");
// set the initial direction
direction = setInterval(moveRight, 5);
function moveRight() {
if (x >= 150) {
clearInterval(direction);
direction = setInterval(moveLeft, 5);
} else {
x += 1;
box.style.left = x + "px";
}
}
function moveLeft() {
if (x <= 0) {
clearInterval(direction);
direction = setInterval(moveRight, 5);
} else {
x -= 1;
box.style.left = x + "px";
}
}
})();
body {
background-color: #246;
}
#container {
width: 200px;
height: 50px;
background: #268;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: #2ac;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Move</title>
</head>
<body>
<div id="container">
<div id="box">
</div>
</div>
</body>
</html>

difficulty in comparing and assigning datatypes

to move red box over yellow container - onmouseover-> move right , onmouseout-> move left
I tried pos=document.getElementById("animate").style.left;
then by setinterval, I tried to move it using pos++ and pos--. but it didn't work. Please Help.
here's the code.
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
id_l=setInterval(move,5);
function move() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos + "px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You were doing it wrong. When you get the position, it gives you in format 100px etc. You have to trim px and then do your computation
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read `px`
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read px
id_l=setInterval(left,5);
function left() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos+"px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You can do correct by adding parseInt in both move() because it's get a string!
element.style.left is only work in inline style ! so use getComputedStyle is better
var pos = window.getComputedStyle(box).getPropertyValue('left');
function move() {
pos = parseInt(pos);
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}

Making a javascript popup draggable

I am creating a JavaScript popup. The code is as below.
The HTML:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
The CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
The Script:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
function hideNow(e) {
if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}
The jsFiddle Link:
http://jsfiddle.net/K9qL4/2/
The Issue:
The above script works fine, but I need to make the popUp draggable.
Here's some code that will do what you want. It relies only on an object called drag to store all its values, but you can easily alter that. The example relies on there being a div with the id of mydiv (a document.write() is used in this instance to supply that) that has a position attribute of absolute or fixed. You can see it in action at Jamie
document.write("<" + "div id='mydiv' style='background:blue; width:100px;"
"height:100px; position:fixed;'>" + "<" + "/div>");
var drag = new Object();
drag.obj = document.getElementById('mydiv');
drag.obj.addEventListener('mousedown', function(e)
{
drag.top = parseInt(drag.obj.offsetTop);
drag.left = parseInt(drag.obj.offsetLeft);
drag.oldx = drag.x;
drag.oldy = drag.y;
drag.drag = true;
});
window.addEventListener('mouseup', function()
{
drag.drag = false;
});
window.addEventListener('mousemove', function(e)
{
drag.x = e.clientX;
drag.y = e.clientY;
var diffw = drag.x - drag.oldx;
var diffh = drag.y - drag.oldy;
if (drag.drag)
{
drag.obj.style.left = drag.left + diffw + 'px';
drag.obj.style.top = drag.top + diffh + 'px';
e.preventDefault();
}
});
Use the
.draggable();
jquery function, here is your updated fiddle:
http://jsfiddle.net/N9rQK/
If you don't want to use jQuery, you should read this subject: Draggable div without jQuery UI

Categories