Develop Reference

Progressbar won't reset properly

I'm having some difficulty getting my progress bar to reset and continue counting. In my code I have a button that opens a JQuery ui dialog box with a progress bar which counts up to 100% then closes. When I click the button again to reset the progress bar, it just stays at 0% without updating. This there anything I'm missing in my code?
Here's my dialog box
$( "#dialog" ).dialog({
autoOpen: false,
dialogClass: "no-close",
draggable: false,
resizable: false,
height: 200,
width: 200
});
The button I have opening the dialog box
$("#button").click(function() {
$('#progressbar').progressbar('option','value', 0);
$( "#dialog" ).dialog( "open" );
});
My code for the progress bar
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: true,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
setTimeout("$('#dialog').dialog('close')",3000);
}
});
function progress() {
var val = progressbar.progressbar( "value" );
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 80 );
}
}
setTimeout( progress, 2000 );
});
Edit: Here's the html
<div id="dialog" title="Progress Bar">
<div align="right">
<small id="name">Name</small>
</div>
<small id="temp">Temp</small><br />
<small id="temp2">Temp2</small><br /><br />
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

See fiddle (someone else started)
You need to start the function progress() again once you click the button. You also should make sure the progress() function is in the scope of the button click event.
$("#button").click(function() {
$('#progressbar').progressbar('value', 0);
$( "#dialog" ).dialog( "open" );
//restart
progress();
});

jQuery animation out of sync

Very shortly after my animation starts, it goes out of sync.
The divs are supposed to fade in and fade out after one another.
Please take a look at my code below...
Thanks
(document).ready(function(){
animate_loop = function animate_loop(){
$( "#w01" ).animate({ opacity: 0.4, }, 1000,
function(){ $( "#w01").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w02" ).animate({ opacity: 0.4, }, 1500,
function(){ $( "#w02").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w03" ).animate({ opacity: 0.4, }, 2000,
function(){ $( "#w03").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w04" ).animate({ opacity: 0.4, }, 2500,
function(){ $( "#w04").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
});

If you want more control use the code below. I highly recommend using adding a class and then animating trough CSS instead of making a jquery loop.
Here's a new demo: http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});

If you are trying to just make a fade effect, use css and add a class at a different time with setInterval. Use .each(index, el) to iterrate trough each element. Index will be 1, 2, 3, 4, etc... so use that to delay your animation.
Here's a demo: http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});

when to stop scrolling

Look at the demo below. On click of next i scroll it but i want to hide next when end has reached. How do i know when to stop scroll
http://jsfiddle.net/77kJp/2/
JS
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
});
});
ps: 800 in demo is just for ease

run a function after animation complete like this
http://api.jquery.com/animate/
$('selector').animate(
{
right : "100px",
}, 500,
function() {
$('selector').hide(); // this will run after the animation is complete
}
);

You want to use the scroll() event listener. Whenever your demo div is scrolled, check its current position from the left, and if it's greater than a certain threshold, hide your span that says 'next'
Add this JS after your $("span").click() code:
var leftPos;
$(".demo").scroll(function(event){
leftPos = $(".demo").scrollLeft();
if(leftPos > 700){
$("span").hide();
}else{
$("span").show();
}
});

Use the callback function of animate
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
},function() {
$('span').hide();
});
});

marginLeft as a Javascript variable

I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you

So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).

try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );

How do I prevent a javascript function from rendering before another function rendering?

Theoretically speaking let's say I have 3 javascript (jquery) functions that create visual effects. If I want one of them to render after the first two have been rendered, how can I do this?
Javascript:
<script type="text/javascript">
$(function() {
var transition = 'slow';
var target1 = $('#somediv');
var target2 = $('#second_div');
var target3 = $('#third_div');
target1.delay(5000).fadeIn();
target2.delay(target2Time).fadeIn();
target3.delay(target3Time).fadeIn();
});
</script>
<script type="text/javascript">
$.fn.teletype = function(opts){
var $this = this,
defaults = {
animDelay: 50
},
settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
setTimeout(function(){
$this.html($this.html() + letter);
}, settings.animDelay * i);
});
};
$(function(){
$('#second_div').teletype({
animDelay: 200,
text: 'Hello, this is your classmate!'
});
});
</script>
HTML:
<div id="somediv">Some Content</div>
<div id="second_div"></div>
<div id="third_div">Some third content</div>

I've made this demo. It demonstrates how to make one animation wait for two other animations to finish:
var anim1 = $( '#elem1' ).animate({ width: 200 }, 3000 );
var anim2 = $( '#elem2' ).animate({ width: 200 }, 2000 );
$.when( anim1, anim2 ).done(function () {
$( '#elem3' ).animate({ width: 200 }, 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/
You can apply the same technique for your fading requirements:
var fade1 = $( '#img1' ).fadeIn( 3000 );
var fade2 = $( '#img2' ).fadeIn( 2000 );
$.when( fade1, fade2 ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/1/

Just as improvement, you can pass an array of animations
var array = new Array();
array.push( $( '#img1' ).fadeIn( 3000 ));
array.push( $( '#img2' ).fadeIn( 2000 ));
And then the trick is change from array to list arguments as expected by jquery, using the apply method
$.when.apply(this, array ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo:
http://jsfiddle.net/m67Ua/2/

i needed the callbacks and the done, so check this out:
$.when(
$('#container .item')
.animate({"opacity": "0"}, 1000,
function onCallbackForEach () {
console.log('callback on element called');
})
).done( function onFinally () {
console.log('done called');
});
which gives me access to handle the elements each after their animation (e.g. replace an old one with them), and aditionally having a single callback to do work after all of the animations have finished...