<header>
<div class="container">
<div id="search-field-wrapper">
<form action="" method="get" id="globalSearch" role="search" class="hidden-xs">
<span id="scope-selector"> </span>
<input type="text" class="search-field" placeholder="Search our website..." id="tnaSearch" name="search_text" required aria-required="true">
<input type="submit" class="search-button" id="search-button" value="">
</form>
<ul>
<li><a title="Search our website" href="#" class="formDestinationChanger" data-target="" data-placeholder="Search our website..." data-fieldName="search_text" role="button" aria-label="Change form destination to search the website">Search our website</a></li>
<li><a title="Search our catalogue for records" href="#" class="formDestinationChanger" data-target="
" data-placeholder="Search our records..." data-fieldName="_q" role="button" aria-label="Change form destination to search the catalogue">Search our records</a></li>
</ul>
</div>
</div>
</header>
body {
background:#222
}
header {
position:relative;
max-width:300px;
margin:0 auto;
}
.container {
margin-top:40%;
}
#search-field-wrapper input[type=text] {
position: absolute;
top: 0;
right: 55px;
width: 226px;
height: 40px;
color: #222
}
#search-field-wrapper input[type=submit] {
position: absolute;
right: 15px;
width: 40px;
height: 40px;
background-image: url(https://nationalarchives.gov.uk/wp-content/themes/tna-base/img/search-white.png);
background-repeat: no-repeat;
background-position: center
}
#search-field-wrapper ul {
background-color: #333;
position: absolute;
top: 41px;
right: 118px;
padding: 5px;
width: 202px;
z-index: 4000
}
#search-field-wrapper ul li {
list-style-type: none;
list-style-image: none
}
#search-field-wrapper ul li a {
color: #fff;
font-size: .9em;
padding: .5em;
display: block
}
#search-field-wrapper ul li a:hover {
background-color: #FCE45C;
color: #222
}
header #scope-selector {
display: inline-block;
position: absolute;
top: 0;
right: 281px;
width: 40px;
height: 40px;
line-height: 40px;
background-image: url("https://nationalarchives.gov.uk/wp-content/themes/tna-base/img/scope-selector.png");
background-color: #555;
background-size: cover;
cursor: pointer;
}
#globalSearch .expanded {
background-image: url("https://nationalarchives.gov.uk/wp-content/themes/tna-base/img/scope-selector-expanded.png");
}
.search-field-wrapper-medium {
float: right;
max-width: 331px;
margin-right: 1em;
}
.search-field-wrapper-medium input[type="text"] {
min-width: 70%;
}
#changeDestination {
color: #fff;
padding-top: 0.5em;
}
#changeDestination label {
margin: 0 0.5em;
}
#search-field-wrapper input[type=submit] {
position: absolute;
right: 15px;
width: 40px;
height: 40px;
background-image: url("https://nationalarchives.gov.uk/wp-content/themes/tna-base/img/search-white.png");
background-repeat: no-repeat;
background-position: center;
}
input[type=submit] {
background-color: #008484;
color: #fff;
padding: .3em .5em;
border: 0;
height: 40px;
margin: 0;
}
input.width-half,
input[type=text] {
border: 1px solid #ccc;
padding: 2px;
height: 34px;
text-indent: 5px;
min-width: 220px;
width: auto;
}
#mega-menu-mobile {
height: 40px;
width: 40px;
background: url(../img/menu-trigram-lrg.png) center no-repeat #cb0d07;
border: 0;
z-index: 2;
border-radius: 100%;
float: left;
display: block;
cursor: pointer;
overflow: hidden;
position: relative;
}
// ----------------------------------------
// Search our website -------------------
// Hide search option
$('#search-field-wrapper ul').hide();
// $.showExpander()
$.showExpander = function() {
if ($('.expander').length) {
$('.expander').delay(200).slideDown(400);
}
};
// $.customEventer()
$.customEventer = function(passedObject) {
var elementIdOrClass = passedObject.elementIdOrClass,
eventToWatch = passedObject.eventToWatch,
customEventToTrigger = passedObject.customEventToTrigger;
$(document).on(eventToWatch, elementIdOrClass, function() {
$(document).trigger(customEventToTrigger);
});
};
// Generic toggle method. Does not include any bindings since it is designed to be used with
$.toggleDisplayOfElement = function(toggler, togglee) {
$(togglee).toggle();
$(toggler).toggleClass('expanded');
};
$('.formDestinationChanger').on('click', function() {
var placeholder = $(this).attr('data-placeholder'),
target = $(this).attr('data-target'),
fieldName = $(this).attr('data-fieldName');
$.toggleDisplayOfElement('#scope-selector', '#search-field-wrapper ul');
$('#tnaSearch').attr({
'placeholder': placeholder,
'name': fieldName
});
$('#globalSearch').attr('action', target);
});
// When click change the arrow position
$('#scope-selector').click(function() {
$('#search-field-wrapper ul').toggle();
if ($('#search-field-wrapper ul:visible').size() != 0) {
$(this).addClass('expanded');
} else {
$(this).removeClass('expanded');
}
});
$(document).on('click', '#search-controls li', function(e) {
$('#search-controls li').removeClass('selected');
$(e.target).addClass('selected');
});
// Global search - larger screens
$(document).one('toggleSearchOptionsOnce', function() {
$.toggleDisplayOfElement('#scope-selector', '#search-field-wrapper ul');
});
$(document).on('toggleSearchOptions', function() {
$.toggleDisplayOfElement('#scope-selector', '#search-field-wrapper ul');
$(document).off('toggleSearchOptionsOnce');
});
// Global search - smaller screens
$(document).on('change', '.mobileSearchDestinationOption', function() {
var target = $(this).attr('data-target'),
placeholder = $(this).attr('data-placeholder'),
fieldName = $(this).attr('data-fieldName');
$('#mobile-search-field').attr({
'placeholder': placeholder,
'name': fieldName
}).focus();
$('#mobileGlobalSearch').attr('action', target);
});
// ----------------------------------------
// ----------------------------------------
