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 позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Обновления ядра Drupal

Данная статья адресована для начинающих изучать Drupal. Для CMS — Drupal регулярно выходят новые версии (обновления) в которых вносится изменения по усовершенствованию CMS, исправление ошибок/уязвимостей

Оборудование
help2site
Хромбук Toshiba Chromebook оценили в 280 долларов

Компания Toshiba разработала и с сегодняшнего дня выпустила в продажу на международный рынок свою новую разработку хромбук Toshiba Chromebook, предназначенный для такого типа людей, которых

Ремонт
help2site
Компьютер сам перезагружается, перегревается

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

Linux
help2site
Перезапуск сервера Apache

Бывает что возникают ситуации при которых нужно перезагрузить Apache, при этом не обязательно перезагружать весь сервер целиком. Для того, чтобы перезагрузить сервера Apache нужно: Подключиться

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

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