Habrahabr Sausage Navigation

    Сегодня в рассылке DayliJS я открыл для себя одно прекрасное расширение — jQuery Sausage, которое позволяет добавлять на страницу очень удобную схему навигации — блоки, разделенные заголовками, масштабируются относительно высоты контента и отображаются как diff-аннотации в WebStorm или NetBeans (нечто подобное можно видеть слева поста).

    image
    Картинка кликабильна ведет на пример jQuery Sausage

    Это очень удобный способ навигации по большим спискам статей и по параграфам статей. Эксперимента ради я решил воссоздать этот плагин отдельно от jQuery и jQuery UI и заточить его под хабр (оригинальный плагин тянет за собой несколько Кб лишних скриптов). Моё расширение сканирует блоки статей или блоки заголовков и отображает их в виде цепочки блоков. При наведении на блок отображается заголовок, по клику на блок страница скроллится на соответствующий заголовок страницы. К сожалению, не все посты хорошо отформатированы, поэтому такой способ навигации не всегда эффективен. Т.к. это эксперимент, то некоторые фичи jQuery Sausage пока урезаны.

    Блок в неактивном режиме полупрозрачный — не отвлекает от чтения.

    Цвета в режиме список статей


    Зеленый — топик-ссылка.
    Голубой — топик.
    Черный — перевод.
    Фиолетовый — топик в блоке компании.

    Цвета в режиме топик


    Красный — комментарии.
    Серый — в зависимости от насыщенности отражает уровень заголовка.
    Синяя рамка — видео, аудио или любая флэшка.
    Желтая рамка — картинка.
    Зеленая рамка — код (только хабратег <source>).

    Общий вид в режиме «список статей»




    Ссылки


    Страница скрипта на userscripts
    Исходник

    Предложения и пожелания по улучшению способа навигации и критика приветствуются!

    UPD
    Добавил скругление блоков
    При наведении на столбец он расширяется для удобства навигации
    При наведении на блок отображаются всплывающие подсказки с заголовком блока
    Исходный вид «сосиска из блоков» заменен на вид «список вертикальных закладок»
    Исправил баги с ссылками в заголовке и с заголовком топика-ссылки
    Исправил баг с z-index всплывающих заголовков в Опере
    Исправлен баг «Не показывается блок комментариев» в Опере

    UPD2
    По совету altspam добавлена подсветка специальных блоков внутри параграфов: код, медиа плееры, картинки.
    Поделиться публикацией

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

      +2
      Может прижать к краю впритык? чтобы не целиться.
        0
        Мне кажется разумным продолжением было бы сделать из этого скрипта расширения для основных браузеров. Я сам к сожалению не в теме, но поверхностное гугление в свое время подсказало мне, что это несложно)
          0
          Под firefox когда-то можно было воспользоваться greasemonkey компилятором, на сколько он актуален сейчас не знаю, пару лет назад был вполне юзабелен, разве что поддерживаемые версии нужно было подправить.
          +1
          Прикольная фигня сбоку. Лучше любой КПЗ для привлечения внимания.
            +2
            Странный баг выскочил на этой странице. Из тонких полосок получились полосы на пол страницы. ФФ4 и Хром 12
              0
              Спасибо, я тоже заметил, пофиксил. Прошу скачать новую версию. По совету vawerv полосу прицепил к краю.
              0
              Прикольно, но помойму:
              а) слишком узкая полоса
              в) не хватает названий топиков (как на странице-примере).

              Однако, спасибо.
                0
                Название при наведение появляется.

                Спасибо, за скрипт!
                Пользуюсь пару часов — очень удобно!!!
                0
                Этакий умный скролл!
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Opera 11.01 (build 1190) x86_64 под Linux — полет нормальный.
                    На всякий случай решил проверить, хоть скрипт и под FF. Буду пользоваться, спасибо автору)
                      0
                      Opera 11.01 (1190) Win7x64

                        +1
                        Исправил, спасибо.
                          +1
                          Еще в режиме топика блоки комментариев вообще не отображаются. Должны же быть красными?
                            0
                            Исправил. Правда теперь блок комментов занимает 10% от всего контента, раньше занимал 15px.
                          0
                          У меня Opera 11.01 (1190) на WinXPx64.

                          Сохранил скрипт в папу UserJS, прописанную в настройках. Перезапустил Оперу. Вздрыжни эффект не появляется. :(

                          Что я делаю не так? :)
                          +1
                          Реально офигенно! Обязательно нужно будет где-нибудь удобно применить
                            +2
                            Предлагаю схематично отметить на блоках код, картинки и таблицы, а также границы экрана в данный момент, см. www.artgorbunov.ru/bb/ui/infoscroller
                              0
                              Добавил подсветку специальных блоков внутри параграфов: код, медиа плееры, картинки. Отображаются только в режиме статьи, в списке им не место.
                                0
                                Так может вообще полный аналог Инфоскроллера на jQuery сделать?
                                  0
                                  Можно попытаться, не знаю только будут ли против владельцы инфоскроллера. Хотя там написано, что Инфоскроллер берет данные из XML, а потенциальный Скроллер на jQuery aka jQuery Informative Scrollbar будет брать данные с html страницы.
                                  Добавлю идею в список того, что надо сделать :)
                                    0
                                    Надо связаться с Горбуновым или с Лебедевым, но, думаю, т.к. дело благое, против не будут, а патент — фигня, на сколько я знаю, достаточно различия в том, откуда берутся данные.

                                    Рекомендую делать что-то на базе jquery.jScrollPane.

                                    Кстати, как можно узнать, когда будет готово что-то, если что? =)
                                      0
                                      Как будет готово я Вам напишу. Начну делать в ближайшие дни если ничего не свалится. За jquery.jScrollPane спасибо, думал о базе.
                                        0
                                        Спасибо Вам, буду ждать.
                                +1
                                А можно ли сделать, чтобы подсвечивался блок, который ты читаешь в данный момент?
                                  0
                                  Opera 11.01 @ WinXP, $entry стабильно имеет нулевую длину
                                    0
                                    В избранное ;)
                                      0
                                      автор, я люблю тебя за это!
                                        0
                                        Или я что-то сделал не так (установил Greasemonkey, добавил скрипт, перезагрузил страницу), или не работает.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое