Webform — плавное исчезновение текста при наведении курсора

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

Для чего это необходимо? А все просто, вы наверное часто замечали формы обратной связи, в которых необходимо удалять текст приведенный для примера в поле «Имя»  пишут надпись «ИВАН», как будто мы не понимаем, что необходимо написать. Ну и мало того, эту надпись ещё необходимо удалить, так вот, что бы не мучать наших клиентов мы сегодня научимся её удалять при наведении мышки.

Для этого нам понадобиться добавить в наш css следующий код:

				
					.webform-component label {
position:absolute;
color: grey;
margin-top: 4px;
margin-left: 4px;
}
				
			

Затем нам нужно будет в папке js темы создать новый фаил javascript в который вставим следущий кусочек кода:

				
					jQuery(document).ready(function($){
 $(document).ready(function(){
//alert(1);
$('.webform-client-form label').each(function(i){
var label=this;
var input=$("#"+($(this).attr('for')).toString());
$(input).blur(function(){
$(input).removeClass("focus");
if($(input).attr("value")==""){
$(label).stop();
$(label).animate({"opacity":1},500);
}
});
$(input).focus(function() {
$(input).addClass("focus")
});
if ($(input).attr("value")!=""){
$(label).css("opacity",0);

}
$(input).bind('mouseover', function (){
$(label).stop();
$(label).animate({"opacity":0},500);
$('.webform-client-form label').css("cursor","text");
});
$(input).bind("mouseout", function (){
if (!$(input).hasClass("focus")){
if($(input).attr("value")==""){
$(label).stop();
$(label).animate({"opacity":1},500);
}
}
});
$(input).bind('keyup', function (){

if($(input).attr("value")==""){
$(label).stop();
$(label).animate({"opacity":0},500);
}
else {
$(label).stop();
$(label).animate({"opacity":0},500);
}
});
});
});
});
				
			

Для использования не с webforms нужно только заменить в коде js следующие классы: webform-client-form, а в css webform-component на свои.

Как видите, сделать красивую и удобную форму обратной связи либо заказа, довольно просто. Если у кого-то остались ещё вопросы, пишите в комментариях и ставьте лайки.

Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Интернет
help2site
Хостинг картинок. Что такое хостинг картинок?

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

Linux
help2site
Релиз новой версии TrueConf для Linux

Крупнейший разработчик индивидуальных и корпоративных продуктов видеоконференцсвязи в СНГ — компания «TrueConf», недавно усовершенствовало свое приложение TrueConf для Linux 1.0.5, которое позволило поддерживать такие дистрибутивы

Оборудование
help2site
Ремонт компьютера с помощью безопасного режима

Оглавление Безопасный режим Windows — помощник при ремонте компьютера Рассмотрим ремонт компьютера в безопасный режиме и диагностика, если по каким-то причинам запуск операционной системы windows

Игры
help2site
Играть бесплатно в игры Gaminator

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

Web-Дизайн
help2site
Как сделать адаптивный (резиновый) слайдер изображений с помощью jQuery и CSS3

Прежде чем начать, скажу что нам потребуется подключить две внешних библиотеки: FlexSlider — плагин используемый разработчиками WooThemes, работает быстро без нареканий. Вы можете скачать плагин отдельно с официального сайта или

Windows
help2site
Что делать, если Svchost сильно грузит процессор?

Svchost.exe (сервис-хост) или хост-процесс для служб Windows — компонент операционных систем Microsoft, используемый для запуска и выполнения служб из dll-файлов (динамически подключаемых библиотек). Если по-простому,