Develop Reference

JavaScript animations not running in order?

When clicked, I want a button to produce three child options, which then when tapped again should do retract and then disappear when behind the parent button. I hope this is clear from the code (note this is a nativescript application, hence the slightly strange css choices).
exports.fabTap = function (args) {
var google = page.getViewById("google");
var facebook = page.getViewById("facebook");
var amazon = page.getViewById("amazon");
if (clicked == false) {
google.style.visibility = "visible";
facebook.style.visibility = "visible";
amazon.style.visibility = "visible";
google.animate({
translate: { x: -55, y: -66 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
facebook.animate({
translate: { x: 0, y: -75 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
amazon.animate({
translate: { x: 55, y: -66 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
} else {
google.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
facebook.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
amazon.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
}
clicked = !clicked;
}
However, as you can see from the gif, on the return journey, the buttons just disappear before the return. What can I do to ensure this animates in sequence?

You're doing this:
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
immediately after starting the animations, not giving the animations time to run before you do it.
If you want to wait, either use a callback on the animations, or just delay 500ms.
I don't know what animation lib you're using, so I can't show an example of a callback waiting for all three to be done.
Here's the "just wait 500ms" version, though:
setTimeout(function() {
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
}, 500);

You could probably do this easily with transitions. Instead of using visibility, try using opacity to fade your buttons in and out. Or, you could add a transition end listener to your JS and only set visibility to collapse after the three tabs have moved back under the main button. I think your problem is trying to animate visibility.

Animate progress bars upwards

I am looking to animate this progress bars, but I'm having a different behavior using jQuery animate() method. I want to animate the progress bars one by one with a 0.1s delay. I will need help with choosing the right animation, because now my animation is behaving downwards. I'd like to do it in the simplest way possible.
Here is what I have so far:
$('.vertical-bars .progress-fill span').each(function() {
var percent = $(this).html();
var pTop = 100 - (percent.slice(0, percent.length - 1)) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
$(this).parent().animate({
height: "toggle"
}, {
duration: 900,
specialEasing: {
height: "swing"
}
});
});
I have prepared a JSFiddle with my progress bars HERE.
The right behavior is to fill the progress-bars upwards, like in THIS example.

You need to animate both the height and top of your bars, or you need to construct them such that they are pinned to the horizontal axis when you change the height. The second takes a little more thought, but the first, although not as elegant, is straight forward.
To animate top you can't use toggle (as it is animating to 100% and back, not to 0), so you will need to animate both the shrink and grow separately using done to trigger a second animation. Taking the same style as you used above:
$('.vertical-bars .progress-fill span').each(function () {
var percent = $(this).html();
var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
var self=this;
$(this).parent().animate({
height: 0,
top: "100%"
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
},
done:function(){
$(self).parent().animate({
height: percent,
top: pTop
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
}
})
}
});
});
Of course you can also achieve the same thing using css animation. If I have time to figure it out I'll post an edit.

I don't know what height: "toggle" does but you basically want to set 0 height and 100% offset from top and then start animation that adjusts both styles.
The 100ms between animations is done simply by using setTimeout and incrementing the timeout.
https://jsfiddle.net/kss1su0b/1/
var elm = $(this).parent();
elm.css({
'top': '100%',
'height': 0
});
setTimeout(function() {
elm.animate({
'height': percent,
'top': pTop
}, {
duration: 900,
specialEasing: {
height: "swing"
},
});
}, animOffset);
animOffset += 100;

The simplest and most performing way to invert the animation direction is to align the bars at the bottom with css:
vertical-bars .progress-fill {
position: absolute;
bottom: 0;
}
Then you don't need to set the top any more with jQuery and set a delay:
$('.vertical-bars .progress-fill').each(function (index) {
var percentage = $(this).find('.percentage').html();
$(this).delay(index * 100).animate(
{
height: percentage
}, {
duration: 900,
done: function () {
$(this).find('span').show("normal");
}
}
);
});
jsfiddle

Highcharts: Dynamically size a solid gauge chart

I would like a solid gauge chart that adequately fills it's container. The only way to do this is to give it a size of over 100%.
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
I also want the containing div to be vertically resizable, the problem being that, when it is resized, the chart eventually resizes outside of it's parent div's boundaries.
$('#resizer').resizable({
handles: {'s': '#sgrip'},
resize: function() {
var chart = $('#container-speed').highcharts();
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
Is there any way around this?
See example:
http://jsfiddle.net/swj1naq2/

Solved it by deciding on a maximum allowed width and preventing the chart from further resizing when this maximum is breached (using the only changing variable which is height).
$('#resizer').resizable({
handles: {'s': '#sgrip'},
resize: function() {
var chart = $('#container-speed').highcharts();
// Get approx 70% of container width
var maxAllowedWidth = (this.offsetWidth * 0.7)
var containerHeight = $(chart.container).height();
// Max allowed width should be about 70% of containers
// height so keeping within this boundary will prevent spill
if(containerHeight >= maxAllowedWidth && this.offsetHeight - 20 > containerHeight){
return;
}
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
http://jsfiddle.net/dzudn5jq/3/

JQuery Animation: Animate DIV left to right at different speed than top to bottom

trying to animate 1 DIV at a certain speed left to right (and back), and also animate it top to bottom (and back) at a different speed (essentially creating a windows-like screensaver effect).
problem is that each animation occurs after each other (obviously) but i'm hung up on trying to combine so that the image will animate diagonally.
coming from CSS animation this is easy, but with that it can't detect responsive window width/height so bounce edges get real wonky.
any ideas? big thanks.
code so far is:
$(document).ready(function() {
updateWindowsize();
$(window).resize(function() {
updateWindowsize();
});
bounceBounce();
});
var imageWidth = '540'
imageHeight = '705'
function updateWindowsize() {
var $window = $(window);
windowHeight = $window.height();
windowWidth = $window.width();
}
function bounceBounce() {
$('.div-1').animate({"left": windowWidth - imageWidth}, 3000, 'linear',
function(){ $(this).animate({left: 0}, 3000, 'linear');
});
$('.div-1').animate({"top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({top: 0}, 6000, 'linear');
});
bounceBounce();
};

Did you try this:
$('.div-1').animate({"left": windowWidth - imageWidth, "top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({left: 0, top: 0}, 6000, 'linear');
});

How to call a variable or function inside of another JavaScript function

I am using this JavaScript Spinner/loader project http://fgnass.github.io/spin.js/
I have some code on a JSFiddle here http://jsfiddle.net/jasondavis/9pBsr/ that shows my progress, it may look like overkill with all the functions I have but I have stripped out all the non-relevent stuff for this post. So if you can help me, please leave all the structure the same way as it is.
Now my Problem. The library I am using has this code to show the spinner
var spinner = new Spinner(opts).spin(target);
The documentation says to kill and hide the spinner to run a stop function on the Spinner but the way my code is structured, I am not sure how to access it because I keep getting errors like
TypeError: Cannot call method 'stop' of undefined
My end result is to be able to call this and have it stop/kill the spinner...
zPanel.loader.hideLoader()
Here is my JavaScript but all the JS and HTML is on this JSFiddle http://jsfiddle.net/jasondavis/9pBsr/
Please help me to get the zPanel.loader.hideLoader() function to call the zPanel.loader.buildSpinner() functions Spinner.stop()
var zPanel = {
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
// This is the function that is not working yet
//zPanel.loader.spinner('stop');
zPanel.loader.buildSpinner.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('zloader_content');
var spinner = new Spinner(opts).spin(target);
// I need to call spinner.stop() some how from my function above name hideLoader()
},
}
};
zPanel.init();

Make your spinner a member of your zPanel.
var zPanel = {
spinner:null,
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
zPanel.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('zloader_content');
zPanel.spinner = new Spinner(opts).spin(target);
// I need to call spinner.stop() some how from my function above name hideLoader()
},
}
};
zPanel.init();

Save the spinner to a variable attached to zPanel, then use that reference to stop the spinner,
How about this:
var zPanel = {
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
//showDiv();
zPanel.spinner = zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
//showDiv();
//zPanel.loader.spinner('stop');
zPanel.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
//var target = document.getElementById('zloader');
var target = document.getElementById('zloader_content');
var spinner = new Spinner(opts).spin(target);
return spinner;
},
}
};
zPanel.init();

zPanel is an object. The functions in zPanel only use their own variables. To be able to call the spinner object just create a spinner property in zPanel and let all functions use this property:
var zPanel = {
spinner: null, //Notice the property!
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
//showDiv();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
var self = this; //Create a variable that is accesable within the fadeIn
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
//showDiv();
//Below code has changed!!
self.spinner('stop');
zPanel.loader.buildSpinner.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
//var target = document.getElementById('zloader');
var target = document.getElementById('zloader_content');
//Below line has changed!!!
this.spinner = new Spinner(opts).spin(target);
//if(spinStart == 'stop'){
// zPanel.loader.spinner.spinner.stop();
//}
},
}