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
Как увеличить скорость работы компьютера?

Оглавление Ускоряем ноутбук или компьютер в 12 этапов Рано или поздно любая техника начинает барахлить, а самое главное падает скорость работы компьютера. Это касается как

Web-Дизайн
help2site
ШОРТКОДЫ [SHORTCODES]

Доброго времени суток, дорогой читатель! В этой статье речь пойдет о шорткодах для WordPress, что это такое, где они используются, ну и конечно же примеры

Настройка
help2site
Сигналы биос при включении пк

Сборник сигналов БИОС Оглавление Как определить какие сигналы БИОС передает нам? При каждом запуске компьютера мы слышим одинарный писк, он пищит не просто так, прежде

Оборудование
help2site
Разгон встроенных видеокарт от Intel

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

Web-Дизайн
help2site
Изменение размера шапки при прокрутке

В сегодняшней статье хотелось бы поговорить о анимации при прокрутке (скролле) окна браузера. Вы наверняка посещали сайты в которых при прокрутке окна элементы сайта меняют