ultra

Мой дом здесь!
Регистрация
15 Ноя 2011
Сообщения
237
Реакции
371
всем привет
поскольку в js не шарю, прошу помочь - сделать выезжающий поиск
заготовочка Для просмотра ссылки Войди или Зарегистрируйся
необходимо, чтобы при нажатии на иконочку search выезжала форма поиска ровно до блока№1 накрывая собой все по дороге
после выезжания формы, иконка должна принимать submit, клик в любом месте отличном от формы и иконки - сворачивает форму в первоначальное состояние
было бы замечательно, если в левой части формы (перед формой) образовывался крестик закрытия формы
хедер фиксированный, макет резиновый, jquery 1.11 не брезгую
если информации не хватает, отвечу на возникающие вопросы

примеры с недостающим функционалом
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

буду не против отблагодарить услугами моей темы - Для просмотра ссылки Войди или Зарегистрируйся
и/или одарить кланяющимися смайликами
 

mdss

♖♘♗♕♔♗♘♖
Регистрация
20 Фев 2007
Сообщения
1.150
Реакции
674
Для просмотра ссылки Войди или Зарегистрируйся

Если в текстовое поле ничего не введено, то клик по кнопке поиска (как и по другому месту) просто свернет обратно все это дело. Если же что-то введено, то соответственно отправится форма
 

horuz

Создатель
Регистрация
17 Окт 2012
Сообщения
19
Реакции
3
в мозилле, есть написать в вашем примере текст и кликнуть потом на пустое место, то форма просто скрывается. если ее снова открыть и кликнуть по кнопке. то форма не уходит.
работает только если ввести и потом сразу на кнопку GO нажать.
 
  • Нравится
Реакции: mdss

mdss

♖♘♗♕♔♗♘♖
Регистрация
20 Фев 2007
Сообщения
1.150
Реакции
674
в мозилле, есть написать в вашем примере текст и кликнуть потом на пустое место, то форма просто скрывается. если ее снова открыть и кликнуть по кнопке. то форма не уходит.
работает только если ввести и потом сразу на кнопку GO нажать.
изменяем следующие строки
Код:
searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
на такое
Код:
searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                  inputBox.val('');
                    isOpen = false;
                }
Теперь если ввел в текстовое поле и свернул его, то оно очистится от введенных данных.
 

ultra

Мой дом здесь!
Регистрация
15 Ноя 2011
Сообщения
237
Реакции
371
меня больше интересует, как развернуть эту форму, до определенного элемента на странице :conf:
 

mdss

♖♘♗♕♔♗♘♖
Регистрация
20 Фев 2007
Сообщения
1.150
Реакции
674
меня больше интересует, как развернуть эту форму, до определенного элемента на странице :conf:
просто верстка пошла ужо.
Вот тебе рабочий пример
Для просмотра ссылки Войди или Зарегистрируйся

1) Классу .navigation добавлено позиционирование и z-index
2) Поиск обернут в слой, которому задано абсолютное позиционирование на всю ширину блока header, но со сдвигом слева на ширину логотипа, т.е. на 100 пикселей (left:100px;)
3) Классу searchbox-open добавлен z-index, чтобы при открытии поиска он перекрывал блок навигации
Enjoy
 
Сверху