Websovet | Полезные советы по созданию веб сайтов

jQuery для чайников | Всплывающая подсказка | Плагин Tooltip

Дата: 03.03.2010 | Рубрики: jQuery | Комментарии (2)

Тэги: jQuery, jQuery Tooltip, всплывающая подсказка

Вам наверняка уже попадались такие стильные всплывающие подсказки на страницах сайтов при наведении указателя мыши на какой-либо элемент. На самом деле это ни что иное как содержимое свойства title, которое обычно прописывается к ссылкам или картинкам. По-умолчанию браузеры сами показывают такие всплывающие подсказки, но делают это довольно просто и обыденно. Плагин jQuery Tooltip позволяет сделать это более динамично и красиво, а именно: он показывает плавно появляющуюся и затухающую подсказку, словно бы привязанную к указателю мыши и двигающуюся вслед за ним.

Для того, чтобы реализовать данный эффект, нужно скачать свежую версию библиотеки jQuery и до кучи сам плагин Tooltip. Подробнее с плагином Tooltip можно ознакомиться на сайте его автора Jörn Zaefferer-а bassistance.de

Читать полностью →

jQuery для чайников | Эффект линзы | плагин JQzoom

Дата: 24.02.2010 | Рубрики: jQuery | Комментарии (2)

Тэги: jQuery, jQzoom, z-index, Эффект линзы

Вот такую любопытную штуковину я нашел у веб разработчика из солнечной Италии Марко Рензи (Marco Renzi). Плагин называется jQzoom (версия 1.0.1 Evolution). С его помощью можно реализовать несколько вариаций весьма красивого и впечатляющего эффекта увеличительного стекла при наведении указателя мыши на картинку-превьюшку.

Для реализации эффекта понадобится сам плагин jQzoom, который можно бесплатно скачать на сайте автора, и плюс до кучи библиотека jQuery в min варианте. Кроме того, понадобятся две картинки одного и того же изображения: большая и маленькая. Маленькая будет работать превьюхой, а большая, соответственно, показывать ~~голую задницу~~ увеличенные фрагменты ее же и рядом с ней.

Про подключение сторонних скриптов я уже рассказывал. На этот раз нам необходимо подключить сразу два файла:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.jqzoom1.0.1.js" type="text/javascript"></script>

Как вы уже знаете, jQuery привязывается к классам или селекторам деталей веб-страницы. В нашем случае для работы понадобится всего лишь один класс, привязанный к ссылке, которая, в свою очередь, является чем-то вроде якоря. Рассмотрим фрагмент кода страницы:

<a href="bigpicture.jpg" class="jqzoom"> <img src="smallpicture.jpg" alt="" /> </a>

Обратите внимание на адрес ссылки. Здесь используется просто имя большой картинки. Это говорит о том, что ссылка на самом деле не является таковой, а тэг <a href> используется лишь как удобная оболочка. “Текстом” же этой псевдо-ссылки является картинка превьюшки. Вот так вот ненавязчиво и оригинально.

Теперь о том, как работает эффект. Для начала приведем код скрипта, который необходимо добавить на страницу в пределах тэгов <head></head>:

Читать полностью →

Проблема с подпиской на email рассылку от Feedburner

Дата: 16.02.2010 | Рубрики: Полезняшки | Оставить комментарий

Тэги: Dr.Web, feedburner, pop-up, антивирус, проблема с подпиской

Сегодня я столкнулся с такой проблемой, попытавшись подписаться на свою же собственную email рассылку от Feedburner через стандартную форму, установленную на моем новом блоге Dizweb.Ru:

Стандартный код формы выглядит следующим образом:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=имя_фида', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address: </p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="имя_фида" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Как видите, здесь задействован попап (target=”popupwindow”). Сдается мне, что моему Dr.Web-у это сильно не понравилось, и он решил подгадить таким вот подлым образом. То есть, код формы правильный, но антивирус, установленный на моем компе, не дает ей верно отрабатывать свой хлебушек.

Я уверен, что у многих пользователей также установлены антивирусные проги (если нет — вы камикадзе) с настройками на блокировку всплывающих окон. И если вы хотите, чтобы ваша рассылка на email от Feedburner у всех пользователей работала без проблем, то замените стандартный код на следующий:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="_blank"><p>Enter your email address: </p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="имя_фида" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Теперь форма будет открываться просто в новом окне. Не забудьте только заменить слова “имя_фида” на свое. То есть, если адрес фида http://feeds.feedburner.com/dizweb, то имя, соответственно — dizweb.

UPD: Как оказалось, хулиганил не антивирь, а сама Опера, ибо в других браузерах изначальный код работал исправно. Но как бы там ни было, переделанный вариант выглядит кошернее, имхо.