Прокрутка div так, чтобы отмеченный переключатель находился по центру экрана по горизонтали.

У меня есть код HTML и jQuery.

Идея состоит в том, что если переключатель отмечен, элемент div #kaaviotaulukko должен быть прокручен до левой позиции отмеченного переключателя.

И проверенный переключатель должен быть расположен по центру окна браузера по горизонтали. Проблема в том, что мой текущий код jQuery не центрирует проверенный переключатель по горизонтали.

Вот код jQuery:

 <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>

Код (JavaScript): А вот мой HTML-код, который еще не очищен, но, надеюсь, вы уловили идею.

 $(document).ready(function(){ $('#kaaviotaulukko input').each(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); } }); });

HTML:

Мне кажется, что...

 container.offset().left

Код (JavaScript): ... всегда 8. Почему?

Ну, несколько предложений?



ПРЕКРАТИТЕ писать на него с помощью jQuery, ПРЕКРАТИТЕ использовать JavaScript для выполнения работы CSS, ПРЕКРАТИТЕ вводить теги и атрибуты в верхнем регистре, как будто это все еще 1995 год, ПРЕКРАТИТЕ использовать проклятый атрибут style="", который имеет относительно мало угловых случаев, в которых он имеет ЛЮБЫЕ чертов бизнес в HTML, ПРЕКРАТИТЕ использование DIV для выполнения того, что кажется работой метки, ПРЕКРАТИТЕ использование DIV, если вам нужен элемент встроенного уровня, ПРЕКРАТИТЕ бесконечное использование DIV там, где, по-видимому, нет законной причины даже иметь DIV.



.. У вас есть набор связанных полей, поэтому семантически они входят в FIELDSET.

отсюда и такое чертово имя... у вас есть текстовая маркировка этих входных данных, поэтому это должны быть LABELS с атрибутами FOR.

Нет НУЛЕВОЙ причины шлепать классы повсюду, и если бы у меня был DIV, это было бы для позиционирования и переноса строк.

То есть, НАУЧИТЕСЬ, КАК НАПИСАТЬ HTML-ФОРМУ, ПРЕЖДЕ ЧЕМ ВЫ НАЧНЕТЕ БРОСАТЬ В НЕЙ СКРИПТАРДЕРИИ!

 
#kaaviopohja input {

display:block;

margin:0;

transition:margin 0.3s;
}
#kaaviopohja input:checked {

margin:0 auto;
}

Код (разметка): Я немного предполагаю, так как ВСЕ ЕЩЕ не могу понять, что, черт возьми, вы на самом деле пытаетесь сделать с этим, но это приличное предположение, ОЧЕНЬ маловероятно, что вам понадобится больше кода, чем этот.

и НЕТ, вам не нужна умственная хитрость, такая как jQuery, чтобы повлиять на поведение выбранного переключателя, по крайней мере, ни в одном браузере новее, чем IE9. Теперь для этого у нас есть атрибут :target.

Вот почему, если у вас есть какой-то другой мусор DIV или вы хотите изменить расположение INPUT, вы должны использовать :checked и МОЖЕТ БЫТЬ реализовать сгенерированный контент.

Никакого издевательства над разметкой с помощью style="" asshattery, бесконечных бессмысленных DIV и классов впустую или бросания в нее жирной раздутой крушения поезда некомпетентности разработчика, которой является jQuery.

Скорее всего, то, о чем вы просите, хотя это зависит от расположения метки:

 <fieldset id="kaaviopohja"> <div> <input name="nappi" type="radio" id="someID-102"> <label for="someID-102">extra</label> </div><div> <input name="nappi" type="radio" id="someID-101"> <label for="someID-101">LQ</label> </div><div> <input name="nappi" type="radio" id="someID-7"> <label for="someID-7">L4</label> </div><div> <input name="nappi" type="radio" id="someID-6"> <label for="someID-6">L3</label> </div><div> <input name="nappi" type="radio" id="someID-100"> <label for="someID-100">WHAT IS THIS?!?</label> </div> </fieldset> 

Код (разметка): Если бы я мог увидеть это вживую, я, вероятно, смог бы написать рабочий пример, состоящий из части кода, который вы бросаете в этот беспорядок.

Я изменил свой код, но отмеченный переключатель не будет центрирован по горизонтали. Любая помощь? Теперь я использую этот код jQuery:

 $(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: leftOffset


}, 1000);


}


});


});

Код (JavaScript):