[MacLeo]

Здравствуйте, уже который день пытаюсь сделать прокрутку определенного места на странице, получилось сделать только div`ом, но ползунок стандартный

Хочу сделать что то вроде этого:

Мне давали способы как сделать на jq, но у меня ничего не вышло. Если кто то делал такое, помогите найти решение :)

[Zvеr]

Если делали, то единицы. Давай пример, и что не получилось, сейчас все получиться :)

[MacLeo]

http://baijs.nl/tinyscrollbar/
А вот результат моей работы

[Zvеr]

Ссылку дай на результат. Мне нужно видеть пример, и что сделал ты из этого примера, чтобы знать в чем проблема.

[MacLeo]

Вот результат, блок Сейчас смотрят.
Кстати, появляется дефект, ползунок появляется снизу страницы.

[Zvеr]

А у меня почему-то сразу получилось :) см.миниатюру

Правда для этого я не стал разбираться в твоем коде, а просто снес его и вставил с примера. Твой код совершенно не верен с семантической точки зрения, т.к. таблица не должна находиться в параграфе, да и блоки в списке это как-то по извращенски:)
Так же я не нашел в твоем коде прописанного CSS для scroll блока и собственно самой главной строчки:

$('#scrollbar1').tinyscrollbar();

Не нужно читать пример между строк, или вовсе его не читать, самый легкий вариант тупо скопировать, если не из примера, то открыв их исходный код - и оттуда, там же все работает. Ну и конечно же желательно бы знать основы HTML и CSS.

[MacLeo]

Я ставил так:
В head:

Код:

<script type="text/javascript" src="http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js"></script>

В CSS:

Код:

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }

В нужном месте где нужен скролл:

Код:

<div id="scrollbar1">
  <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
  <div class="viewport">
    <div class="overview">
     
      <p> {include file="topnews_mod.php"} </p>                             
    </div>
  </div>
</div>

Где ошибка?

[Zvеr]

Ну во-первых в:

Код:

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }

Зачем ширина 520 пикселей?

Во-вторых, подключить плагин - не значит его использовать. Не хватает строки:

Код:

$('#scrollbar1').tinyscrollbar();

И в третьих, строка:

Код:

<p> {include file="topnews_mod.php"} </p>

Не значит что все правильно выводиться :)

[MacLeo]

Вроде сделал, но вот что получилось:

Но как придать этой полоске нормальный вид ?

[Zvеr]

Там используются изображения. Посмотри CSS файл в примере и станет понятно. Пример:

Код:

#scrollbar1 .scrollbar{ background: transparent url(../images/design/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }