Форум

Роман Андреевич · #1 (**permalink**) 31.10.2016, 09:19

Всем доброго времени суток.

Суть вопроса такова. Есть список:

<section>
	<nav>
		<ul>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                               //.....какой то контент
			</li>
		</ul>
	</nav>
</section>

Нужно li сделать равной ширине окна браузера, а ul получается равным все li * кол-во li.
Скрипт:

slider_size();

	function slider_size() {
		
		var container = $("nav");
								
		container.each(function() {

			var $this = $(this),
				win = $this.closest("section"),
				winWidth =  win.width(),
				list = $this.find("ul"),
				item = list.find("li"),
				itemLength = item.length;

			item.width(winWidth);
			list.width(winWidth * item.length);
			
		});	

	}

Собственно все работает, только li присваивается значение ширины окна - размер скроллбара!!! Как это исправить, подскажите????

Заранее благодарю

ksa · #2 (**permalink**) 31.10.2016, 09:21

Сообщение от Роман Андреевич

Нужно li сделать равной ширине окна браузера

Каждый элемент такого размера?

Роман Андреевич · #3 (**permalink**) 31.10.2016, 09:27

Все верно, каждый li должен быть равным ширине окна, через css им присвоен float:left соответственно осталось задать ширину ul, он равна li.width()*li.length.

к ширине li почему то добавляется ширина скролл бара

рони · #4 (**permalink**) 31.10.2016, 10:08

Роман Андреевич,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html *{padding:0;margin:0}
  li{border:3px solid #0000FF;float:left;box-sizing:border-box; height: 120px;}
  ul{list-style:none}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    function slider_size() {
        var ul = $("ul"),
            widthAll = 0;
        $("li", ul).each(function(indx, element) {
            this.style.width = document.documentElement.clientWidth + "px";
            widthAll += this.offsetWidth
        });
        ul.width(widthAll)
    }
    $(window).resize(slider_size).trigger("resize")
});
  </script>
</head>

<body>
<section>
  <nav>
    <ul>
      <li>
                                     //.....какой то контент
      </li>
      <li>
                                     //.....какой то контент
      </li>
      <li>
                                     //.....какой то контент
      </li>
      <li>
                               //.....какой то контент
      </li>
    </ul>
  </nav>
</section>


</body>
</html>

Роман Андреевич · #5 (**permalink**) 31.10.2016, 11:24

рони,
Вопрос в том, что когда я задаю ширину li равной ширине окна, например ширина окна 1366px, по сути ширина li должна быть равна 1366px, но она равна 1366 - размер ползунка 17px. Во и вопрос, почему так.

И код, который вы привели в пример показывает у меня то же самое.

Заранее спасибо

ksa · #6 (**permalink**) 31.10.2016, 11:27

Сообщение от Роман Андреевич

через css им присвоен

float:left

Не совсем понятно, зачем такое присваивать, а потом программно расширять на всю ширину...

В стандарте элемент списка и так бы ее всю занял.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style:none;
}
li {
	border:3px solid #0000FF;
	box-sizing: border-box; 
	height: 120px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<section>
	<nav>
		<ul>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                                     //.....какой то контент
			</li>
			<li>
                               //.....какой то контент
			</li>
		</ul>
	</nav>
</section>

</body>
</html>

Роман Андреевич · #7 (**permalink**) 31.10.2016, 11:30

Это слайдер, li равны ширине окна а ul ширина всех li

Роман Андреевич · #8 (**permalink**) 31.10.2016, 11:31

Вот скрин

ksa · #9 (**permalink**) 31.10.2016, 11:32

Сообщение от Роман Андреевич

Это слайдер

Вона че...

Роман Андреевич · #10 (**permalink**) 31.10.2016, 11:33

))))))))))))))))))))))))))))))

Форум

Справочник

Discord чат

Курсы javascript