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

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

Свежие записи
iOS
help2site
Запускаем Windows 8 на iPad

У этой программы имеется поддержка рабочего стола Win8 Metro Testbed, который предоставляет возможность разработчикам тестировать на управляющие жесты, а также функциональность приложений для Windows 8

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

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