Проблема с динамической шириной у 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:

<div id="wrapper">

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

<ul class="video">

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

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

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

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

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

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

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

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

</ul>

</div>

</div>

Далее CSS:

#wrapper { width: 1000px; margin: 0 auto; background-color:#cde334; overflow:hidden;

}

.video{ overflow:hidden; zoom:1; list-style-type:none; margin-left:-30px; padding:40px 0;

}

.video li{ float:left; margin-left:30px; width:270px; height:180px;

}

.video li img{ display:block;

}

#wrapper. scroll-pane{ width:1000px;

}

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

$(document).ready(function(){ scrollAreaWidth(); initScrollPane();

}); function initScrollPane(){

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

} function scrollAreaWidth(){

$('.scroll-pane ul').each(function(){ var myEl = $(this).find('>li'); // находим элемент li var el_Num = myEl. length; // кол-во li var el_ouWidth = myEl. outerWidth(true); // ширина li вместе с margin-left var container_width = el_Num*el_ouWidth; // считаем ширину для ul

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

});

}

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

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


Карта сайта


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