jQuery Forum

I have some HTML and jQuery code. The idea is that if a radiobutton is checked, the div #kaaviotaulukko should be scrolled to left position of the checked radiobutton. And the checked radiobutton should be horizontally centered to browser window.

The problem is that my current jQuery code does not center the checked radiobutton horizontally.

1. $(document).ready(function(){
     $('#kaaviotaulukko input[type=radio]').change(function() {
       var container = $('#kaaviotaulukko'),
         scrollTo = $(this);
   
       if(scrollTo.is(':checked')) {
         var leftOffset = scrollTo.offset().left - container.offset().left + container.scrollLeft();
   
         container.animate({
           // scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft()
           scrollLeft: leftOffset
         }, 1000);
       }
     });
   });

And here is my HTML code which is not the cleaned up yet, but hopefully you will get the idea.

<DIV id="kaaviopohja" style="width: 100%;">

<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-102" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:70px">extra
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-101" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">LQ
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-7" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L4
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-6" checked="checked" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L3
</div></DIV><!--
--><input name="nappi" type="radio" id="someID-100" /><div style="float:right;width:0">
</div><!--

--><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>

<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>

</DIV>