JavaScript moving text animation doesn't work. FULL CODE - javascript

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>

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 check if an element is clicked

<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
<div class="hole hole7">
<div class="mole"></div>
</div>
<div class="hole hole8">
<div class="mole"></div>
</div>
<div class="hole hole9">
<div class="mole"></div>
</div>
</div>
.game {
width: 300px;
height: 600px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.hole {
flex: 1 0 33.33%;
overflow: hidden;
width: 100%;
position: relative;
}
.hole:after {
display: block;
background: url('gaura1.png') bottom center no-repeat;
background-size: 100%;
content: '';
width: 100%;
height:100%;
position: absolute;
z-index: 2;
}
.mole {
background: url('flowAlb.png') bottom center no-repeat;
background-size: 100%;
position: absolute;
width: 100%;
height:100%;
top:100%;
transition: all 0.4s;
}
.hole.up .mole {
top: -20px;
z-index:3;
}
I'm trying to learn web development with CSS, HTML and JAVASCRIPT(i'm new to all of them) and I'm working on some whack-a-mole game code that was free to work with. I understood what the code does, but I'm not sure how to work with. I have an event listener on click for each mole, but I wanna do something if the mole isn't clicked and I don't know how to check that. I tried different methods, using boolean variables or trying to check if the click was outside the element, but none of them worked. I'm pretty sure I didn't used them right, so I would really appreciate some help or information. I'll leave here the JS code. Thanks so much!
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const mySound=document.getElementById("sound");
const joc=document.getElementsByClassName("game");
let lastHole;
let timeUp = false;
let score = 0;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const index = Math.floor(Math.random() * holes.length);
const hole = holes[index];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(500, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) {
peep();
}
}, time);
}
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 90000)
}
function wack(e) {
if (!e.isTrusted) return;
score = score + 100;
this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', wack));
You can add a click event to the documentElement and check its target. Consequently you could also remove your other click handlers while doing this and check for the class mole.
;document.documentElement.onclick = function(event){
//REM: Target element of the click
var tTarget = event.srcElement || event.target;
//REM: Check which element was targted.
if(tTarget.id === 'sample'){
alert('You clicked on #sample')
}
else{
alert('You clicked on "' + tTarget.tagName + '"')
}
};
html, body{
height: 100%;
position: relative;
width: 100%
}
body{
background: yellow
}
div{
background: red
}
.sample{
background: lime;
height: 100%;
position: relative;
width: 100%
}
<div class = 'sample'>
<div id = 'sample'>click me or not</div>
</div>

image script not displaying

I have this code and the problem is the "main" and "left/right" image are not being displayed. I have gone through the entire logic and can't figure out what is wrong.
The code works if I replace else with else if(flag===1 && child[I].id=="left" || child[I].id=="right")
Expected output:
movement of mouse should change the image, this change is determined by the height of the <body> element.
Output getting:
only one image is displayed and does not changes no mater where I move my mouse.
[ also changing event from "mouseover" to "mousemove" does not help ]
so why isn't it working when I remove it, shouldn't at least "main" work??
PS: I'm unable to provide an image, please find another one.
'use strict';
(function() {
var wlen = screen.availWidth;
var whet = screen.availHeight;
var last = {};
var chk = 3;
var eye = document.getElementsByClassName("eyes");
var build = function(ele) {
if (ele.previousElementSibling !== null) ele.previousElementSibling.style = "none";
last = ele.style;
last.display = "block";
}
var anite = function() {
var x = event.screenX;
var y = event.screenY;
last.display = "none";
var child;
var flag;
y < whet / 3 ? flag = 2 : (y > 2 * whet / 3) ? flag = 0 : flag = 1;
x < wlen / 2 ? child = eye[1].childNodes : child = eye[0].childNodes;
for (let i = 0; i < child.length; i++) {
if (child[i].id) {
if (child[i].id == "main" && flag === 0) {
build(child[i]);
} else if (child[i].id.search(/a/i) === 0 && flag === 2) {
build(child[i]);
} else {
build(child[i]);
}
}
}
}
document.addEventListener("mouseover", anite, false);
})()
html,body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
main {
width: 100%;
overflow: hidden;
}
.eyes {
width:50%;
float: left;
height: 300px;
}
#main {
background: url('eyes.png') no-repeat 0 0;
width: 1000px;
height: 254px;
display:none;
}
#left {
background: url('eyes.png') no-repeat 0 -254px;
width: 1000px;
height: 254px;
display:none;
}
#aLeft {
background: url('eyes.png') no-repeat 0 -508px;
width: 1000px;
height: 254px;
display:none;
}
#right {
background: url('eyes.png') no-repeat 0 -762px;
width: 1000px;
height: 254px;
display:none;
}
#aRight {
background: url('eyes.png') no-repeat 0 -1016px;
width: 1000px;
height: 280px;
display:none;
}
<html>
<head>
<title>Student Details</title>
</head>
<body>
<main>
<div class="eyes">
<!-- <img src="eyes.png" alt="eyes"> -->
<p id="main"></p>
<p id="right"></p>
<p id="aRight"></p>
</div>
<div class="eyes">
<p id="main"></p>
<p id="left"></p>
<p id="aLeft"></p>
</div>
</main>
</body>
</html>

hover in css have does no effect when element is hoverd

So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green,
but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;}
div.oldiv:hover{
background-color: #48FF0D;
}
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l{
float: right;
}
<body>
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
window.onload = function (){
document.getElementById("bigdiv").innerHTML = b;
document.getElementById("bigdiv2").innerHTML = k;
}
function utd(a){
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0){
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
}else{
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
</div>
<div id="bigdiv2">
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
</body>
Don't word about all the Javascript, its just to generate elements and adding them to HTML
I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* code added START */
html, body {
height:100%;
}
div.oldiv:hover {
background-color: #48FF0D!important;
}
/* code added END */
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l {
float: right;
}
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
function utd(a) {
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0) {
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
} else {
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
<script>document.write(b);</script>
</div>
<div id="bigdiv2">
<script>document.write(k);</script>
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover}. There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.

javascript animation - buttons using previous end point

I'm trying to have a bar slide up and down over the below image, based on certain values triggered by buttons. Ideally the new "start" position every time is the previously entered "end" position (unless there is a better method). Here is the
example image
My code below accomplished most of what I want, except I'd love to have the bar smoothly slide between the desired values after each button click. Thanks!
<!DOCTYPE html>
<html>
</script>
</body>
</html>
<style>
#container {
width: 19px;
height: 186px;
position: relative;
background: clear;
margin: 0px;
}
#animate {
border: 1px solid white;
width: 32px;
height: 12px;
position: absolute;
background-color: #252525;
}
</style>
<body>
<p>
<button onclick="myMove(0 ,20)">Move to Orange</button>
<button onclick="myMove(20, 100)">Move to Green</button>
<button onclick="myMove(100, 155)">Move to Blue</button>
</p>
<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>
<script>
function myMove(start, stop) {
var elem = document.getElementById("animate");
var id = setInterval(frame, 5);
function frame() {
if (start == stop) {
clearInterval(id);
} else {
start++;
elem.style.top = start + 'px';
}
}
}
</script>
</body>
</html>
In order to have the bar slide smoothly to the next position, rather than sliding from the top again, you need to know where the bar currently is starting from.
This can be achieved in a few ways, either by having a global variable store the current position, or by recalculating the current position of it each time you call myMove.
The other thing you need to take into account is that the slider may need to slide up to get to the correct position, not just down. This is easiest to handle in the same if/else statement that you are already using to check if the bar is already in the correct position.
Example using a global variable to keep track of the current position:
(as a bonus myMove() no longer needs to be given a starting location as a parameter, just the location you want the bar to end up at).
<!DOCTYPE html>
<html>
</script>
</body>
</html>
<style>
#container {
width: 19px;
height: 186px;
position: relative;
background: clear;
margin: 0px;
}
#animate {
border: 1px solid white;
width: 32px;
height: 12px;
position: absolute;
background-color: #252525;
}
</style>
<body>
<p>
<button onclick="myMove(20)">Move to Orange</button>
<button onclick="myMove(100)">Move to Green</button>
<button onclick="myMove(5)">Move to Blue</button>
</p>
<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>
<script>
var start = 0;
function myMove(stop) {
var elem = document.getElementById("animate");
var id = setInterval(frame, 5);
function frame() {
if (start == stop) {
clearInterval(id);
} else if (start > stop){
start--;
elem.style.top = start + 'px';
} else {
start++;
elem.style.top = start + 'px';
}
}
}
</script>
</body>
</html>
Amazing smooth animation using CSS3 transition
Use of data-* attribute instead of inline JS calls
Simple JS code
var moveBtn = document.querySelectorAll("[data-move]");
var bar = document.getElementById("animate");
function move(el) {
el.addEventListener("click", function(){
bar.style.transform = "translateY("+ this.dataset.move +"px)";
});
}
[].forEach.call(moveBtn, move);
#container {
width: 19px;
height: 186px;
position: relative;
}
#animate {
border: 3px solid #444;
width: 14px;
height: 8px;
position: absolute;
top:0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
<p>
<button data-move="20">Move to Orange</button>
<button data-move="100">Move to Green</button>
<button data-move="170">Move to Blue</button>
</p>
<div id ="container">
<img src="http://i.stack.imgur.com/3pLSG.png" alt="Fit">
<div id="animate"></div>
</div>

Categories