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

[Teasernet Support]

У меня есть код 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:

 

[Kostil]

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

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

 

[roman_rr]

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

ПРЕКРАТИТЕ писать на него с помощью 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>
Код (разметка): Если бы я мог увидеть это вживую, я, вероятно, смог бы написать рабочий пример, состоящий из части кода, который вы бросаете в этот беспорядок.