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";
}
}
Related
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
So there's a way to use media query on JavaScript, but it seems it only works when the window gets resized, but it doesn't work well when it's nested within the onscroll and onclick functions.
Try to run this code and resize the window, it works but try to set the width of your browser window to 768px, it works but when you start scrolling, it starts to revert back to tablet media query which set the elements color to the tablet mode instead of desktop mode. Even resizing the window, it's not working well when it's nested within a function. How do I fix this? Try to run this in Full Page to be able to resize the window
window.onscroll = function() {stickynavbar();}
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];
var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(min-width: 600px)");
function stickynavbar() {
function element1Query(desktop){
if (desktop.matches){
element1.style.background = "darkred";
}
else{
element1.style.background = "black";
}
}
element1Query(desktop);
desktop.addListener(element1Query);
function element1TQuery(tablet){
if (tablet.matches){
element1.style.background = "darkblue";
}
else{
element1.style.background = "black";
}
}
element1TQuery(tablet);
tablet.addListener(element1TQuery);
function element2Query(desktop){
if (desktop.matches){
element2.style.background = "darkgreen";
}
else{
element2.style.background = "gray";
}
}
element2Query(desktop);
desktop.addListener(element2Query);
function element2TQuery(tablet){
if (tablet.matches){
element2.style.background = "yellow";
}
else{
element2.style.background = "gray";
}
}
element2TQuery(tablet);
tablet.addListener(element2TQuery);
}
.element1{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 1000px;
background: black;
}
.element2{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 1000px;
background: gray;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>
</body>
</html>
You want like this?
window.onscroll = function() {stickynavbar();}
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];
var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(max-width: 600px)");
function stickynavbar() {
function element1Query(desktop){
if (desktop.matches){
element1.style.background = "darkred";
}
else{
element1.style.background = "black";
}
}
element1Query(desktop);
desktop.addListener(element1Query);
function element1TQuery(tablet){
if (tablet.matches){
element1.style.background = "darkblue";
}
else{
element1.style.background = "black";
}
}
element1TQuery(tablet);
tablet.addListener(element1TQuery);
function element2Query(desktop){
if (desktop.matches){
element2.style.background = "darkgreen";
}
else{
element2.style.background = "gray";
}
}
element2Query(desktop);
desktop.addListener(element2Query);
function element2TQuery(tablet){
if (tablet.matches){
element2.style.background = "yellow";
}
else{
element2.style.background = "gray";
}
}
element2TQuery(tablet);
tablet.addListener(element2TQuery);
}
.element1{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 1000px;
background: black;
}
.element2{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 1000px;
background: gray;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>
</body>
</html>
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>
JS: My problem is in running the following JS script, it's supposed to be very easy ,i think, but i can't understand why won't it run. I've just started coding and i'm already stuck in this problem. I want the text to go up (by increasing the bottom in CSS) for 5px until it reaches pos=6 ; then clearInterval should do its job.
CSS: I've put the position of div's to RELATIVE as i've read in some tutorials but didn't put the " container's " position to ABSOLUTE, may it be the problem?
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: ;
width: 100%;
background-color: ;
margin: 0px;
padding: 0px;
}
#generale {
height: 100%;
width: 100%;
}
#intestazione {
height: 7%;
width: 100%;
float: left;
background-image: url(immagini/sfumatura.png);
position: static;
}
#profilo {
position: static;
float: right;
width: 12%;
height: 100%;
}
.testo_rialzato {
position: relative;
float: right;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 20px;
background-color: transparent;
}
</style>
</head>
<body>
<div id="generale">
<div id="intestazione">
<div id="profilo"></div>
<div class="testo_rialzato sumba">
<p>Sp</p>
</div>
<div class="testo_rialzato ap">
<p>App</p>
</div>
<div class="testo_rialzato te">
<p>Te</p>
</div>
<div class="testo_rialzato do">
<p>Dom</p>
</div>
<div class="testo_rialzato big">
<p style="line-height:70%; margin-top:8px; text-align:center;">Big</p>
</div>
</div>
<script>
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
ez.onmouseover = alza();
var intervallo = setInterval(alza, 100);
function alza() {
var pos = 0;
if (pos = 6) {
clearInterval(intervallo);
} else {
ez.style.bottom = pos + "px";
}
}
</script>
</div>
</body>
</html>
First thing is , why declaring you are using event on an array of dome node (result of querySelectorAll will return array of domenodes ) so in order to attach mouseover and also apply some style you have to loop around those nodes .
Seconde thing while declaring set interval, its usless to use mousemovehere ?
Also the condition if is wrong you're using assignment , so you have to use == or === in order to make comaparison .
See below snippet :
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
var pos = 0;
var intervallo = setInterval(alza, 100);
ez.forEach(function(el){
el.addEventListener("mouseover", alza);
})
function alza() {
if (pos == 25) {
clearInterval(intervallo);
} else {
ez.forEach(function(el){
el.style.bottom = pos + "px";
});
pos++;
}
}
.sumba, .ap {
position:absolute;
}
.ap {
color:red;
left:40px
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="sumba">Text</div>
<div class="ap">Text 2</div>
try this
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate">ggg</div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
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!