Develop Reference

Adding a light to javascript w/ ping test

I want to display this light if a certain condition is true in javascript using an if statement. How can I add an external CSS class to a javascript if statement?
Here is my css code:
.beacon{
position:absolute;
background-color:#32CD32;
height:1.5em;
width:1.5em;
border-radius:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon:before{
position:absolute;
content:"";
height:1.5em;
width:1.5em;
left:0;
top:0;
background-color:transparent;
border-radius:50%;
box-shadow:0px 0px 2px 2px #32CD32;
-webkit-animation:active 2s infinite linear;
animation:active 2s infinite linear;
}
#-webkit-keyframes active{
0%{
-webkit-transform:scale(.1);
opacity:1;
}
70%{
-webkit-transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
#keyframes active{
0%{
transform:scale(.1);
opacity:1;
}
70%{
transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
this is the javascript code:
<div class="too white">
<script language="javascript">
url = "http://www.511virginia.org/"
ping = new XMLHttpRequest();
ping.onreadystatechange = function(){
if(ping.readyState == 4){
if(ping.status == 200){
document.write("Website is up");
}
else {
document.write("Website is down");
}
}
}
ping.open("GET", url, false);
ping.send();
</script>
</div>

It depends on any framework you're using. For example, if you're using jQuery then change a DOM element's CSS using .css(property, value). Angular has it's own methods. For raw DOM manipulation take a look at the w3c page on JavaScript HTML DOM - Changing CSS, which shows the following.
document.getElementById(id).style.property = new style

Detect specific CSS3 Keyframe with JavaScript

How to detect that the animation reached a specific keyframe? (For example 50% or 75%).
This is what I tried:
element.addEventListener("animationend", AnimationListener, false);
but it supports animationstart, animationiteration and animationend only.
http://jsfiddle.net/W3y7h/294/

Using the example Fiddle provided, what you're essentially looking to know is when the value of #sun element's bottom property is equal to 100px. You can do this by using getComputedStyle() to check that value, clearing the interval when it is equal to 100px and then executing whatever code you wish, like so:
var style=window.getComputedStyle(document.getElementById("sun")),
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
}
},1);
#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
#keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}
<div id="sun"></div>
To check for multiple values, simply set a new interval. In the case of your example, the value of the bottom property should be 50px when the animation is 75% complete. That being said, it may not always be exactly 50px in every browser so, instead, given that we know the value of the bottom property will be decreasing at this point, instead check for it being less than or equal to 50:
var style=window.getComputedStyle(document.getElementById("sun")),
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))<=50){
clearInterval(interval);
console.log("75% reached");
}
},1);
}
},1);
#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
#keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}
<div id="sun"></div>

Does JavaScript need more processing power than CSS?

I had a a question on stackoverflow and I got multiple answers to animate a font from font awesome (considered like normal text), the first was this:
$(document).ready(function(){
$("#plane-icon").click(function(){
$(this).animate({
left:'180px',
top:'-20px',
fontSize:'20px'
},2000);
$(this).animate({
left:'0px',
top:'180px',
fontSize:'100px'
},0);
$(this).animate({
left:'0px',
top:'80px',
},1000);
});
});
.icon-wrap {
width:180px;
height:180px;
font-size:100px;
cursor:pointer;
position:relative;
overflow:hidden;
}
#plane-icon {
position:absolute;
top:80px;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
<span id="plane-icon">🚀</span>
</div>
the second answer, with the same result, was this:
$(document).ready(function(){
$('body').on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
function(){
$('#plane-icon').removeClass('launched');
}
);
$('#plane-icon').click(function(){
$(this).addClass('launched');
});
});
.icon-wrap {
width:180px;
height:180px;
font-size:100px;
overflow:hidden;
}
#plane-icon {
display:block;
cursor:pointer;
transform:translate(0px,80px) scale(1);
}
#plane-icon.launched {
animation-name:rocket;
animation-duration:3s;
cursor:default;
}
#keyframes rocket {
0% {
transform:translate(0px,80px) scale(1);
}
66% {
transform:translate(120px,-80px) scale(0.1);
}
67% {
transform:translate(120px,180px) scale(0.1);
}
68% {
transform:translate(0px,180px) scale(1);
}
100% {
transform:translate(0px,80px) scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
<span id="plane-icon">🚀</span>
</div>
Which of these 2 will require less processing power?

Element doesn't disappear for some browsers

Put simply, loading animation (with white background) should appear as the homepage loads. It should then disappear following loading completion. Working fine for Chrome, but not IE and Firefox (animation works but does not disappear, which may be JS related).
***EDIT - I've temporarily removed the html as the website is active and needed by our customers.
Take a look here: www.championfreight.co.nz
HTML
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1997">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:50%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>
JS
window.onload = function()
{
document.getElementById("followingBallsG").style.visibility = "hidden"
document.getElementById("backgroundcolor").style.visibility = "hidden"
}
CSS
#backgroundcolor{
background-color:white
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}

Ah! I get it. But that is likely to not work in Firefox because they turn off animations while "loading another page". The only way to have an animation working is to use AJAX to do the loading. That's a bit of work and you may have a problem with search engines if you do that because AJAX won't be run by search engines and you will not get any clicks from search engines, so bad idea...

Animation using Class Name in Javascript

I am trying to animate a div by adding a CSS class name to it on click of a button. But this works only for the first time. Next time I click the button and add the CSS class name, it doesn't animate the div. What am I doing wrong here?
<head>
<script>
function abc() {
document.getElementById("a").className = "";
document.getElementById("a").className = document.getElementById("a").className + " b";
}
</script>
<style>
#a {
width:100px;
height:100px;
background:red;
position:relative;
}
.b {
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
}
#keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="a" class="c"></div>
<button onclick="abc()">Click</button>
</body>

The classes on a given element are a set, so adding one that’s already there doesn’t change anything. This kind of animation would probably be better done using JavaScript. (In practice, CSS animation is like anything in CSS — it depends on state, not actions.)
Or am I misunderstanding? Is the problem that it doesn’t stop?
Since you’re using animations, it’s probably safe to assume classList support, so:
document.getElementById("a").classList.toggle("b");