Динамическое масштабирование блока с jQuery-скроллером

Обсуждаются вопросы использования плагинов для jQuery, созданных сторонними разработчиками.

Модераторы: TRAHOMOTO, tuareg

Динамическое масштабирование блока с jQuery-скроллером

Сообщение nickovich » 15 сен 2013, 22:47

Здравствуйте!
Есть трехколоночный "резиновый" макет. В центральной колонке для прокрутки содержимого (задумка такая) определен overflow: auto. Для изменения стиля полосы прокрутки к средней колонке прикручен jQuery-скроллер (вот по этой инструкции, если что http://www.xiper.net/collect/js-plugins/ui/tinyscrollbar.html).
Так вот. До подключения библиотеки с плагином, макет масштабируется, как надо, при любом разрешении и размере окна браузера. После подключения скриптов, средняя колонка становится фиксированной и при изменении размера окна браузера макет "плывет". Восстанавливается только после обновления страницы.
В html и css подсекаю, а за js только-только взялся. Рано или поздно, ясен перец, разберусь, только сайт вынь-да-положь нужен, а я уже четвертый день этой темой мозг насилую (
Вот листовки.

Подключение библиотек и плагинов

Код: выделить все
<link type="text/css" rel="stylesheet" href="js/jquery.jscrollpane.css" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>


Стиль для кода

Код: выделить все
<style type="text/css">
#middle{
   width: 99%;
   margin: 0 auto;
   border: 1px solid black;
}
#left {
   float:left;
   width:320px;
   border: 1px solid black;
}
#right {
   float:right;
   width:400px;
   border: 1px solid black;
}
#content {
   margin: 0 200px 0 320px;
   height: 200px;
   overflow: auto;
   border: 1px solid black;
}
</style>



Вызов функции

Код: выделить все
<script>
$(function(){
   $("#content").jScrollPane();
});
</script>


Сама страница, собственно

Код: выделить все
<body>
   <div id="middle">
   <div id="left">Первая колонка</div>
   <div id="right">Третья колонка</div>
   <div id="content">
   <div><p>Вторая колонка со скроллером</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
  <p>
***
</p>
</div></div></div>
</body>


Наверняка ж кто-то мудрый ответит. Так что заранее - спасибо! :)
nickovich
 
Сообщений: 3
Зарегистрирован: 15 сен 2013, 13:46

Re: Динамическое масштабирование блока с jQuery-скроллером

Сообщение Gennady » 16 сен 2013, 21:09

Насчет jScrollPane не скажу ничего. Заметил вот что - правый margin у блока #content = 200px, при том, что width блока #right задана 400px. Это так задумано?
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: Динамическое масштабирование блока с jQuery-скроллером

Сообщение nickovich » 16 сен 2013, 22:25

Ах, ты ж, досада. margin: 400px, конечно ж. Даже чуть больше, учитывая border. Но все равно, с правильными размерами не пашет(
Заметил еще, что в поле контента, при подключенном скроллере, не выводятся результаты поиска.
А, да! Я ж все это в Джумле леплю. Так вот, в одном джумловом шаблоне и увидел скроллер на контенте, и работает там все отлично - и масштабирование, и вывод результатов поиска. Только весь js там, похоже, самописный, и без нормального знания языка там мозг свернешь(
nickovich
 
Сообщений: 3
Зарегистрирован: 15 сен 2013, 13:46

Re: Динамическое масштабирование блока с jQuery-скроллером

Сообщение tuareg » 18 сен 2013, 22:43

что не правильно Вы подключили. В плане, на демо странице, плагин не ставит ширину и высоту.
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: Динамическое масштабирование блока с jQuery-скроллером

Сообщение nickovich » 19 сен 2013, 22:08

Имеете в виду, в вызове функции добавить

Код: выделить все
   $("#content").css('width', '99%');


Спробовал, не вышло...

Криво выкрутился, контентный div окружил таблицей со стопроцентной шириной, оно кое-как срабатывает на разных мониторах. Но при стягивании окна все равно без динамики - приходится перезагружать страницу.
nickovich
 
Сообщений: 3
Зарегистрирован: 15 сен 2013, 13:46


Вернуться в Плагины jQuery

Кто сейчас на форуме

Сейчас этот форум просматривают: Google [Bot] и гости: 4