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 на свои.

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

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

Команда md позволяет создавать каталог или промежуточные каталоги в указанном

Программы
help2site
Установка Интернет Контроль Сервис на VirtualBox

VirtualBox (Oracle VM VirtualBox) — программный продукт виртуализации для операционных систем Microsoft Windows, Linux, FreeBSD, Mac OS X, Solaris/OpenSolaris, ReactOS, DOS и других, разработанный компанией Innotek, в настоящее

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

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

Windows
help2site
Не запускается рабочий стол Windows 7

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

Оборудование
help2site
Если компьютер не видит внешний жесткий диск

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

iOS
help2site
Installous для айпад обзор

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

Windows
help2site
Установка Windows 8 с флешки

Операционная система Windows 8 вышла около месяца назад и за свое недолгое существование получила множество негативных отзывов. Многим пользователям довольно таки сильно не понравился новый