Всплывающая подсказка v.2

Вспоминаем мой давний пост про плавающую над объектами подсказку.

Феатурес:

  • Вторая версия написана с использованием библиотеки jQuery (кстати, очень рекомендую обратить внимание, не такая громоздкая как Prototype)
  • Запуск скрипта осуществялется средставми jQuery, в сам html-файл ничего не нужно вписывать
  • В настройках скрипта можно указать в каких тэгах будет работать подсказка
  • Подсказки прописываются в атрибут rel, хотя можно использовать любой другой атрибут, например title или alt, достаточно прописать его в настройках скрипта. Проблема только в валидации кода
  • Добавлена функция простого парсинга, заменяющего знаки “[" на "<" и "]” на “>”, чтобы можно было добавлять в подсказки простые псевдо-тэги
  • Проверено в браузерах: Mozilla Firefox 2.0.0.6, Opera 9.23, Internet Explorer 5.5+, Safari 3.0.3, Swift 0.2

Ну вот вроде и всё. Смотрим работающий пример.

Качаем исходник.

Дата: 17.09.2007
Категории: JavaScript
Google     

]]> Sam ]]>

Пример надо действующий. Без него как-то ненаглядно…

»

]]> Никита ]]>

Имеешь в виду в самом посте? Кроме исходника?

»

]]> Sam ]]>

Да.

»

]]> Никита ]]>

Вуаля ))

»

]]> mikolka ]]>

Nikita – красивая штучка, придумаю куда б ее к себе прикрутить – прикручу. Спасибо.

»

]]> Евгений ]]>

По вашей идее сделал, всплывающие подсказки в карте сайта, причем текст подсказки не в самой странице, а грузиться с сервера, пока не знаю насколько это перспективно или удобно, посмотреть можно здесь http://designformasters.info/site-map/

Пока не отлажено и зализано, набросок можно сказать.

»

]]> Никита ]]>

Евгений, симпатично. Только проверьте присваивание координат, в некоторых случаях мышка налезает на подсказку, заставляя её мерцать

»

]]> Евгений ]]>

Я немного, поправил, но поскольку у меня и не мерцала, то не знаю, помогло ли.

Нашел баг общий для наших реализаций, document.body.scrollLeft работает только в qurks mode, чтобы работало в стандартном режиме нужно использовать document.documentElement.scrollLeft, то же самое с document.body.scrollTop.

»

]]> Никита ]]>

Да, теперь подсказка работает идеально.

Да, есть такое дело. Но все самые популярные браузеры поддерживают Quirks Mode. Кстати по этому поводу нашёл интересную статью http://www.quirksmode.org/view.....ility.html
Может переведёшь и отпостишь на своём блоге? :)

»

]]> Евгений ]]>

Браузеры то поддерживают, но страница может отображаться либо в quirks mode (если не задан doctype), либо в стандартном режиме (если с doctype все в порядке), какой режим предпочтительней думаю объяснять не нужно.

Никита, чтобы убедиться что проблема есть, предлагаю тебе открыть пример в IE сжать окно так, чтобы появился вертикальный скрол, промотать чуть вниз и посмотреть где появляется подсказка.

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

»

]]> dmitry ]]>

при скроллинге в ie6, подсказка всплывает с неправильными координатами по оси Y…
попробуйте рабочий пример ресайзить в маленькое окно и покрутите колесиком мышки.

»

]]> Никита ]]>

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

»

]]> dmitry ]]>

а когда отпостите?
больно хочу в свой проект вставить. ))

»

]]> Никита ]]>

Меня этот вопрос тоже беспокоит. Времени пока нет. Сами видите, пишу редко в свой блог.

»

]]> Евгений ]]>

dmitry, чуть выше в комментах написано в чем проблема и как править.

document.body.scrollLeft работает только в qurks mode, чтобы работало в стандартном режиме нужно использовать document.documentElement.scrollLeft, то же самое с document.body.scrollTop.

»

]]> Crush ]]>

Спасибо, замечательная работа! :) Возникла одна только некрасивость, у меня при отсутствии значимой подсказки (напр. alt=”") под курсором всплывало пустое окошко. С Вашего позволения поправил так:

if (rel != “”) {
$(“#ns_tt”).empty()
$(“#ns_tt”).append(“” + rel + “”)
$(“#ns_tt”).show()
}

Удачи Вам!

»

]]> Никита ]]>

Crush, да, это резонно.

»

]]> KOS_MOS ]]>

Спасибо за исходник – классная вещь!
Правда что то в IE не работает =(
Можешь посмотреть в чем дело?

»

]]> Никита ]]>

KOS_MOS, у меня всё работает и в IE6 и в IE7.

»

]]> SergiusD ]]>

Давно хотел сделать себе подобное. Вот увидел – начал переделывать под Prototype.js, так как его пользую постоянно.
А потом посмотрел и решил избавиться от фрейворка вообще, тут его фкнуционал особо не используется, а малоли куда вставлять придется. Поэтому фреймворк убрался.
Результат прошу смотреть в моем блоге кому нужно.

»

]]> miXOnIN ]]>

Вот от моей тест странички,как на меня неплохо сделал:))
http://sbm.freehostia.com/
Зацените,по полям поводите,есле хотите,то выдрать его и розобраться что к чему легко))

»

Напишите комментарий