Develop Reference

How to sync Javascript with CSS transitions to create a "onComplete" callback, when the transition is overriden by another?

I am trying to sync Javascript with CSS transitions, and I have done it right.
I basically created a callback that fires after X seconds, and everything works fine IF the transition completes normally. However, when the transition is interrupted BEFORE completion by another transition, like when you leave the mouse from a div when you're altering its width (for example, the div is 100px wide, mouseover -> 300px mouseout -> 100px. You mouse-leave the div before it reaches 300px, the transition DO NOT calculate the full-duration!), I don't know how to calculate the new duration.
I have tried the trasitionend event but is currently an instable solution to me.
CSS
div {
width: 100px;height: 100px;background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
HTML
<div id="mydiv"></div>
JS
let mydiv = document.getElementById('mydiv')
let i = 0;
var callback = function() {
i++;
mydiv.innerHTML = 'done ' + i;
}
mydiv.addEventListener('mouseover', function() {
setTimeout(callback, 2000+10);
});
mydiv.addEventListener('mouseout', function() {
setTimeout(callback, 2000+10);
});
As you can see, the callback is broken when you do not wait for the transition to fully complete, of course.
Is there a method to calculate the "cut" duration from the previous start point, in order to set a proper duration for the timeout, instead of using the "static" css duration?
Thank you in advance.

Loading Screen with Minimum Display Time

I have a fixed div with a solid background and some text that I am using as a loading screen that fades out when the the page is fully loaded via $(window).load . The catch is since there is actual information on the loader, it needs to be up for a minimum amount of time before fading out. However, in the event that the page loads faster than that minimum time, I do not want it to disappear early, and I also don't want it to stay up past the minimum time once the site is loaded as well, and this is where I am stumped.
Logically it needs to operate like this:
-fade in, wait 5 seconds
-page loads
-if 5 seconds has passed, fade out immediately
-else wait out the remaining time ONLY, then fade out (in other words, don't start counting 5 seconds after onload)
I usually just have an easier loader that displays immediately and then I addClass to hide it via CSS transitions on opacity after onload, but since I need to fade the loading text in and then out and also maintain a minimum time without just adding it as a delay after onload, this is a bit trickier.
This was asked here a few years ago but without a proper answer: jQuery loading screen with minimum viewing time
Would prefer to stick with JS/jQuery & CSS. Any help would be greatly appreciated, thanks!

Just set a timeout for five seconds, check if window is loaded, if so, hide it.
On load, check if five seconds has elapsed, and if so, hide it.
I would do it like this:
var loader = (function(window, $loadingScreen) {
var elapsed = false;
var loaded = false;
setTimeout(function() {
elapsed = true;
if (loaded)
hideLoadingScreen();
}, 5000);
var hideLoadingScreen = function() {
//do whatever
}
$(window).on('load', function() {
if (elapsed) {
hideLoadingScreen();
}
});
}(window, $('#loader'))
So - to simplify, we care only about whether both the page has loaded, and five seconds has passed. So, if at both of those events, we check whether the other has already happened, we know that it will trigger either at five seconds (if the page has loaded), or when the page has loaded (if five seconds has passed).

https://jsfiddle.net/4k7uxdxz/
Use CSS to take care of the animating. This will ensure that the animation will take effect as soon as the page opens and will take 5s to fade in.
.opener {
opacity: 0;
background-color: rgb(0, 0, 0);
color: white;
text-align: center;
font-size: 30px;
animation: fadeIn 5s forwards;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
to {
opacity: 1;
}
}
When the DOM is ready simply change the animation to fade out
$(document).ready( function() {
$(".opener").on("animationend", () => {
$(".opener").css("animation", "fadeOut 5s forwards")
});
});

How to fade in page content after refresh?

I've built a fairly simple site that utilizes pjax to load content. My problem is: once a user scrolls to say... the middle of any given page and performs a refresh, the page reloads starting at the top, then jumps down to whatever distance from the top the user was at when they refreshed.
My question is: how can I hide ALL document content after a refresh, then fade everything in after a short timeout (half a second, for instance) to avoid the jarring page jump?
Any help/advice is much appreciated!

You can set the content to display: none; in your CSS initially and have an onready handler call .fadeIn(): https://jsfiddle.net/19e14sev/
$(function() {
var secondsToWait = 2;
setTimeout(function() {
$('#content-selector').fadeIn();
}, secondsToWait * 1000);
});

How do you animate a twitter-bootstrap progress bar smoothly?

I have multi-player game with a 30 second timer at the bottom of the screen.
If none of the players make a move for 30 seconds, the form submits.
var ProgressValue = 0;
function showProgress() {
ProgressValue += 100/30;
if (ProgressValue > 100) {
$('form').submit();
}
// Ajax is done here to see if anyone has made a move.
$('.progress .bar').css('width',ProgressValue + '%');
setTimeout(showProgress, 1000);
}
setTimeout(showProgress, 1000);
Each second, I check the Application scope to see if anyone has changed the value of
Application.LastMove
I want the progress bar to animate smoothly, but I don't want to do it by reducing the timeout value. I think that checking to see if anyone has taken a move every second is enough load on the server already.
I've heard of WebSockets, but my current server is on ColdFusion 8, so (I think) I'm satisfied with doing an ajax call every second, unless you feel that ajax is not as elegant and from a less civilized age.
Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?

Don't animate using jQuery, prefer CSS animation, unless you have to support old browsers.
I've made this copying from Bootstrap style:
.bar {
-webkit-transition: width 30.0s ease !important;
-moz-transition: width 30.0s ease !important;
-o-transition: width 30.0s ease !important;
transition: width 30.0s ease !important;
}
For so long transition, I suggest you to try different animations: http://www.the-art-of-web.com/css/timing-function/
In my example I've added two things that could be usefull:
Button text changes when the animation starts and when it ends (just to check animation timings)
Check if the browser support this animation: you can use your jQuery code as fallback mode
For more information about how to detect CSS animation support: https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support
Example: http://jsfiddle.net/CUbgr/5/

JQuery Progress Bar Inline Text

I am trying to use the basic progress bar however I am unable to figure out the css/command to actually put some text inside the bar. I am using this progress bar: http://docs.jquery.com/UI/Progressbar however I am open to other ones if they are just as simple to implement.
I want it to display in the left corner some static information and then a percentage of complete somewhere in the right section. All css I attempted to do just made the information display below or to the side of. As well I am unsure how to actually have this CSS change based on a JQuery method (new to JQuery).
below is my actual JQuery. Don't try to understand the url value just assume it returns 0-100.
<script type="text/javascript">
var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done";
$(function() {
var progress = 0;
//alert("some value" + value, value);
$("#progressbar").progressbar({ progress: 0 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
$.get(url, function(data) {
// data contains whatever that page returns
if (data < 100) {
$("#progressbar")
.progressbar("option", "value", data);
setTimeout(updateProgress, 500);
} else {
$("#progressbar")
.progressbar("option", "value", 100);
}
});
}
Thanks

I'm not familiar with the plugin, but with CSS you can just position the div with lettering over the progress bar. I'm not sure if it would work with nested divs,since the inner div may get erased when the content for the progress bar is rendered.
You can play around with the top and left positions to position the text exactly where you want. In face you can dynamically change left, so that the text moves with the bar, though this may be a little trickier.
Z-index should not be a problem, but if you want to change the order of the divs, you might have to make sure that the text has a greater z-index than the bar.
The CSS:
#bardivs {
width:400px; /* or whatever the of the porgress bar is */
/*
The position of #bardivs must be something other than
static (the default) so that its children will be positioned
relative to it.
*/
position:relative;
}
#progresstext {
position:absolute;
top:0;
left:0;
}
The HTML:
<div id="bardivs">
<div id="progressbar"></div>
<div id="progresstext"></div>
</div>
The JS:
$("#progressbar").progressbar("option", "value", data);
$("#progresstext").html("<p>Hard code or string here<p>");

I've improved upon an already developed progressbar concept that is simply jquery and CSS based (but not using jquery-ui).
If you like you can look at the following link for having its details:
http://progressbar-simple.blogspot.com/
Hope that helps.