Skip to content

Instantly share code, notes, and snippets.

@stalinsky

stalinsky/Self-Adjusting-Search-Bar.markdown

Created October 9, 2014 11:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stalinsky/1adb7a395fec5124e12f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stalinsky/1adb7a395fec5124e12f to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Grant Zabriskie.
Raw
index.html
<form class="search_bar small">
<div class="search_dropdown" style="width: 16px;">
<span>All</span>
<ul>
<li class="selected">All</li>
<li>Books</li>
<li>Articles</li>
</ul>
</div>
<input type="text" placeholder="Search for anything" />
<button type="submit" value="Search">Search</button>
</form>
<form class="search_bar">
<div class="search_dropdown" style="width: 16px;">
<span>All</span>
<ul>
<li class="selected">All</li>
<li>Books</li>
<li>Articles</li>
</ul>
</div>
<input type="text" placeholder="Search for anything" />
<button type="submit" value="Search">Search</button>
</form>
<form class="search_bar large">
<div class="search_dropdown" style="width: 16px;">
<span>All</span>
<ul>
<li class="selected">All</li>
<li>Books</li>
<li>Articles</li>
</ul>
</div>
<input type="text" placeholder="Search for anything" />
<button type="submit" value="Search">Search</button>
</form>
<form class="search_bar larger">
<div class="search_dropdown" style="width: 16px;">
<span>All</span>
<ul>
<li class="selected">All</li>
<li>Books</li>
<li>Articles</li>
</ul>
</div>
<input type="text" placeholder="Search for anything" />
<button type="submit" value="Search">Search</button>
</form>
<form class="search_bar huge">
<div class="search_dropdown" style="width: 16px;">
<span>All</span>
<ul>
<li class="selected">All</li>
<li>Books</li>
<li>Articles</li>
</ul>
</div>
<input type="text" placeholder="Search for anything" />
<button type="submit" value="Search">Search</button>
</form>
Raw
script.js
/* Search bar */
var resizeElements;
$(document).ready(function() {
// Set up common variables
// --------------------------------------------------
var bar = ".search_bar";
var input = bar + " input[type='text']";
var button = bar + " button[type='submit']";
var dropdown = bar + " .search_dropdown";
var dropdownLabel = dropdown + " > span";
var dropdownList = dropdown + " ul";
var dropdownListItems = dropdownList + " li";
// Set up common functions
// --------------------------------------------------
resizeElements = function() {
var barWidth = $(bar).outerWidth();
var labelWidth = $(dropdownLabel).outerWidth();
$(dropdown).width(labelWidth);
var dropdownWidth = $(dropdown).outerWidth();
var buttonWidth = $(button).outerWidth();
var inputWidth = barWidth - dropdownWidth - buttonWidth;
var inputWidthPercent = inputWidth / barWidth * 100 + "%";
$(input).css({ 'margin-left': dropdownWidth, 'width': inputWidthPercent });
}
function dropdownOn() {
$(dropdownList).fadeIn(25);
$(dropdown).addClass("active");
}
function dropdownOff() {
$(dropdownList).fadeOut(25);
$(dropdown).removeClass("active");
}
// Initialize initial resize of initial elements
// --------------------------------------------------
resizeElements();
// Toggle new dropdown menu on click
// --------------------------------------------------
$(dropdown).click(function(event) {
if ($(dropdown).hasClass("active")) {
dropdownOff();
} else {
dropdownOn();
}
event.stopPropagation();
return false;
});
$("html").click(dropdownOff);
// Activate new dropdown option and show tray if applicable
// --------------------------------------------------
$(dropdownListItems).click(function() {
$(this).siblings("li.selected").removeClass("selected");
$(this).addClass("selected");
// Focus the input
$(this).parents("form.search_bar:first").find("input[type=text]").focus();
var labelText = $(this).text();
$(dropdownLabel).text(labelText);
resizeElements();
});
// Resize all elements when the window resizes
// --------------------------------------------------
$(window).resize(function() {
resizeElements();
});
});
Raw
Self-Adjusting-Search-Bar.markdown

Self-Adjusting Search Bar

Search bar + dropdown. The goal was to create a search bar that could adjust in size by changing as little CSS as possible for each size. In this case, changing the font-size on the text input will cause the rest of the search box (button, dropdown, etc... to resize with it). It also helps to adjust the width of search bar itself as you increase the font-size of the input to get a balanced look.

I designed this for the old Harold B. Lee Library website (see http://old.lib.byu.edu/). We had a lot of search bars across the site and we wanted a way to add them and change their size without having to much extra CSS to any given instance.

Please note: This affect could be accomplished with much less Javascript if I were to use flex-box (which is what we do on the new Harold B. Lee Library website, http://lib.byu.edu/). However, flex-box was not supported at the time I created this. It also represents a great alternative if your site cannot use flex-box yet for compatability or other reasons.

Also note: The dropdowns all respond together because the Javascript is written to accommodate just one search box per page. This may not be optimal, but it worked for us at the time.

A Pen by Grant Zabriskie on CodePen.

License.

Raw
style.scss
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
$shade_color: #e7e7e7;
$highlight_color: #1C62A8;
* {
box-sizing: border-box;
}
form {
margin: 30px auto 110px;
}
.search_bar {
background: #fff;
border: #b7b7b7 solid 1px;
border-radius: 3px;
box-shadow: 0 0 3px #ccc;
position: relative;
font-family: 'Source Sans Pro', sans-serif;
max-width: 420px;
input[type=text] {
border: none;
box-shadow: none;
font-weight: 600;
font-size: 14px;
width: 80%;
padding: .5em;
margin: 0;
overflow: hidden;
&:focus {
outline: none;
}
}
button[type=submit] {
background: linear-gradient(lighten($highlight_color, 10%), lighten($highlight_color, 3%));
color: rgba(255, 255, 255, 0);
border: 1px solid $highlight-color;
width: 10%;
min-width: 56px;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: 0 3px 3px 0;
margin: 0;
user-select: none;
&:after {
content: '';
position: absolute;
top: 18%;
right: 0;
bottom: 22%;
left: 4%;
background: url("http://media.lib.byu.edu/assets/images/searchbar/1.0/search-icon.svg") no-repeat center center;
background-size: contain;
}
&:hover, &:focus {
background: linear-gradient(lighten($highlight_color, 15%), lighten($highlight_color, 7%));
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
}
.search_dropdown {
font-weight: 600;
min-width: 17px;
background: linear-gradient(lighten($shade_color, 5%), darken($shade_color, 2%));
border-right: 1px solid #ddd;
color: #555;
padding: 0 28px 0 13px;
border-radius: 2px 0 0 2px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 10000;
user-select: none;
box-sizing: content-box;
&:after {
content: "\2193";
color: rgba(85, 85, 85, 0);
background: url("http://media.lib.byu.edu/assets/images/searchbar/1.0/down-arrow.svg") no-repeat top left;
height: 8px;
width: 10px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -6px;
}
&:hover,
&.active {
background: linear-gradient($shade_color, darken($shade_color, 7%));
cursor: pointer;
border-right-color: #ccc;
}
> span {
position: absolute;
top: 50%;
margin-top: -8px;
white-space: nowrap;
font-size: 15px;
}
ul {
display: none;
position: absolute;
top: 105%;
left: -1px;
font-size: 14px;
width: 225px;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
border-radius: 3px;
padding: 7px 0;
}
li {
list-style-type: none;
margin: 0;
padding: 5px 18px;
color: $highlight_color;
line-height: 1.2em;
position: relative;
&:hover {
background: $shade_color;
}
&.selected {
background: $highlight_color;;
color: #fff;
}
}
}
&.small {
max-width: 300px;
input[type=text] {
font-size: 13px;
}
}
&.large {
max-width: 560px;
input[type=text] {
font-size: 16px;
}
}
&.larger {
max-width: 700px;
input[type=text] {
font-size: 18px;
}
}
&.huge {
max-width: 860px;
input[type=text] {
font-size: 21px;
}
}
::placeholder {
font-weight: 400;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment