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

Windows
help2site
Как удалить пункт из контекстного меню Windows 7

Со временем контекстное меню, которое появляется при нажатии на правую кнопку мыши засоряется различными ненужными пунктами. Из за наличия этих пунктов контекстное меню начинает появляться

Web-Дизайн
help2site
Вкладки (Табы/Tabs) на чистом CSS

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную. Идея построения закладок на одном CSS

Настройка
help2site
Разгон видеокарты с помощью программы MSI Afterburner

Оглавление Разгон видеокарты. Инструкция по MSI Afterburner Cегодня рассмотрим разгон видеокарты. Инструкцию к применению с помощью программы MSI Afterburner. Подробный обзор данной программы будет обязательно

Настройка
help2site
Нужно обновить биос без процессора? Решаем вопрос

Попробуем решить непростую задачу когда нужно обновить БИОС без процессора на материнской плате. Что такое BIOS и как им пользоваться, если коротко, самостоятельная микропрограмма, отвечающая за