Задать размер списка 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 присваивается значение ширины окна - размер скроллбара!!! Как это исправить, подскажите???? Заранее благодарю |
Цитата:
|
Все верно, каждый li должен быть равным ширине окна, через css им присвоен float:left соответственно осталось задать ширину ul, он равна li.width()*li.length.
к ширине li почему то добавляется ширина скролл бара |
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>
|
рони,
Вопрос в том, что когда я задаю ширину li равной ширине окна, например ширина окна 1366px, по сути ширина li должна быть равна 1366px, но она равна 1366 - размер ползунка 17px. Во и вопрос, почему так. И код, который вы привели в пример показывает у меня то же самое. Заранее спасибо |
Цитата:
В стандарте элемент списка и так бы ее всю занял. <!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>
|
Это слайдер, li равны ширине окна а ul ширина всех li
|
Вложений: 1
Вот скрин
|
Цитата:
|
))))))))))))))))))))))))))))))
|
вот я и не могу понять почему ширина ползунка учитывается
|
Роман Андреевич, а так?
<!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>
И скролируй сколько хочешь... ;) |
ksa,
Вы задали height фиксированную, а этого не нужно, потому что высота li формируется исходя из того что внутри плюс padding(по желанию). Все равно не помогло. Спасибо |
Цитата:
|
Задача я думаю очевидна, расположить li горизонтально друг за другом.
|
Решается, с другой стороны просто, body {overflow-y: scroll;} - появляется скролл (пустой), но зато все нормально
|
Но не правильно я считаю
|
Либо убрать вообще скрол на body но тогда надо писать скрипт серфинга по секциям вниз и на верх
|
бесконечная прокрутка слайдера на 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>
|
Короче говоря, я так и не понял, почему window width - ширина ползунка
|
суть оказалась, в картинке
|
Роман Андреевич,
тогда не ready => $(function() { а load = > $(window).on("load", function() { |
| Часовой пояс GMT +3, время: 15:31. |