[ПОМОЩЬ] Выезжающий поиск Jquery 1.11

Тема в разделе "JavaScript", создана пользователем ultra, 29 сен 2015.

Модераторы: ZiX
  1. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    всем привет
    поскольку в js не шарю, прошу помочь - сделать выезжающий поиск
    заготовочка http://jsfiddle.net/ubpvp9fr/4/
    необходимо, чтобы при нажатии на иконочку search выезжала форма поиска ровно до блока№1 накрывая собой все по дороге
    после выезжания формы, иконка должна принимать submit, клик в любом месте отличном от формы и иконки - сворачивает форму в первоначальное состояние
    было бы замечательно, если в левой части формы (перед формой) образовывался крестик закрытия формы
    хедер фиксированный, макет резиновый, jquery 1.11 не брезгую
    если информации не хватает, отвечу на возникающие вопросы

    примеры с недостающим функционалом
    http://codepen.io/MarveyLabs/pen/raOmKJ
    http://codepen.io/arthurra/pen/KhCyk
    http://vremenno.net/

    буду не против отблагодарить услугами моей темы - https://www.nulled.cc/threads/252046/
    и/или одарить кланяющимися смайликами
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    http://codepen.io/nikhil/pen/qcyGF/

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

    horuz Создатель

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

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    изменяем следующие строки
    Код:
    searchBox.removeClass('searchbox-open');
                        inputBox.focusout();
                        isOpen = false;
                    }
    на такое
    Код:
    searchBox.removeClass('searchbox-open');
                        inputBox.focusout();
                      inputBox.val('');
                        isOpen = false;
                    }
    Теперь если ввел в текстовое поле и свернул его, то оно очистится от введенных данных.
     
    ultra нравится это.
  5. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    меня больше интересует, как развернуть эту форму, до определенного элемента на странице :conf:
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    просто верстка пошла ужо.
    Вот тебе рабочий пример
    http://jsfiddle.net/ubpvp9fr/6/

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