Element doesn't disappear for some browsers - javascript

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...

Related

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

Multiple JS Popups On Same Page

I have a popup javascript I am using on one of my html pages.
It works fine, but... when I tried to add a second one in a different location, the script would not function.
I'm not sure what I am doing wrong.
I need at least three of these on one webpage in different locations.
Any advice would be appreciated.
Here is the basic script....
<!DOCTYPE html>
<html>
<head>
<script>function myfunction() {var popup1 = document.getElementById("popup1"); popup1.classList.toggle("showpopup1");}</script>
<style>
body {margin:0;}
/* popup container */
.popup1 {
margin-left:200px;
margin-top:200px;
margin-bottom:0px;
position:relative;
display:inline-block;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/* The actual popup */
.popup1 .popup1text {
visibility:hidden;
background-color:#555;
color:#fff;
border-radius:10px;
padding:8px 8px 8px 8px;
width:400px;
height:80px;
position:absolute;
text-align:left;
z-index:1;
bottom:130%;
left:50%;
margin-left:-210px;
}
/* Popup arrow */
.popup1 .popup1text::after {
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:#555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup1 .showpopup1 {
visibility:visible;
-webkit-animation:fadeIn 1s;
animation:fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn{from {opacity: 0;} to {opacity: 1;}
#keyframes fadeIn{from {opacity: 0;} to {opacity:1 ;}
</style>
</head>
<body>
<div class="popup1" onclick="myfunction()">POPUP 1<span class="popup1text" id="popup1">Popup 1 Text</span></div>
</body>
</html>

z-index not work well in firefox

I created simple CSS3 animations but the problem that the z-index not work well in firefox, the green box must be stacked on top of the road but in the firefox browser, So I'd like to understand why this problem is appears and what is the solution?
body{
margin:0;
color:#444;
font:300 18px/18px Roboto, sans-serif;
text-align:center;
}
.element {
width: 320px;
height:100px;
position: absolute;
z-index: 50;
left: 50%;
margin-left:-160px;
top: 50%;
background-color:#00fb69;
}
#-moz-keyframes animation {
0% {
transform:scale(.95,.95) translateY(0px);
}
100% {
transform: scale(.10,.10) translateY(-800px);
}
}
#keyframes animation {
0% {
transform:scale(.95,.95) translateY(0px);
}
100% {
transform: scale(.10,.10) translateY(-800px);
}
}
.road-wrap{
-webkit-perspective:160px;
perspective:160px;
}
.road-wrap .road{
margin-top:-360px;
-webkit-transform:rotateX(80deg);
transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
-webkit-animation:steer 4s linear infinite;
animation:steer 4s linear infinite;
position:relative;
z-index:-1;
}
.road-wrap .lane{
width:25px;
margin:auto;
}
.road-wrap .lane>div{
width:100%;
margin:auto;
margin-top:30px;
margin-bottom:30px;
position:relative;
background-color:#444;
-webkit-animation:lane 10s linear reverse infinite;
animation:lane 10s linear reverse infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}
#-webkit-keyframes lane{
0%{
-webkit-transform:translateY(320px);
transform:translateY(320px);
}
100%{
-webkit-transform:translateY(-160px);
transform:translateY(-160px);
}
}
#keyframes lane{
0%{
-webkit-transform:translateY(320px) scale(.60,.60);
transform:translateY(320px) scale(.60,.60);
}
100%{
-webkit-transform:translateY(-160px) scale(.80,.80);
transform:translateY(-160px) scale(.80,.80);
}
}
#media(max-width:768px) {
.element{
width:150px;
margin-left:-75px;
}
}
#media (min-width: 768px){
.element{
width:250px;
margin-left:-125px;
}
}
<div class="loading-screen">
<div class="element">
</div>
<div class="road-wrap">
<div class="road">
<div class="lane-wrap">
<div class="lane">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>

Just place <div class="element"> after <div class="road-wrap"> in the code.

You can find your script fix at the following link.
https://jsfiddle.net/w42fqb5e/1/
Basically you need to change the order of your divs in the HTML.
Notes: I tested this solution on FF 53.0 (32-bit) WIN.
<div class="loading-screen">
<div class="road-wrap">
<div class="road">
<div class="lane-wrap">
<div class="lane">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="element">
</div>
</div>

For a real solution, you should probably report this to Mozilla's bugzilla.
It's quite hard to debug, but I tried to pause the animation as soon as I saw the effect, and obviously, when the animation stopped, everything was back to normal on screen...
For the ones interested, here is the fiddle where I lost a few dozens of minutes trying to capture the bug (could be a good game b.t.w).
Now, since I guess you are willing for a workaround, well... I may have a js one.
Since I think we identified that the animation is the problem, where I feel the little panda takes a nap in the middle of the rendering, we just have to tell it to never sleep.
And to do so, we can constantly request for a reflow of our .element, by simply calling one of its offsetXXX properties.
Beware, since the bug occurs only sporadically on my machine, I can't tell for sure that this workaround actually works 100% of the time. So be kind, tell me in comments if it failed for you.
// forces a reflow at every frame
const element = document.querySelector('.element');
const anim = t => {
element.offsetLeft;
requestAnimationFrame(anim)
}
anim();
// forces a reflow at every frame
const element = document.querySelector('.element');
const anim = t => {
element.offsetLeft;
requestAnimationFrame(anim)
}
anim();
body{
margin:0;
color:#444;
font:300 18px/18px Roboto, sans-serif;
text-align:center;
}
.element {
width: 320px;
height:100px;
position: absolute;
z-index: 50;
left: 50%;
margin-left:-160px;
top: 50%;
background-color:#00fb69;
}
#-moz-keyframes animation {
0% {
transform:scale(.95,.95) translateY(0px);
}
100% {
transform: scale(.10,.10) translateY(-800px);
}
}
#keyframes animation {
0% {
transform:scale(.95,.95) translateY(0px);
}
100% {
transform: scale(.10,.10) translateY(-800px);
}
}
.road-wrap{
-webkit-perspective:160px;
perspective:160px;
}
.road-wrap .road{
margin-top:-360px;
-webkit-transform:rotateX(80deg);
transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
-webkit-animation:steer 4s linear infinite;
animation:steer 4s linear infinite;
position:relative;
z-index:-1;
}
.road-wrap .lane{
width:25px;
margin:auto;
}
.road-wrap .lane>div{
width:100%;
margin:auto;
margin-top:30px;
margin-bottom:30px;
position:relative;
background-color:#444;
-webkit-animation:lane 10s linear reverse infinite;
animation:lane 10s linear reverse infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}
#-webkit-keyframes lane{
0%{
-webkit-transform:translateY(320px);
transform:translateY(320px);
}
100%{
-webkit-transform:translateY(-160px);
transform:translateY(-160px);
}
}
#keyframes lane{
0%{
-webkit-transform:translateY(320px) scale(.60,.60);
transform:translateY(320px) scale(.60,.60);
}
100%{
-webkit-transform:translateY(-160px) scale(.80,.80);
transform:translateY(-160px) scale(.80,.80);
}
}
#media(max-width:768px) {
.element{
width:150px;
margin-left:-75px;
}
}
#media (min-width: 768px){
.element{
width:250px;
margin-left:-125px;
}
}
<div class="loading-screen">
<div class="element">
</div>
<div class="road-wrap">
<div class="road">
<div class="lane-wrap">
<div class="lane">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
And as a fiddle.

My jQuery .hide() animation not working as expected

Loading animation should appear for one second and then hide. It's not hiding. I believe it's the JS that's failing (as this governs hide).
See: http://www.visionchurchnorth.org.nz/temp/index
Example of it working correctly: http://www.championfreight.co.nz/index
Html
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1996">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:56%; 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>
CSS
#backgroundcolor{
background-color:white;
background-image:url('preno_logo_02_100_100.jpg');
background-position:center;
background-repeat:no-repeat;
}
#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;
}
}
JS
(function(){
var didDone = false;
function done() {
//Prevent multiple done calls.
if(!didDone)
{
didDone = true;
//Loading completion functionality here.
$('#followingBallsG').hide();
$('#backgroundcolor').hide();
}
}
//Variables to keep track of state.
var loaded = false;
var minDone = false;
//The minimum timeout.
setTimeout(function(){
mindone = true;
//If loaded, fire the done callback.
if(loaded)
{
done();
}
}, 1000);
//The maximum timeout.
setTimeout(function(){
//Max timeout fire done.
done();
}, 5000);
//Bind the load listener.
$(window).load(function(){
loaded = true;
//If minimum timeout done, fire the done callback.
if(minDone)
{
done();
}
});
})();

It seems that you forgot to link to jQuery in your HTML. Add the following to your HTML before you link to your page's JavaScript:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

No jquery so
$(window).load(function(){
//...
}
no done

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");

Categories

Resources