Проблема с динамической шириной у scrollpane плагина

Проблема с динамической шириной у scrollpane плагина.

Уже давно хотел об этом написать, но так все руки не доходили. Наконец-то выдался свободный выходной и я реши посидеть и написать небольшую статью для своего блога. Надеюсь эта статья поможет решить проблему для начинающих Джи эсеров или просто без труда теперь люди будут подключать scrollpane, который я рекомендую, потому что он очень гибок в настройках и легок в подключении. Тот, кто не знает что такое scrollpane и как его подключить к сайту, прочтите эту статью для начала. Итак, сама проблема у меня возникла в одном из прошлых проектов, которые я верстал, есть динамическая ширина у блока, для которого мы ставим стилизированный scrollpane. Иными словами говоря, если у нас есть какой-то список состоящий из картинок, которые флотятся друг за другом и для этого списка нам нужно сделать стилизированный скролл, возникает такая проблема, как выставление ширины контейнера. Она должна быть обязательно фиксированной и, соответственно, значительно больше ширины видимой области для прокрутки.

Что у нас здесь. Есть ul, в котором есть элементы списка li, флотящиеся по левому краю. Но так как ширина у контейнера UL не задана, то картинки(элементы li) спадают на следующую строку. Если я выставлю для UL фиксированную ширину либо в css либо в самом html, тогда у меня все получится и появится долгожданный scroll который уже можно стилизировать. Но! Представьте, что картинок у вас может быть больше или меньше, а ширина контейнера у вас фиксированная. Что делать тогда? Менять каждый раз значение ширины в CSS, а еще, не дай Бог, в HTML!? Я думаю, что нет. Вот поэтому я и стал искать решение проблемы. Оно оказалось очень простое. Хватило 15 минут просто сесть и подумать. Решение было написать отдельную функцию, которая будет перед инициализацией scrollpane плагина просчитывать, сколько элементов(li) в моем контейнере, считать ширину каждого элемента, умножать на кол-во элементов и ставить ширину для контейнера UL в атрибут style в html. Все это будет происходить автоматически, после того, как вы подключите эту функцию.

Теперь пришло время перейти к html, css и js коду. Что будет в нашем html:

1 <div id="wrapper">

2 <div class="scroll-pane horizontal-only">

3 <ul class="video">

4 <li><img src="videoImg. jpg" alt="" /></li>

5 <li><img src="videoImg. jpg" alt="" /></li>

6 <li><img src="videoImg. jpg" alt="" /></li>

7 <li><img src="videoImg. jpg" alt="" /></li>

8 <li><img src="videoImg. jpg" alt="" /></li>

9 <li><img src="videoImg. jpg" alt="" /></li>

10 <li><img src="videoImg. jpg" alt="" /></li>

11 <li><img src="videoImg. jpg" alt="" /></li>

12 </ul>

13 </div>

14 </div>

Далее CSS:

1 #wrapper {

2 width: 1000px;

3 margin: 0 auto;

4 background-color:#cde334;

5 overflow:hidden;

6 }

7 .video{

8 overflow:hidden;

9 zoom:1;

10 list-style-type:none;

11 margin-left:-30px;

12 padding:40px 0;

13 }

14 .video li{

15 float:left;

16 margin-left:30px;

17 width:270px;

18 height:180px;

19 }

20 .video li img{

21 display:block;

22 }

23 #wrapper. scroll-pane{

24 width:1000px;

25 }

А теперь перейдем непосредственно к файлу function. js. Обычно в этом файле я храню все функции которое нужно написать, подключении плагинов и все остальное.

1 $(document).ready(function(){

2 scrollAreaWidth();

3 initScrollPane();

4 });

5

6 function initScrollPane(){

7 $('.scroll-pane').jScrollPane();

8 }

9

10 function scrollAreaWidth(){

11 $('.scroll-pane ul').each(function(){

12 var myEl = $(this).find('>li'); // находим элемент li

13 var el_Num = myEl. length; // кол-во li

14 var el_ouWidth = myEl. outerWidth(true); // ширина li вместе с margin-left

15 var container_width = el_Num*el_ouWidth; // считаем ширину для ul

16 $(this).css('width', container_width); // выставляем ширину для контейнера

17 });

18 }

У меня все получилось!

И после написания этой функции я могу добавлять и удалять картинки в мой список и не думать о том, что что-то слетит на другую строку, спадет или будет обрезаться. Теперь мой scrollpane


Карта сайта


Информационный сайт Webavtocat.ru