no_smoking 14 ноя 2008 в 13:38

Вертикальный скрол c краткой информацией.

1 мин

2.3K

JavaScript*

+85

Комментарии 85

XaocCPS 14 ноя 2008 в 13:48

у меня в ff3.0.4 не работают кнопки «вверх», «вниз»
кроме того, не ясно задумано так или нет, но кликнуть для перехода по «бару» можно только в промежутки между прямоугольники «p». Клик на сами прямоугольники перехода не вызывает.

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

no_smoking 14 ноя 2008 в 14:02

Поправил :)

Maximark 14 ноя 2008 в 14:21

А еще можно реализовать tooltip для блоков в скролбаре, при наведении на блок будет показываться содержимое в tip-e :)

no_smoking 14 ноя 2008 в 15:07

большой же tooltip будет :) А так идея хорошая.

smileart 14 ноя 2008 в 15:43

Отчего же большой! Можно поместить туда, хотя бы, заголовок блока на символ которого навели, а для изображений небольшой thumbnail

maxic 17 ноя 2008 в 11:10

Ну допустим — только текст например, или скриншот блока или…
можно что хочешь, главное тултипом

no_smoking 17 ноя 2008 в 11:32

Уже выводится текст ограничений 200 символов

kurokikaze 14 ноя 2008 в 18:26

Зачем тогда вообще место для контента? ;)

al_dexter 14 ноя 2008 в 19:01

теперь они работают слишком хорошо, «западают» :)

kostos 14 ноя 2008 в 13:52

Есть еще подобное на флеше
artgorbunov.ru/bb/ui/infoscroller/

nps 14 ноя 2008 в 15:13

И тут средний клик мыши не включает навигационную штуку :(

smileart 14 ноя 2008 в 15:40

Да, во флеш реализации сами графические символы понятнее и симпатичнее, а то здесь когда загрузились пустые блоки с «P» мне показалось что это нечто вроде недоступной картинки.

noita_kronk 15 ноя 2008 в 06:00

Не факт, что в этом флеше «краткое содержание» под скролом генерируется автоматически. Скорее всего это статическая демонстрация идеи. На мой взгляд, такие нагруженные информацией скролы вряд ли нужны.

А вот скролы программы Eclipse с маркерами ошибок, предупреждений и задач (причём активными, т.е. при нажатии на них происходит переход к соответствующей строке) — это штука полезная и проверенная на деле.

Могут понадобиться алфавитные скролы, скролы с датами, т.е. с фильтрующей информацией, а сжатый показ самого содержимого, на мой взгляд, — блажь.

Astralian 14 ноя 2008 в 13:52

Интересная штука.
Только клик скролла на мышке не работает, а это печально

kraY 14 ноя 2008 в 13:53

Задумка весьма интересная. В опере 9.62 если страницу скролить с клавиатуры, то текст не отображается.

takkmoil 14 ноя 2008 в 13:55

«Инфоскроллер» — идея Горбунова и Воронежского. Ваша реализация неплоха, но дорабатывать есть что. У меня, кстати, кнопки тоже не работают (fx304/win)

takkmoil 14 ноя 2008 в 13:56

И с клавиатуры не скроллится, да.

no_smoking 14 ноя 2008 в 14:07

Эту идею я видел в какой то книге по юзобилете еще до его реализации, там еще несколько было идей. Как называется книга я уже не помню, но может конечно это он ее написал.

Error_403_Forbidden 14 ноя 2008 в 14:32

Да неважно, откуда идея. Главное, что вы сумели это реализовать на практике :)

arestov 14 ноя 2008 в 14:11

вам в низ)
www.usethics.ru/lib/scroll_bar.html

arestov 14 ноя 2008 в 14:11

или вниз))

takkmoil 14 ноя 2008 в 14:39

Я не любитель полемики, так что давайте же поищем истину :) «Новая жизнь полосы прокрутки» — 20 ноября 2006 (внизу написано, да :), «Инфоскроллер, или Полоса прокрутки с представлением содержания в виде графических символов» — 16 декабря 2005 (и даже бумага есть).

no_smoking 14 ноя 2008 в 14:41

В любом случае запатентована реализация а не идея :)

takkmoil 14 ноя 2008 в 14:48

Патенты на идеи — это жуткий бред, придуманный цивилизацией. Кстати, кнопки скролла, вижу, уже заработали, а вот скролл стрелками, пробел и шифт+пробел — всё ещё нет :(

no_smoking 14 ноя 2008 в 15:04

Теперь работают :)

takkmoil 14 ноя 2008 в 15:15

Осталось прикрутить плавный скролл :)
И всё же переделать отображение информации на скроллере — таблицу и картинку обычный человек поймёт, а вот P вряд ли, строчки очевиднее.

takkmoil 14 ноя 2008 в 15:18

И ещё, кнопки скроллера можно таскать. А не должно бы.

takkmoil 14 ноя 2008 в 15:20

Правда это получилось у меня только один раз (на верхней кнопке, после чего она «залипла»). Теперь при попытке потащить кнопку выделяется текст, что тоже нелогично (обычные скроллер так не делает).

no_smoking 14 ноя 2008 в 15:32

Теперь нельзя :)

takkmoil 14 ноя 2008 в 15:42

А «навигационную штуку», что по клику средней кнопкой, можно заставить работать? Цены б этому скроллеру тогда не было :)

no_smoking 14 ноя 2008 в 15:46

Ну чисто теоретически возможно. Но стока гемароя :) я подумаю над этим.

no_smoking 14 ноя 2008 в 15:55

Подумал. Средний клик можно обработать только в ie и в Safari Win так, что наверно оно того не стоит.

arestov 14 ноя 2008 в 14:43

цитирую из «низа»:

Идея усовершенствования стандартной полосы оказалась настолько популярной, что мы получили множество откликов по нашей статье. В части писем упоминались сходные решения: так, в среде разработки Eclipse рядом с полосой прокрутки выводятся маркеры (см. скриншоты), а в старом добром WinDiff (как же мы о нем забыли?!) слева выводится полоса показа различий. А наши коллеги из Студии Артемия Лебедева сообщили, что опираясь на собственные изыскания, даже запатентовали полосу прокрутки с представлением содержания в виде графических символов около года назад, но до недавнего времени не афишировали изобретение. Мы поздравляем наших коллег с получением патента и считаем, что это служит прекрасным подтверждением того, что модифицированная полоса прокрутки хороша (хотя, учитывая давность публикации Шнейдермана, мы сомневаемся в разумности такого патентования).

Информация о книге:

Ben Shneiderman. Designing of the User Interface, Third edition. Addison Wesley, 1998, ISBN: 032122325X, стр.451.

takkmoil 14 ноя 2008 в 14:45

Ура, истина найдена :)

barbuza 14 ноя 2008 в 13:58

мне более удачным вариантом кажутся кликабельные метки на основные места на странице.

developer 14 ноя 2008 в 13:59

идея хорошая
напомнило АдобРеадер и Жедавю просмоторщики

arestov 14 ноя 2008 в 14:13

вот вам ещё
ilyabirman.ru/tools/iscroll/

не думаете сделать userJS?

no_smoking 14 ноя 2008 в 14:22

В смысле чтобы показывалось только при наведение, ну тогда не понятно будет что там еще есть текст, да и в коком месте мы находимся сейчас, а наводить мышкой чтобы посмотреть меня это всегда раздражало. А мониторы сейчас большие. Так что все таки нет, чем да.

arestov 14 ноя 2008 в 14:27

что бы узнать если текст, надо сглека крутануть колесо — это не сложно зато высвобождается дополнительная ширина, а когда есть колесо (или стрелки клавиатуры) скроллбар используется только что бы узнать «где я?» и не всегда требуется

особенно круто в полноэкранном режиме (f11)

вы не ответили насчёт второго. сделать userJS, что бы можно было установить в браузер и использовать повседневно (в Опере можно, например, отключить стандартный скроллбар), так что это было бы очень круто!

no_smoking 14 ноя 2008 в 14:35

Пока что проблема как отображать сложные структуры по этому просто взять любой сайт и навешать не получится. Так что userJS пока не имеет смысла делать. Может быть в следующих версиях :)

arestov 14 ноя 2008 в 14:14

p.s. а можете сделать тестовую страницу как у Ильи Бирамана. Для тех кто хочет просто посмотреть что из себя это всё представляет, что бы ничего не скачивать и не шаманить самому?

arestov 14 ноя 2008 в 14:17

ой, ступил!

Неправильно оформляете ссыли)
Надо так:
Можно посмотреть демо и скачать исходники

no_smoking 14 ноя 2008 в 14:17

Так а это не устраивает nacmnogo.ru/scroll/scroll.html

ahat 14 ноя 2008 в 14:18

замечательно!

arestov 14 ноя 2008 в 14:20

буквально вчера обдумывал как бы такую штуку в браузер забацать: что если страница многоколоночная? что если текст не только в абзацах, но и в дивах и спанах? Как это должно выглядеть на хабре? начиная с какого минимального размера нужно почемать на карте картинки?
должно быть и горизонтальная прокрутка в случае необходимости

arestov 14 ноя 2008 в 14:32

*помечать на карте

no_smoking 14 ноя 2008 в 14:32

Данный плагин рас читан только на простую структуру. Те он отображает дочерние элементы периданого блока. Так что этот скрол стоит навешивать только на контент

arestov 14 ноя 2008 в 14:33

так и знал, что придётся всё делать самому

ermek 14 ноя 2008 в 14:25

а можно демо страницу снабдить, версией со сложной разметкой?
table, div, li, итд

P.s. я знаю, что есть исходники.

no_smoking 14 ноя 2008 в 14:39

habrahabr.ru/blogs/javascript/44540/#comment_1120751 добавил таблицу для теста

ermek 14 ноя 2008 в 14:42

спасибо, теперь нагляднее.

dohlik 14 ноя 2008 в 14:27

Мне почему-то кажется, что это непрактично.
Если видишь страницу впервые, то структура и расположение блоков текста все равно неизвестны, не знаешь, что ищешь. А если не в первый раз, то в примерное место искомого куска можно просто скроллом перенестись.
Уж лучше часто встречаемые оглавления в начале больших статей.

arestov 14 ноя 2008 в 14:31

непрактично просто так занимать 15300 пикселов на моём экране

Isis 14 ноя 2008 в 14:32

В избранное

deerua 14 ноя 2008 в 14:33

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

AxisPod 14 ноя 2008 в 14:39

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

Mitesha 14 ноя 2008 в 14:50

В хроме похожая вещь реализована — он при поиске в скролбаре цветом показывает где находятся искомые слова. Отличная идея.

Adrior 14 ноя 2008 в 14:54

Я такую же штуку делал приблизительно год назад чисто для фана: anton-shein.ru/infoscroller/index.html :)

takkmoil 14 ноя 2008 в 15:00

У вас отображение информации в скроллере лучше :)

no_smoking 14 ноя 2008 в 15:10

Ага прикольно. Вот только не кнопки не колесо мышиное не работает :( Зато есть подсказки к блокам

no_smoking 14 ноя 2008 в 15:13

Колесо только в FF не работает надо так element.addEventListener('DOMMouseScroll', mouseWheel, false);

Adrior 14 ноя 2008 в 15:43

Да, там достаточно багов, на самом деле. Я особо не отлаживал, так как делалось только ради интереса. :)

no_smoking 14 ноя 2008 в 16:27

Ну так я тоже не где еще не применялось, написал так чтоб было, пока время свободное :)

deerua 14 ноя 2008 в 17:14

так объединитесь и сделайте один супер-пупер-мега-инфоскроллер :)

wdk 14 ноя 2008 в 14:55

Работаёт чётко и красиво. Молодцом!

dark_ruby 14 ноя 2008 в 15:14

ГуглоХром кстати при поиске на странице помещает на скролл баре желтые полосочки для каждого найденного случая

no_smoking 14 ноя 2008 в 15:36

ГуглоХром вообще забавный зверь у меня почему то скрипт нормально отказался работать если стили в отдельный файл выносеш, загадка :)

Daedmen 14 ноя 2008 в 16:09

Эх, лучше бы для ff сделали в виде аддона

arestov 14 ноя 2008 в 17:00

лучше для всех браузеров в виде userjs

KBA 14 ноя 2008 в 16:11

Молодец! отличная штука!
как применять правда пока не понятно… может в блогах?

veevtam 14 ноя 2008 в 16:17

У меня есть небольшое дополнение: при большом количестве информации скорость прокрутки должна быть меньше. Например если отресайзить окошко с Вашим примером к сотне пикселей в высоту и скролить, то страница пролетает огромными «кусками».

no_smoking 14 ноя 2008 в 16:21

ну вообще то сейчас скролируется по 50px так, что от размера содержимого не должно зависеть, ну а ползунок само собой будет скорость меняться.

DibrovLALALA 14 ноя 2008 в 16:53

ещё недостаток.
я люблю выделить абзац мышкой, и если второй не влезает, а мне его тоже нужно скопировать, то неотпуская мыши уводим курсор вниз и текст скроллится. Иногда я вообще только так и скроллю, а здесь так нельзя

pxx 14 ноя 2008 в 17:45

Контрол шикарный. Но в опере нашел 2 ошибки:
— кнопка PgDown работает очень криво
— не поддерживается «зажал вниз/вверх и скроллится», нужно кликать

gdX 14 ноя 2008 в 17:52

А если ещё снабдить и таким дополнением:
Если навести мышкой на прямоугольник [P ], то мелким текстом покажется первое предложение этого параграфа во всплывающей подсказке. Что-то на вроде ToolTip.
Будет удобно быстро просматривать большой текст вырезками первых предложений.

no_smoking 14 ноя 2008 в 18:19

Если сильно попросить… Вот и появилось :)

Fire_Vasiliy 14 ноя 2008 в 18:33

Раз уж появились желающие такое реализовывать, можете попробовать реализовать это: www.free-lance.ru/blogs/view.php?tr=289345&ord=my
Я все равно не программер, а идеи приходят не смотря ни на что, связанные с кодом… так что если напишите я буду очень рад.

gdX 14 ноя 2008 в 18:54

Чёрные полоски, как я понял — это заголовки.
А что же они так от своих параграфов на этой ленте отступают?
Как не родные :)
Ещё можно, также, в этих прямоугольниках сделать синюю чёрточку, если в параграфе есть ссылка.
Что-то меня понесло на предложения...)))

no_smoking 14 ноя 2008 в 19:59

Вы посмотрите то начало параграфа и начало заголовка совпадают с реальными.

xmagnusx 14 ноя 2008 в 20:23

занятно

metamorph 14 ноя 2008 в 20:40

У меня глючит при скролле колесом. Видимо, как-то связано с настройками моего хитрожопого драйвера мыши (microsoft mobile memory mouse). В частности, сильно отличается скорость скролла на обычной странице и у Вас в демо. При скролле вверх, если медленно крутить колесо, страница дергается и остается на одном и том же месте.