Animation feature: change div width with radio buttons
I am trying to create an interactive "game" like this: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?_r=0
I have a draft and it works great with checkboxes, now I need the same with radio buttons.
But if I click on the radio button then the div shrinks, if I click another it shrinks over and over. The behavior should be: Press the switch (decrease 10%) and then press the radion button (decrease 5%), it should rise slightly. Therefore, he must always take into account what he previously pressed.
Here is the JavaScript function:
function animateDiv(val) {
if (val=="voll") {
$('#cont').animate({width: '-=10%'}, 500);
}
else if (val=="halb") {
$('#cont').animate({width: '-=5%'}, 500);
}
else if (val=="null") {
$('#cont').animate({width: '-=0%'}, 500);
}
}
Markup:
<input id="radio" type="radio" name="kultur" onClick="animateDiv('voll')">Voll
<input id="radio" type="radio" name="kultur" onClick="animateDiv('halb')">Halb
<input id="radio" type="radio" name="kultur" checked="checked" onClick="animateDiv('null')">Null
Checkbox functionality you can see here: http://labs.tageswoche.ch/budget
source to share
You need it to remember what the original width was. Maybe before you revive, check if .data ('originalWidth') is set. If it isn't, set a width for it. Then, for each subsequent animation, base it on that. Something like...
function animateDiv(val) {
var div = $('#cont');
if(div.data('originalWidth') == undefined)
div.data('originalWidth', div.width());
var width = div.data('originalWidth');
if (val=="voll")
width *= .9;
else if (val=="halb")
width *= .95;
$('#cont').animate({width: width}, 500);
}
source to share
Can you try this:
Store a global variable in your javascript, say var globalWidth = $('#cont').width();
Then change your function animateDiv
to this: (the idea is to revert the width back to its original and then animate)
function animateDiv(val) {
$('#cont').css('width',globalWidth);
if (val=="voll") {
$('#cont').animate({width: '-=10%'}, 500);
}
else if (val=="halb") {
$('#cont').animate({width: '-=5%'}, 500);
}
else if (val=="null") {
$('#cont').animate({width: '-=0%'}, 500);
}
}
source to share