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
Related
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>
I have looked into trying to test internet connection to prevent people from being left on a loading screen for too long and I haven't found a good method for this. Is there a way I can figure out how long my loading animation has run for and if it exceeds x amount of seconds/ minutes to display an alert to check the connection? I am familiar with JavaScript and some libraries and open to other languages just want the job done. Thanks!
P.S.: Below is the code and animation I have as the loading screen and because if it doesn't connect to a jQuery CDN it won't load I want to mitigate time people spend on said screen.
$(window).on('load', function() {
$('.loader').delay(1000).fadeOut(500);
$('.page_cover').delay(1000).fadeOut(500);
$('.load-txt-cont').delay(1000).fadeOut(500);
});
body,
html {
margin: 0;
padding: 0;
border: none;
display: flex;
flex-direction: column;
text-decoration: none;
color: #ffffff;
background-color: #3b404d;
font-family: 'Raleway', Arial, Helvetica, sans-serif;
overflow-x: hidden;
scroll-behavior: smooth;
outline: none;
}
.page_cover {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: #3b404d;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
}
.conet-cont {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 19.2px;
}
.loader {
width: 115.2px;
height: 115.2px;
border-radius: 100%;
border: 4.8px solid #fff;
z-index: 10;
animation: load 1.25s linear infinite alternate;
-webkit-animation: load 1.25s linear infinite alternate;
-ms-animation: load 1.25s linear infinite alternate;
-moz-animation: load 1.25s linear infinite alternate;
-o-animation: load 1.25s linear infinite alternate;
}
#keyframes load {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes load {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-ms-keyframes load {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-moz-keyframes load {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes load {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Cafe | Home</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Playball|Lobster+Two" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<style>
#font-face {
font-family: 'Ballet Harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div class="page_cover">
<div class="conet-cont">
<h2 class="load-txt">Preparing everything for you...</h1>
<div class="loader"></div>
</div>
</div>
<h1>Loaded Content</h1>
</body>
The request seems to be a test for network connection after a certain time.
Simple network connectivity can be detected with the Navigator.onLine property.
let online = navigator.onLine;
To use a time delay before informing the user, you can use the setTimeout() function.
let timeout = setTimeout(myTimeoutHandler, 5000);
A very simple example that checks the connection after 5 seconds, showing an alert if there is no connection:
setTimeout(() => {
if (!navigator.onLine) {
alert('no network connection');
}
}, 5000);
But the question arises on how good is the browser support for navigator.onLine?
According to caniuse.com, the support is quite good.
Update
The original code is attempting to load jQuery from a CDN, so simply looking for the presence of jQuery will determine connectivity.
setTimeout(() => {
if (typeof window.jQuery !== 'function') {
alert('jQuery not loaded');
}
}, 5000);
Example to demonstrate.
function testForJquery() {
setTimeout(() => {
if (typeof window.jQuery !== 'function') {
alert('jQuery not loaded');
} else {
alert('jQuery is loaded');
}
}, 1000);
}
function loadJQuery () {
let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
document.body.appendChild(script);
}
<body>
<h4>Test for jQuery</h4>
<button onclick="loadJQuery();">Load jQuery</button><br/>
<button onclick="testForJquery();">Test for jQuery</button><br/>
</body>
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)
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>
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.