Triggering a basic CSS animation with Javascript - javascript

I'm currently trying to add a Konami Code which would spin a div on one of my (very simple) pages.
Here's my code:
<html>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<html>
<script>
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
n = 0;
$(document).keydown(function (e) {
if (e.keyCode === k[n++]) {
if (n === k.length) {
alert('Konami working');
return !1
}
} else k = 0
});
</script>
<style>
#div1
{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<div id="div1"><iframe frameborder="0" width="100%" height="100%" align="middle" src="//www.youtube.com/embed/_RJHLB3cBXU?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&iv_load_policy=3&playlist=_RJHLB3cBXU"></iframe></div>
</html>
As you can see, it's just about triggering the animation specified in the messy CSS soup (which works perfectly), when the correct code is entered. I'm a bit desperate about it, would somebody have a idea ?

I think I get what your going for here, just try adding a class that contains the animations when the event occurs. I'm not 100% sure the below will work as I'm not very familiar with keyframes, but the concept should hold true and allow you to get to the answer.
$(document).keydown(function (e) {
if (e.keyCode === k[n++]) {
if (n === k.length) {
alert('Konami working');
$('#div1').addClass('spinIt'); // <- Add this
return !1
}
} else k = 0
});
CSS:
<style>
#div1
{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
// Add this class with the animation css and remove it from the above div1.
.spinIt{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
</style>

Related

How can I show an element with Google Script when trying to make HTML spinner visible?

I am trying to show a spinning loader when a button is pushed. These have no impact:
document.getElementsByClass('loader')[0].style.visibility = 'visible';
document.getElementsByClass('loader').style.visibility = 'visible';
What am I doing wrong?
html code
<html>
<script>
function clickMe() {
document.getElementById('message').innerHTML = "mp";
document.getElementsByClass('loader')[0].style.visibility = 'visible';
google.script.run.withSuccessHandler(onSuccess).ChgNm();
}
function onSuccess(value){
document.getElementById('message').innerHTML= value;
}
</script>
<head>
<base target="_top">
</head>
<body>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class ='loader' visibility : hidden>Working</div>
<div id="message" style="color:green">test to unhide loader</div>
<p><button onclick="clickMe(); return false;">Look up my personal link</button></p>
</body>
Code
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('Index.html')
.setTitle("Hello World Example");//We can set title from here
}
function ChgNm(){
return "changed the name"
}
You have 2 mistakes.
getElementsByClass() is not a function. Replace it with getElementsByClassName() like this:
document.getElementsByClassName('loader')[0].style.visibility = 'visible';
visibility : hidden is a CSS property, so it is supposed to go inside the style attribute, like this:
<div class ='loader'style="visibility:hidden">Working</div>

Div not displaying to 'none' when creating window.AddEventListener

I have an overlay in which I am looking to display to 'none' once all the content has been loaded in the page (basically creating a preloader).
I cannot see anything wrong with my code and therefore I am unsure as to why it is not working??
Any help would be great :-)
var overlay = document.getElementById("overlay");
window.addEventListener('load', function() {
overlay.style.display = 'none';
});
<div id="overlay">
<div id="preloadSpinner">
<img class="spin" src="image">
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/67_DXhS3_Hc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
#overlay {
height: 100%;
Width: 100%;
background: rgba(0, 0, 0, 1);
position: fixed;
left: 0;
top: 0;
}
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
js fiddle: https://jsfiddle.net/gxL7erwy/28/
Well your fiddle is set to run on window.onload so you are binding to window.onload inside of window.onload
SO your code is basically
window.addEventListener('load', function() {
var overlay = document.getElementById("overlay");
window.addEventListener('load', function() {
overlay.style.display = 'none';
});
});
Change JSFiddle to run the script in the body and it will work. (Click the gear icon in the JavaScript panel and adjust the dropdown)

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

JavaScript and Visibility

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.

Categories

Resources