Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Задать размер списка Jquery (https://javascript.ru/forum/jquery/65638-zadat-razmer-spiska-jquery.html)

Роман Андреевич 31.10.2016 09:19

Задать размер списка Jquery
 
Всем доброго времени суток.

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

<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 31.10.2016 09:21

Цитата:

Сообщение от Роман Андреевич
Нужно li сделать равной ширине окна браузера

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

Роман Андреевич 31.10.2016 09:27

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

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

рони 31.10.2016 10:08

slider установка ширины ul
 
Роман Андреевич,
<!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>

Роман Андреевич 31.10.2016 11:24

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

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

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

ksa 31.10.2016 11:27

Цитата:

Сообщение от Роман Андреевич
через css им присвоен
float:left

Не совсем понятно, зачем такое присваивать, а потом программно расширять на всю ширину... :blink:
В стандарте элемент списка и так бы ее всю занял.

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

Роман Андреевич 31.10.2016 11:30

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

Роман Андреевич 31.10.2016 11:31

Вложений: 1
Вот скрин

ksa 31.10.2016 11:32

Цитата:

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

Вона че... :D

Роман Андреевич 31.10.2016 11:33

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

Роман Андреевич 31.10.2016 11:33

вот я и не могу понять почему ширина ползунка учитывается

ksa 31.10.2016 11:36

Роман Андреевич, а так?
<!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;
}
html,
body {
	width: 100%;
}
section,
nav {
	width: 100%;
}
ul {
	height: 100%;
	height: 120px;
	list-style: none;
	overflow: hidden;
}
li {
	height: 100%;
	border:3px solid #0000FF;
	box-sizing: border-box; 
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<section>
	<nav>
		<ul>
			<li>
                                     //.....какой то контент 1
			</li>
			<li>
                                     //.....какой то контент 2
			</li>
			<li>
                                     //.....какой то контент 3
			</li>
			<li>
                               //.....какой то контент 4
			</li>
		</ul>
	</nav>
</section>
</body>
</html>

И скролируй сколько хочешь... ;)

Роман Андреевич 31.10.2016 11:45

ksa,
Вы задали height фиксированную, а этого не нужно, потому что высота li формируется исходя из того что внутри плюс padding(по желанию).
Все равно не помогло. Спасибо

рони 31.10.2016 11:49

Цитата:

Сообщение от ksa
а так?

скролировать не получится -- ширина ul равна li -- вариант только для вертикального скрола.

Роман Андреевич 31.10.2016 11:52

Задача я думаю очевидна, расположить li горизонтально друг за другом.

Роман Андреевич 31.10.2016 11:53

Решается, с другой стороны просто, body {overflow-y: scroll;} - появляется скролл (пустой), но зато все нормально

Роман Андреевич 31.10.2016 11:54

Но не правильно я считаю

Роман Андреевич 31.10.2016 11:55

Либо убрать вообще скрол на body но тогда надо писать скрипт серфинга по секциям вниз и на верх

рони 31.10.2016 11:55

бесконечная прокрутка слайдера на jquery, ширина на весь экран, макет
 
Роман Андреевич,
css ваше видимо влияет, которое вы не указали ... а так всё должно работать.
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
   margin: 0px;
   width: 100%; min-height:50px; float: left;
   display: block;
  }
  ul {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  nav{
     overflow:hidden; width: 100%; height:50px; position: relative;  margin: 100px auto;
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
   $(function() {
    var ul = $('ul'), widthAll = 0;
    function slider_size() {
         $("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")

    function go() {
        var li = $('li:first', ul), w = li.width();
        ul.delay(3000).animate({
            left: -w
        }, 2000, function () {
            li.appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
});

  </script>
</head>

<body>
<section>
  <nav>
    <ul>
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;">2</li>
			<li  id = "3" style="background-color:Yellow;">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
	   </ul>
  </nav>
</section>
</body>
</html>

Роман Андреевич 31.10.2016 11:55

Короче говоря, я так и не понял, почему window width - ширина ползунка

Роман Андреевич 31.10.2016 12:00

суть оказалась, в картинке

рони 31.10.2016 12:04

Роман Андреевич,
тогда не ready => $(function() {
а load = > $(window).on("load", function() {


Часовой пояс GMT +3, время: 22:15.