Задать размер списка 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, время: 22:15. |