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
Команда MD

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

Настройка
help2site
Как устанавливать драйвера на компьютер

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

Windows
help2site
Форматирование раздела компьютера, быстрое и обычное, чем различается

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

Ремонт
help2site
Как восстановить исцарапанный CD-DVD диск

Исцарапали диск, и компьютер перестал читать его? А на диске важная информация? Восстановите диск за 17 минут! Вы часто кидаете диски на не предназначенные места.