1

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

1 Answer 1

3

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.

2
  • 2
    That works but you shouldn't have two elements on the page with the same id so I would suggest changing the id on the form from 'search' to 'search-form'. Then everything works and you have valid markup. May 2, 2014 at 18:03
  • Right you are, @ReLeaf. Thanks to both of you for your input. I'm all set!
    – jay
    May 2, 2014 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.