Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим очередным небольшим jQuery-скриптом, который поможет украсить ваш веб-ресурс. Идею я подсмотрел на сайте электронного бухгалтера ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка «Google ...
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...
С целью дальнейшего развития моего сервиса-скрипта Share42.com я искал способ динамического подключения фреймворка jQuery непосредственно в коде JavaScript. Нашел красивое решение, которое выполняет одновременно 2 задачи: Проверяет, подключен ли уже на странице jQuery. Если не подключен, ...
Комментарии (144)
В CSS еще бы добавить строку для WebKit-браузеров:
Клево. Спасибо.)
Посетителям понравится такое!
Дмитрий, как всегда на высоте! Спасибо!
Не хватает очень важного Гугл плюс 1.
Дмитрий, добавите?
И, кстати, хотелось бы возможность включения/отключения переключателя как во втором примере в более ранней статье про этот же сервис.
Тема поста вообще-то не про Share42.com, а про всплывающие подсказки.
Прошу прощения за наглость, да, я увидел. Подсказки здоровские, красивые. Скачал, никаких затруднений, у меня теперь тоже эта красота. Большое спасибо за них.
Ого! Красота какая! ;) Спасибо, Дим!
Спасибо, Дмитрий! Давно хотелось поставить у себя что-то подобное. Теперь, благодаря тебе, уже работает. Очень нужная штука и красиво получилось :)
Спасибо. Няшная хреновина (:
Спасибо, как раз то, что искал. Поставлю себе на сайт, только уберу анимацию.
Дорогой Димокс, этапять! Заюзала у себя на новом шаблоне: _allpa.ru/kontakty/email-me/
Пришлось юзать mini-вариант, потому как иначе со ссылкой эти великолепные тултипы использовать нельзя, ибо они закрывают текст/ссылку полностью и на неё не нажмёшь :)
Спасибо!!!
Все можно. Никто не мешает подредактировать стили, чтобы подсказка была выше ссылки. Достаточно поменять параметр
bottom: -1px;.Действительно! Мерси :)
Но я, пожалуй, оставлю как есть. Во-первых, с вопросиком получается красиво, это раз. Во-вторых, сразу видно, что это не просто ссылка. В-третьих, тут ещё проблема с изображениями-ссылками: в зависимости от размера картинки нужно будет подгонять каждый раз положение тултипа, потому как он не понимает, что всплывать надо над изображением-ссылкой, он всплывает так, как указано в css.
А морочить Вам голову просьбами подпилить не хочу категорически. Да и сама уже измучилась с кодами/твиками/скриптами — сил моих больше нет :)
Так как есть — замечательно :)
Разрешите ещё раз поблагодарить Вас: Ваш блог это просто кладезь какой-то блого-полезняшек!
Пожалуйста. Рад, что мой блог полезен.
Ни в какую не могу получается поставить скрипты с jquery.
Может я не правильно подключаю jquery? или не правильно заливаю файл на фтп wordpress. Делаю я это таким образом: в админ панели перехожу во вкладку медиафайлы, а далее просто загружаю файл и получаю на него ссылку. Далее просто вставляю ссыль на файл в ваш скрипт. jquery я подключал следуя этому мануалу n-wp.ru/4619.
Я не уверенный пользователь html. Делаю все исключительно по мануалам. Может просто в head не там скрипт вставляю.
Не подскажете, в чем может заключаться моя проблема?
Спасибо.
Судя по том, что вы написали, все правильно делаете. Причин-то может быть множество.
Вчера еще очень долго пытался поставить дома скрипт с плавающей панелькой соц сетей. Но ничего так и не вышло. В конце концов стал уже лазить по сети, нашел плагин для wordpress sozialize it. Вы должны быть знакомы с ним т. к разработчик указывал на сотрудничество с Вами.
Поставил его. Панелька вроде появилась, но на ней нет никаких закладок соц сетей. В горизонтальном положении она довольно большая, хорошо видное белое окно. Если же в плавающей вертикальном состоянии, то это окошко 1 на 1 см в котором так же ничего нет.
Почему могут не подгружаться закладки? или может для этого плагина еще отдельно нужно jquery подключать?
Извините за надоедливость, уж очень хочется разобраться с этой вещью. Использую стандартную тему twentyeleven. Никаких сайдбаров не использую.
Плагин подключает все необходимое автоматически, поэтому дополнительных действий не требуется. Попробуйте с другой темой, может в ней причина.
Да, действительно проблема была в теме. Сменил на другую и все получилось.
Спасибо Вам большое!
Хм, Дим, мне тут такая мысль пришла.
А реально ли как-то сделать, чтобы скрипт. м. сверял слова по некому конфигу или БД и, находя их на странице, подставлял подсказку.
Ну, тобишь, вместо того, чтобы пихать каждое слово в текст, как-то сделать так, чтобы все найденные (заранее заданные) слова на странице, например, слово BSOD, имели указанную в скрипте/настройках подсказку, так сказать, автоматически, а не путем ручного запихона оных в тег.
Не знаю насколько внятно объяснил, но попытался.
Не знаю, что-то сложное ты описываешь.
В атрибут title описание. И чутка подправить скрипт
А вот вместо
<abbr>чтобы такое выдавалось, что нужно?В скрипте замените
spanнаabbr.А, ну да.
А возможно ли как-то реализовать чтоб наводясь на картинку вылезала подсказка?)
и как можно уменьшить ширину всплывающей подсказки и увеличить высоту.
В скрипте замените
spanнаimg.Меняйте стили подсказки.
Стили меняются в файле скрипта? который вы произвольно обозначили script.js.
Нет. Стили — это CSS-код.
А какая строка определяет куда выводиться подсказке? верх низ направо налево.
или если не сложно можете подсказать как сделать чтоб налево подсказка выводилась?
Спасибо.
Почитайте какое-нибудь руководство по CSS, например, htmlbook.ru/css
Хорошо, Спасибо!
Я заменил left: -1px; на right: -1px;. Готово! =)
Здравствуй! Спасибо за полезные щедро дарованные знания. Такой вопрос возник. Можно ли во всплывающей подсказке вывести кликабельную ссылку?
Нет, только текст.
ссылка вставляется «на ура» обычным образом в title
Согласно веб-стандартам так делать нельзя.
по стандартам — нет, технически — возможно. Просто мне показалось, что вопрос был о принципиальной возможности.
Вечер Добрый!
Поделитесь пожалуйста, желательно конкретно примером. А то я весь вечер бьюсь и никак. Подсказка получилась и ссылка тоже, но ссылка не кликабельна. А хочется, чтоб и ссылка была действующая.
Очень надеюсь на ответ. Спасибо!
Обожаемый Димокс, я таки приступила к давно обещанному пиару Вашего прекрасного во всех отношениях блога (и буду вновь и вновь нести по Интернету благую весть о нём :)) — сослалась на этот Ваш пост у себя (список тви-фаворитсов): _allpa.ru/1-twitter-favorites/
Спасибо!!!
Благодарю ;)
Снова, привет! Не подскажешь. Я в веб программировании дерево, и толком не могу объяснить. В общем всплывающее окошко подсказки как будто находится в низу слоёв страницы, как сделать что бы она всплывала всегда поверх всех элементов страницы? что бы было понятней скрин imglink.ru/show-image.php?id=9f4157144cee2d6a94141ba50f26a8e3
В стилях попробуй увеличить индекс слоя:
z-index: 1000;. Вместо 1000, например, 10 000 или еще больше. Возможно, что у того текста справа стоит большой индекс, поэтому он перекрывает подсказку.Спасибо, но не помогло… Попытаюсь как-нибудь методом тыка выяснить.
Может у колонки position: relative; установлен?
Спасибо, но тоже не помогло. Да и я уж забил. Не хватает у меня тямы. Просто буду стараться не использовать всплывашки у бортов статьи.
Огромное спасибо! Но у меня такой вопрос как можно округлить края у подсказки и можно ли сделать фот градиентом? Заранее благодарен!
Закругленные углы — border-radius, градиенты — изображением.
Поисковые системы для чего существуют?
Очень классный скрипт. Благодарю ! И сразу вопрос: что надо изменить, чтобы в квадратике был не ! (восклицательный знак, а? (вопросительный). И как убрать анимацию?
Восклицательный знак находится в хтмл-коде.
Что убрать анимацию, нужно:
1) заменить:
на:
2) заменить:
на:
Спасибо за скрипт.
Возникла ситуация, когда на нескольких страницах присутствует несколько одинаковых подсказок с длинным текстом. Подскажите, можно-ли сделать так, чтобы текст подсказки не вписывался в атрибут title тега span, а подгружался из внешнего файла?
Сделать можно все, но это будет уже совсем другой скрипт.
да еще бы в админку кнопку span class="jQtooltip" а то каждый раз добавлять очень муторно
Для такого существует плагин AddQuicktag — можно добавить какие угодно коды и они будут в виде кнопок в текстовом редакторе.
Не представляю, как я раньше без него обходилась.