Develop Reference

Animation play state not working on Safari

I don't know whats wrong but every bug I am coming across is Safari related and its very annoying. I have a code in my website that when a users mouse is not on the body of the page, like in another tab or physically not on the page, the circle animations pause and when the users mouse returns on the body again the css animation resumes where it left off. It works perfectly on Chrome, Firefox....But on Safari... It has this blue background that popup when you leave the body, and when you return it goes crazy and starts all colors at once. Sometimes it won't even start after its done and you have to refresh. Here is are gifs I recorded.
When the blue background comes:
https://gyazo.com/1d063cb8ccce17481df858330b5c8a80
When all the colors start at once:
https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b
How its suppose to look
https://gyazo.com/cdcebb77327b166d0995b2598938e6d7
Here is my code.
Code pen
https://codepen.io/anon/pen/dWvwKR
Java Script
$("body").on("mouseleave",function(){
console.log("MOUSE IS OUT");
$("#firstCircle").css({"animation-play-state":"paused"});
$("#firstCircle").css({"-webkit-animation-play-state":"paused"});
$("#firstCircle").css({"-ms-animation-play-state":"paused"});
$("#firstCircle").css({"-moz-animation-play-state":"paused"});
$("#firstCircle").css({"-o-animation-play-state":"paused"});
$("#secondCircle").css({"animation-play-state":"paused"});
$("#secondCircle").css({"-webkit-animation-play-state":"paused"});
$("#secondCircle").css({"-ms-animation-play-state":"paused"});
$("#secondCircle").css({"-o-animation-play-state":"paused"});
$("#secondCircle").css({"-moz-animation-play-state":"paused"});
$("#thirdCircle").css({"animation-play-state":"paused"});
$("#thirdCircle").css({"-webkit-animation-play-state":"paused"});
$("#thirdCircle").css({"-ms-animation-play-state":"paused"});
$("#thirdCircle").css({"-moz-animation-play-state":"paused"});
$("#thirdCircle").css({"-o-animation-play-state":"paused"});
$("#fourthCircle").css({"animation-play-state":"paused"});
$("#fourthCircle").css({"-webkit-animation-play-state":"paused"});
$("#fourthCircle").css({"-moz-animation-play-state":"paused"});
$("#fourthCircle").css({"-o-animation-play-state":"paused"});
$("#fourthCircle").css({"-ms-animation-play-state":"paused"});
$("#fifthCircle").css({"animation-play-state":"paused"});
$("#fifthCircle").css({"-webkit-animation-play-state":"paused"});
$("#fifthCircle").css({"-ms-animation-play-state":"paused"});
$("#fifthCircle").css({"-moz-animation-play-state":"paused"});
$("#fifthCircle").css({"-o-animation-play-state":"paused"});
$("#sixthCircle").css({"animation-play-state":"paused"});
$("#sixthCircle").css({"-webkit-animation-play-state":"paused"});
$("#sixthCircle").css({"-o-animation-play-state":"paused"});
$("#sixthCircle").css({"-moz-animation-play-state":"paused"});
$("#sixthCircle").css({"-ms-animation-play-state":"paused"});
});
$(window).on("mouseenter",function(){
console.log("MOUSE IS IN");
$("#firstCircle").css({"animation-play-state":"running"});
$("#firstCircle").css({"-webkit-animation-play-state":"running"});
$("#firstCircle").css({"-ms-animation-play-state":"running"});
$("#firstCircle").css({"-moz-animation-play-state":"running"});
$("#firstCircle").css({"-o-animation-play-state":"running"});
$("#secondCircle").css({"animation-play-state":"running"});
$("#secondCircle").css({"-webkit-animation-play-state":"running"});
$("#secondCircle").css({"-ms-animation-play-state":"running"});
$("#secondCircle").css({"-moz-animation-play-state":"running"});
$("#secondCircle").css({"-o-animation-play-state":"running"});
$("#thirdCircle").css({"animation-play-state":"running"});
$("#thirdCircle").css({"-webkit-animation-play-state":"running"});
$("#thirdCircle").css({"-ms-animation-play-state":"running"});
$("#thirdCircle").css({"-moz-animation-play-state":"running"});
$("#thirdCircle").css({"-o-animation-play-state":"running"});
$("#fourthCircle").css({"animation-play-state":"running"});
$("#fourthCircle").css({"-webkit-animation-play-state":"running"});
$("#fourthCircle").css({"-ms-animation-play-state":"running"});
$("#fourthCircle").css({"-moz-animation-play-state":"running"});
$("#fourthCircle").css({"-o-animation-play-state":"running"});
$("#fifthCircle").css({"animation-play-state":"running"});
$("#fifthCircle").css({"-webkit-animation-play-state":"running"});
$("#fifthCircle").css({"-ms-animation-play-state":"running"});
$("#fifthCircle").css({"-moz-animation-play-state":"running"});
$("#fifthCircle").css({"-o-animation-play-state":"running"});
$("#sixthCircle").css({"animation-play-state":"running"});
$("#sixthCircle").css({"-webkit-animation-play-state":"running"});
$("#sixthCircle").css({"-ms-animation-play-state":"running"});
$("#sixthCircle").css({"-moz-animation-play-state":"running"});
$("#sixthCircle").css({"-o-animation-play-state":"running"});
});
});

Hi #thatoneguy90 that's because Safari pauses JS on inactive tabs after 1000ms (1s) to preserve CPU. You'll need to work around the automatic pausing of setInterval and requestAnimationFrame. This could also be causing the blue color when you roll outside the viewport.
Definitely visit this one for a JS example of how to make this work:
How can I make setInterval also work when a tab is inactive in Chrome?
You might also find this helpful for more info on the topic:
How do browsers pause/change Javascript when tab or window is not active?
Additionally, if this is close to the final result, you can probably achieve this using CSS as well.

If Internet Speed is high load images or dont load at all

I searched so many questions in SO about similar things. But none seems to work for my situation.
I have several diffent background images. For now i created gradient based on the background image manually and set it default. And loading the background image over the default gradient after 3 seconds.
But i dont want this kind of approach. I want to display images only if the user has good connection. Or else dont display the image at all, let the gradient of that background image be there.
Code example: CSS
.test1 {
background-image: -webkit-gradient(linear, 0 0, 86 148, color-stop(0.011, #898568));
background-image: -webkit-linear-gradient(300.1600608380871deg, #898568 1.1%);
background-image: -moz-linear-gradient(300.1600608380871deg, #898568 1.1%);
background-image: -o-linear-gradient(300.1600608380871deg, #898568 1.1%);
background-image: linear-gradient(149.83993916191292deg, #898568 1.1%)
}
.test1-img {
background-image: url("img1.jpg");
}
Code Sample: JS
setTimeout(function() {
$('#test1-div').toggleClass('test1-img');
}, 3000);
So Is it possible to do this in jQuery or JS? or any plugin for this?
PS: I dont want lazy loading algorithm. Cause it loads images when user comes into viewport even if they have low internet connection. For me i dont want to display background image at all for low speed connection.
PS2: I am new JS, so with working solutions with explanation is very good for me to understand.

If you're OK with attempting to load a single image, you could try something like the following:
window.speedyConnection = false;
var image = document.createElement("img");
image.onload = function () {
window.speedyConnection = true;
//Load your images here
}
image.src = "img1.jpg";
setTimeout(function () {
if (!window.speedyConnection) {
image.remove();
}
}, 750);
The idea being that you attempt to load the first image, but if it doesn't load in 750ms (or whatever timeout you prefer) you assume the user has a bad connection and stop loading it. If it does load, you go ahead and load the rest of the images.
This would, however, require at least sending a request for an image and receiving some data (even on slow connections), but it would only be for a single image and you would cancel it after the timeout.

try navigator.connection.effectiveType, you'll pretty much get what you want. it's going to show '2g', '3g', '4g' or '5g'. check browser compat too, see if you're okay with it
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

hide the orientation transition on safari ios

i thought this would be an very frequent question, but i actually did not find any answer to it.
i am making a webapp/website for mobile.
When the user rotates his phone, i want to hide the whole body just before the page is rotated, with that ugly deformation/transition. Then, when this transition is done, show the body again.
here i have done a minimal version of the code that works on android.
there is a background image from loremPixel on the body, and a red background on the html tag.
the expected result is: never seing the image rotate. only a red screen (not rotating either)
thanks for any help.
ps: i think i have narrowed the problem down to the orientationchange event being fired after the rotation on ios, and before(as i would expect) on android

Random idea.
$(window).resize(function() {
$("#wrapper").css("display","none");
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#wrapper").css("display","block");
});
Start resize, hide wrapper. No resize in 0.5 seconds, show.
http://jsfiddle.net/7ktg9can/

Bizarre Javascript bug-swapping in images

I have this crazy bug that only comes up sometimes. It was apparent when I was developing this site but then it disappeared for a week or so and now that the site is live it's back. I don't think it has anything to do with my hosting because it bugs out locally as well.
My problem is that I'm swapping the css value background-image on each click. It works perfectly 95% of the time, but sometimes for a span of like 15 minutes it just won't display about half the images, seemingly randomly. The strangest thing is that if you look in the inspector you can see that the script correctly changed the css value, but the image simply wasn't loaded. I have no idea why!
Here's the website: shouldivoteoliver.com It's on the "Propaganda" page.
Here's the Javascript:
$(document).ready(function() {
var n=0;
$(".button").click(function(){
if (n===5){
$('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
n++;
$("#putin").css("background-image","none");
}
else{
$('video').remove();
$("#putin").css("background-image",function(){
if (n>13){
n=1;
return ('url(images/1.jpg)');
}
else{
n++;
return ('url(images/'+n+'.jpg)');
}
});
}
});
});

I would suggest using a background image as a sprite and changing the background position as
opposed to changing the background image property.
Here is a tutorial that I googled
http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/

I tried going through all the slides on the propaganda twice but I didn't come across any problem. I don't know what is going on, but you can make your code a little cleaner and more readable by just making an array to store the contents of each "slide", and simply loop through it on mouse click. I guess you don't really need to set the background property of that div and you could just include an image.
Just an advice, not sure if it will help with your problem, but will make this thing more manageable and easier to add more stuff.

Here's a one-liner
swap value at index i1 with i2
arr.slice(0,i1).concat(ar[i2],ar.slice(i1+1,i2),ar[i1],.slice(i2+1))

Using jQuery for alternating png transition

Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.
My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.
What I want schematically is something like:
--loop start--
$("#pngOverlay").fadeIn(1000);
(5000 delay) // using setTimeout or setInterval if jQuery method unavailable
$("#pngOverlay").fadeOut(1000);
(5000 delay)
--loop repeat--
The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.
setTimeout(function() {
$("#pngOverlay").fadeIn(1000);
}, 5000);
setTimeout(function() {
$("#pngOverlay").fadeOut(1000);
}, 10000);
Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we liked them...)

<script language="JavaScript" type="text/javascript">
function showimage(){
$("#pngOverlay").fadeIn(1000);
setTimeout('hideimage()',5000);
}
function hideimage(){
$("#pngOverlay").fadeOut(1000);
setTimeout('showimage()',5000);
}
$(document).ready(function() {
showimage();
});
</script>

Something like this?
setInterval(function()
{
var elm = $('#pngOverlay');
if (elm.is(':hidden'))
elm.fadeIn(1000);
else
elm.fadeOut(1000);
}, 5000);

How about using an animated PNG?

One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.
$("#pngOverlay").animate({opacity:1}, 5000);
If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.