Вопрос

I have a piece of code I found for creating an expanding search bar. It relies on CSS and javascript to run. The demo found here, has the search bar opening to the right. I've floated mine right and want it to open on the left. I just need another set of eyes at this point because I can't find my issue. The issue is that it opens fine, but it doesn't transition. It will however, transition while it closes.

Here it is: http://jsfiddle.net/rEsQ2/1/

HTML

<div class="fix" id="search-bar">
    <div class="search_main fix">
        <form action="http://logans.linkhousedev.net/" method="get" class="searchform" role="search" id="search">
            <div id="label" class="">
                <label id="search-label" for="search-terms">search</label>
            </div>
            <div id="input" class="">
                <input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search-terms" />
            </div>
        </form>
    </div>
</div>

CSS

#search-bar {
    top: 0;
    height: 60px;
    position: absolute;
    right: 0;
}
#search {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
}
#label {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 20;
}
#label label {
    display: block;
    width: 60px;
    height: 60px;
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") 0 0;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    text-indent: -9999px;
    cursor: pointer;
}
#label label:hover {
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
}
#label.active label {
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
}
#input {
    height: 60px;
    overflow: hidden;
    position: absolute;
    right: 60px;
    top: 0;
    width: 450px;
    z-index: 5;
}
#input input {
    display: block;
    position: absolute;
    top: 0;
    right: -450px;
    width: 430px;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    background-color: #23688b;
    color: #fff;
    font-size: 18px;
    backface-visibility: none;
    border-radius: 0;
    transition: right 0.3s ease 0s;
}
#input input:focus {
    outline: none
}
#input.focus {
    z-index: 20
}
#input.focus input {
    right: 0;
    transition: right 0.3s ease 0.2s;
}

JS

// get vars
var searchEl = $("#input");
var labelEl = $("#label");
// register clicks and toggle classes
labelEl.on("click", function () {
    if (searchEl.hasClass("focus")) {
        searchEl.removeClass("focus");
        labelEl.removeClass("active");
    } else {
        searchEl.addClass("focus");
        labelEl.addClass("active");
    }
});
// register clicks outisde search box, and toggle correct classes
$(document).on("click", function (e) {
    var el = $(e.target);
    if (el.attr("id") != "search-terms" && el.attr("id") != "search-label") {
        if (searchEl.hasClass("focus")) {
            searchEl.removeClass("focus");
            labelEl.removeClass("active");
        }
    }
});

Any thoughts would be very much appreciated.

Cheers, Jay

Это было полезно?

Решение

You have the wrong ID for the larger search bar. This is what you had it look like:

<input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search-terms" />

Change the ID from "search-terms" to just "search":

<input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search" />

When I did that on jsfiddle it worked flawlessly.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top