JavaScript and Visibility - javascript

I'm new to JavaScript and now I'm having this problem: When I launch the webpage the "btn" is invisible (hidden), but I need it to be visible until mousedown. Here is the script:
var start= false;
var racket = document.getElementById("racket");
var btn = document.getElementById("btn");
btn.style.visibility = "visible";
btn.onmousedown = Start();
function Start() {
btn.style.visibility = "hidden";
start = true;
document.onclick = RacketClick();
}
function RacketClick() {
}
When I launch the webpage, the btn is hidden... Can you help me?
UPD 1 HTML code and CSS code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>Main</title>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/mymain.js"></script>
</head>
<body>
<div id="racket"></div>
<div id="btn"></div>
</body>
</html>
#racket {
top: 100%;
margin-top: -200px;
left: 50%;
margin-left: -77px;
position: absolute;
background-image: url('/images/racket.png');
width: 154px;
height: 250px;
animation-name: racketanimation;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-duration: 4s;
animation-timing-function: linear;
animation-direction:alternate;
}
#keyframes racketanimation {
from {
transform: rotateX(40deg);
}
to {
transform: rotateX(55deg);
}
}
#btn {
top: 50%;
left: 50%;
position: absolute;
margin-top: -128px;
margin-left: -128px;
height: 256px;
width: 256px;
background-image: url('/images/playnowborder.png');
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-duration: 10s;
animation-name: clicken;
animation-timing-function: linear;
}
#keyframes clicken {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
I'm new to this website too! I would liked your answers, but I don't have reputation to vote...

You should use your function assignment without parenthesis:
btn.onmousedown = Start;
Otherwise function Start got executed at the moment of assignment and your button becomes hidden immediately.

This line is your problem:
btn.onmousedown = Start();
You are executing the function start and assigning the result (undefined) to btn.onmousedown. You should have:
btn.onmousedown = Start;
Without parenthesis, to assign the function, not call the function.

Related

Flipping (about the x axis) an image in a CSS animation

A friend and I are trying to find a way to rotate an image being played on a CSS animation. Every time the image changes direction, the image itself will rotate.
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 50px;
height: 50px;
position: relative;
animation-name: box;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
.a { }
.left { transform: scaleX(-1); }
/*
width: 12px;
height:12px;
*/
}
}
#keyframes box {
0% { left: var(--rando0); top: var(--rando1);}
25% { left: var(--rando2); top: var(--rando3);}
50% { left: var(--rando4); top: var(--rando5);}
75% { left: var(--rando6); top: var(--rando7);}
100% { left: var(--rando8); top: var(--rando9);}
}
</style>
</head>
<body>
<img src="image.gif" alt="imagehere" class='a left' class='character'>
<script>
const root = document.querySelector(":root"); // we first get the root element
for(let i = 0; i < 10; i++) {
root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
</script>
</body>
</html>
I tried this but so far nothing has worked so far. Can someone please help us? Thanks
Let me know if I need to do anything to the code to make it work better (or simplified).
maybe you need html syntax structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 50px;
height: 50px;
position: relative;
animation-name: box;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.left {
transform: scaleX(-1);
}
#keyframes box {
0% {
left: var(--rando0);
top: var(--rando1);
}
25% {
left: var(--rando2);
top: var(--rando3);
}
50% {
left: var(--rando4);
top: var(--rando5);
}
75% {
left: var(--rando6);
top: var(--rando7);
}
100% {
left: var(--rando8);
top: var(--rando9);
}
}
</style>
</head>
<img src="f.png" alt="imagehere" class='a left' class='character'>
<script>
const root = document.querySelector(":root");
for (let i = 0; i < 10; i++) {
root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
</script>
</body>
</html>

On Load Gif Followed by Looping Gif

I want to display a gif on site load and then have it change to looping gif afterward. I tried searching StackOverflow with no luck. Any direction on how to achieve this would be appreciated.
Below are the two animated icons I created. Their classes distinguish which one is on load and which one is looping.
.on-load-gif, .looping-gif{
max-width: 335px;
position: absolute;
top: 0;
left: 0;
}
.on-load-gif{
opacity: 1;
animation: fadeInAnimation ease 3s
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 2s;
}
#keyframes fadeInAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Loop</title>
</head>
<body>
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Animation-for-Rossetti-on-load.gif" class="on-load-gif"alt="" />
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/r-animation.gif" class="looping-gif" alt="" />
</body>
</html>

How to play animation on div with javascript

Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?
Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'
Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>
You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)
You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}
There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;

setTimeout to JS function inside another one

I'm looking to add setTimeout to a JS function but inside this function I have another one, I'm aware that I can use onclick=setTimeout"(fooBar(), 2500);" but there's a loader inside my function, so to make it clear, I'd like to execute the function instantly (show loader div) when the button is clicked but setTimout to 2500 ms before running $.getJSON. Let's say I want to add a fake timeOut to the api request because that stuff is blazing fast.
Also, please let me know if my loading animation method with JS is ok, actually I think it's too much lines of code to show/hide div. I'm sure there's a better way to handle something like this. Thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS Loader</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css" id="style">
#myloader {
position: relative;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: 25% -50;
border: 16px solid #000;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="col-md-4 col-md-offset-4">
<h1 id="name" >Real-time Bitcoin Price</h1>
<div id="myloader"style="display: none;"></div>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div><br>
<button id="refreshBtn" class="btn btn-primary">Load Data</button>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("refreshBtn").addEventListener("click", function () {
var x = document.getElementById('myloader');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
var x = document.getElementById('myloader');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
$("#cointime").text(data.time.updated);
$("#dollar").text("USD : " + ' ' + data.bpi.USD.rate);
$("#gbp").text("GBP : " + ' ' + data.bpi.GBP.rate);
$("#euro").text("EUR :" + ' ' + data.bpi.EUR.rate);
})
});
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
To delay the AJAX request simply wrap the $.getJSON call in a setTimeout(). Also note that you're using an odd mix of jQuery and native JS functions. I'd suggest using one or the other, something like this:
$("#refreshBtn").on("click", function() {
$('#myloader').show();
setTimeout(function() {
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function(data) {
$('#myloader').hide()
$("#cointime").text(data.time.updated);
$("#dollar").text("USD : " + ' ' + data.bpi.USD.rate);
$("#gbp").text("GBP : " + ' ' + data.bpi.GBP.rate);
$("#euro").text("EUR :" + ' ' + data.bpi.EUR.rate);
})
}, 2500);
});
#myloader {
position: relative;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: 25% -50;
border: 16px solid #000;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#myDiv {
display: none;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="col-md-4 col-md-offset-4">
<h1 id="name">Real-time Bitcoin Price</h1>
<div id="myloader" style="display: none;"></div>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div><br>
<button id="refreshBtn" class="btn btn-primary">Load Data</button>
</div>
</div>
</div>
Also I'd suggest that adding a 2.5 second delay is far too much. I'm aware that adding a slight delay to make it more obvious that data has loaded is a good idea for UX, however I'd say that 500ms would be more than enough.
First - objects/elements:
You should always cache elements that you use more than once. Means: Assign an object to a variable that can be accessed everywhere you need it. Why? Because you can use the variable as often as you like. This saves much time and processing power because you don't need to look for an element with a certain id or class again and again. This is in my case the var x.
Second - the loader:
There are easy things like show() and hide() in jQuery, but I used ternary operation. Why? It is extremely flexible and I use it all day since I knew about it. So I want to show you this as a handy option :-).
Third - the timeout:
Pretty straight forward, wrap your function in a setTimeout() and there you go.
Here is a working fiddle:
EDIT: Now you could wrap the x.style.display lines in a separate function and call this so you can reuse the code and don't have to write it twice, but I think for demonstration purpose this should be fine.
var x = document.getElementById('myloader');
document.getElementById("refreshBtn").addEventListener("click", function () {
x.style.display = (x.style.display === 'none') ? 'block' : 'none';
setTimeout(function(){
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
x.style.display = (x.style.display === 'none') ? 'block' : 'none';
$("#cointime").text(data.time.updated);
$("#dollar").text("USD : " + ' ' + data.bpi.USD.rate);
$("#gbp").text("GBP : " + ' ' + data.bpi.GBP.rate);
$("#euro").text("EUR :" + ' ' + data.bpi.EUR.rate);
});
},2500);
});
#myloader {
position: relative;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: 25% -50;
border: 16px solid #000;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="col-md-4 col-md-offset-4">
<h1 id="name" >Real-time Bitcoin Price</h1>
<div id="myloader" style="display: none;"></div>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div><br>
<button id="refreshBtn" class="btn btn-primary">Load Data</button>
</div>
</div>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
var timeout = null
function refresh () {
function load () {
$.getJSON('https://api.coindesk.com/v1/bpi/currentprice.json', function (data) {
$('#cointime').text(data.time.updated)
$('#dollar').text('USD : ' + data.bpi.USD.rate)
$('#gbp').text('GBP : ' + data.bpi.GBP.rate)
$('#euro').text('EUR : ' + data.bpi.EUR.rate)
timeout = null
})
}
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(load, 2500)
}
document.getElementById('refreshBtn').addEventListener('click', refresh)

How to rotate an image back and forth with JavaScript

I am trying to create a website and on the website I want the faces to rotate to certain point and then rotate back in the opposite direction until a certain point, I would like it if they could keep doing this forever but I can only get it to do a full rotation forever does anyone know how to fix this?
This is my HTML code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSDC</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
</script>
</head>
<body>
<img id="Dave" src="Images/Dave.png"/>
<script>rotateAnimation("Dave",30);</script>
<img id="Andy" src="Images/Andy.png" />
<script>rotateAnimation("Andy",30);</script>
<img id="Dan" src="Images/Dan.png" />
<script>rotateAnimation("Dan",30);</script>
<img id="Nico" src="Images/Nico.png" />
<script>rotateAnimation("Nico",30);</script>
</body>
</html>
And this is my CSS code
body {
font-family: Arial, sans-serif;
background-image: url("Images/BSDC.png");
background-repeat: no-repeat;
}
#Dave {
position: absolute;
margin-left: 3%;
margin-top: 3%;
}
#Andy {
margin-left: 3%;
margin-top: 35%;
position: absolute;
}
#Dan {
margin-left: 85%;
margin-top: 3%;
position: absolute;
}
#Nico {
margin-left: 85%;
margin-top: 35%;
position: absolute;
}
You can do this all with CSS animation. Check out this jsFiddle
the browser prefixes are annoying... and if anybody knows if this can be simplified please comment. But this is the concept, you set an animation on your element:
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
and then you define your animation, you can do any property changes and make as many steps in it as possible, i just used basic values (0, 25, 50 100)
#keyframes NAME-YOUR-ANIMATION {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
50% { transform: rotate(-45deg); }
100% { transform: rotate(0deg); }
}
You can read up on this stuff on MDN

Categories

Resources