animate several divs via radio buttons in a responsive design

Question

I have several divs which change their size by clicking on different radio buttons. If you click on a radio button with a small window size, the div shrinks. After that, if you resize the window (make it bigger) and click on another radio button to make the div grow again it does not grow to 100% percent of the original size. What is the problem? I already use percentages in the CSS:

#kunstmuseum {
left: 0;  
top: 0;  
height: 80px;
width: 11.5%;
background-color:#334D5C;
white-space: normal;
display: inline-block;
border-top: 0;
}

Here is the HTML for the radio buttons:

<input id="kunst_radio1" type="radio" name="kunstmuseum" value="0" checked="checked" onClick="animateDiv('kunstmuseum', 'nichts')">
<input id="kunst_radio2" type="radio" name="kunstmuseum" value="6794200" onClick="animateDiv('kunstmuseum', 'halb')">
<input id="kunst_radio3" type="radio" name="kunstmuseum" value="13588400" onClick="animateDiv('kunstmuseum', 'voll')">

Here is the HTML for the div to be animated:

 <div id="kunstmuseum"></div>

Here is the JS-code:

 var mapping  = {
  kunstmuseum: {
    voll: 0,
    halb: 0.5,
    nichts: 1
   }
};
function animateDiv(type, val) {


    var div = $('#' + type);
    if(div.data('originalWidth') == undefined)
    div.data('originalWidth', div.width());

    var width = div.data('originalWidth');
    width *= mapping[type][val];
    $('#' + type).animate({width: width}, 500);
}

And here is a fiddle which is unfortunately not working: http://jsfiddle.net/zord/r1zut4we/

But the animate function works on my website: http://labs.tageswoche.ch/budget/budget.html

Your problem is that, when you re-set the width, it is being set in pixels. e.g. going from 11% to 86px. Then when you re-size your browser the pixel width is the wrong size (as you no longer have a percentage). — Leo Farmer, Dec 11 '14 at 02:44
@Felix When setting the "originalWidth", you're setting it to a pixel value. Use something like this instead: http://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery — ndugger, Dec 11 '14 at 13:12
@NickDugger From your link: I think this should work: $('.largeField')[0].style.width but I dont know how to implement it — Felix, Dec 11 '14 at 13:37
@Felix no, that won't work. That will only work if width is attached to the HTML element in a 'style' attribute. — ndugger, Dec 11 '14 at 13:42

Leo Farmer · Accepted Answer · 2014-12-11T21:31:58.037

I think the easiest way to do it would be to use percentages in your mapping values and display them directly. Take a look at this fiddle http://jsfiddle.net/1dx5zfv6/16/

var mapping  = {
 kunstmuseum: {
   voll: 0,
   halb: 5.5,
   nichts: 11.5
  }
};
animateDiv = function(type, val) {

  var div = $('#' + type);

  if(div.data('originalWidth') == undefined)
  div.data('originalWidth', div.width());
  var widthPer = mapping[type][val];

  $('#' + type).animate({width:widthPer + '%'}, 500);
}

animate several divs via radio buttons in a responsive design

1 Answers1