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/
Related
Say I have a CSS class that transitions in several settings, with different timings to boot:
.hidden {
opacity:0;
height:0px;
transition:opacity 1s ease;
transition:height 2s ease;
}
I want to handle some logic after ALL the transitions are done. I know there's a transitionend event for that:
$('#content').on('transitionend', function(e) {
mandatoryLogic()
})
$('#content').addClass('hidden');
But, how do I ensure this event handle happens once and only once, at the end of the last transition (after the 2s height transition in my case)?
I've seen a few examples that involve checking for the type of transitionend, but this closely couples the JS to a particular CSS definition. So far I'm unable to come up with a JS solution that would survive say:
opacity changed to 3s, now the longest.
new width transition to 0px over 4s introduced
extreme case, all transitions removed (so the effects are instant)
I'm not entirely sure what you're asking, but if you want to make sure it only happens once, then use a variable set to false initially, and once the transition takes place it gets set to true. For example:
var transition = false ;
if( !transition ){
// do what you need to do
transition = true ;
}
If you want to make sure it happens once all transitions are complete, then check for the values of #content or .hidden. Whichever you prefer.
var height = $(element).height() ;
var opacity = $(element).css('opacity') ;
var transition = false ;
if( !transition && opacity = 'wanted value' && height = 'wanted value' ){
// do what you need to do
transition = true ;
}
This way, with var transition being set to true it won't happen again.
Pacient: http://demo.imatte.us/fomru/landingpage.html
Problem: http://gyazo.com/031fe1c5413550e6e68aceef2740cefc
When window's size is changing, then we can see content of other slide. But after release the window's border, elements moving to right places with animation after small delay. How to disable this delay and animation, and force elements to stay on right positions constantly?
As #flybear pointed out, you would need to modify the plugin for it.
You would also need to change the scrollingSpeed of the plugin by using $.fn.fullpage.setScrollingSpeed(0). But this will only work if you use css3:false.
You should change the current event resize for this one:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
}
});
If you want to make it work with css3:true as well, you would need to deal with the css3 animations defined in the .fp-easings class. You probably can create another CSS class to overwrite the .fp-easings one defining a transition with 0 seconds:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$('.fp-easings').addClass('.fp-no-transitions');
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
$('.fp-easings').removeClass('.fp-no-transitions');
}
});
CSS
.fp-no-easing {
-webkit-transition: all 0s ease-out !important;
transition: all 0s ease-out !important;
}
Just take into account that on every resize event, which can be fired hundreds of times when you resize the browser's window, will execute the reBuild function of the plugin, which will take care of resizing sections, updating the inner containers and scroll all the sections and slides of your site to fit the new position.
Firing this hundreds of times can cause some problems in slow computers and will slow down the page.
I am building a website that has a few animations when you load the home page (for example, the main logo and a few menus slide in from the sides of the screen). Simultaneously, I am also using AJAX in the background to start to load some images that might be viewed later. The problem with this is that when the images are loading, the animations become quite choppy. Is there any way to stop this? Or maybe give the AJAX function a lower priority so that it doesn't try to do anything when an animation is running?
Here is the current script I'm using to load these images:
$('.lightbox-container.first').load('/images/first_set/', function(){
$('.lightbox-container.second').load('/images/second_set/', function(){
$('.lightbox-container.third').load('/images/third_set/', function(){
$('.lightbox-container.fourth').load('/images/fourth_set/', function(){
$('.lightbox-container.fifth').load('/images/fifth_set/', function(){
$('.lightbox-container.sixth').load('/images/sixth_set/');
});
});
});
});
});
An all of my animation function look something like:
$('.third-section').animate({ 'opacity': '1', 'height': '200px', 'padding-top': '20px', }, 500);
The problem
Since all your ajax and js animations run on the same browser thread, you are bound to have this problems. You are reaching the limits of your CPU, which causes the choppiness.
How to solve this
Use CSS3 transforms. Those are hardware accelerated in all modern browsers and run on a separate threads, so their performance is generally not affected by ajax calls. Since you said you only slide things around, I think this would be the ideal solution for you. There is a great article about it here:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Your case
So to actually make this work for you. Leave the ugly ajax calls as they are for now. Instead of using jQuery animate, you need 2 states - the initial, which positions the slide away and one with an extra class, which positions your slide in it's target place.
All you have to do is add the class to the slide and it will nicely come in place. Theory is simple.
Sample
Your initial state could be something like this:
.slide {
transform: translate(-400px, -200px);
transition: all 5s;
}
And the one to show in place:
.slide.show {
transform: translate(0px, 0px);
}
I have a function to animate progress bar during data processing inside the div. The progress bar div is in dataprocess.php(parent page) and the process is done inside iframe that call page generate.php. My progress bar function in dataprocess.php is like below:-
function progressBar(percent, element)
{
var progressBarWidth = percent * ($(element).width()) / 100;
progressBarWidth = progressBarWidth-10;
$(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "% ");
}
The div in dataprocess.php page:-
<div id="progressBar" class="default"><div></div></div>
In while loop inside the generate.php(iframe) I call PHP function like below to make the progress bar in parent animate:-
function progress($percent)
{
echo '<script type="text/javascript">
parent.progressBar('.$percent.', "#progressBar");
</script>';
}
The progress bar is working fine but the problem is when I have more than 1 tab in my browser. Now I make data processing in tab 1, this process will take about 10-15 minutes. Let say now the progress bar is 25% than I decide to go to another tab that means the tab 1 is maybe I can say in Idle state. After some time, I click back to tab 1. I can see that the percent show 100% but the progress bar continue animate from 25% until 100%. The process is already done but the progress bar stop animate if I turn to another tab and only working back when I go back to the data processing tab.
Thanks.
in that case, try using css3 transitions instead of js animations.
replace:
$(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "% ");
with:
$(element).find('div').width(progressBarWidth).html(percent + "% ");
and add a css for that div that you want to animate, let's call it for example myDiv:
#myDiv{transition:width .1s ease;-moz-transition:width .1s ease;-webkit-transition:width .1s ease;-ms-transition:width .1s ease;}
hope that helps
I was wondering if it is possible to generate a webkit animation with javascript. Basically all I need is that if i click element A, element B should be animated with a random parameter every time(this is why I cant use a pre-fixed CSS). I'm testing if I can actually generate all this through javascript and Ive gotten pretty far. My code does not do anything random yet but it is really easy to make it random once I get it to work right with javasript. So right now I just want to animate element B every time I click element A. My code looks like this:
$("#elementA").live('touchstart mousedown',function() {
$("head style").remove();
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('#-webkit-keyframes random_spin {'+
'from { -webkit-transform: rotate(0deg); }'+
'to { -webkit-transform: rotate(1440deg); }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});
$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});
There I just added the animation to the header and I applied it to elementB.
My "random_spin" class is a CSS I already predefined :
.random_spin {
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
}
My intention with this is that I should be able to make my elementB spin every time I click on elementA. Unfortunately it only does it once and no matter how much I click on it or how many times I reset the animation name it still only does it once. What am I doing wrong?
To restart a CSS3 animation you cannot just remove and add a class without putting a small delay between the commands. This allows the browsers time to actually remove the class before adding the new one. You can do this with a simple setTimeout
setTimeout(function(){
$("#elementB").addClass("random_spin");
}, 100);
More information and examples can be found below.
http://css-tricks.com/restart-css-animation/