05/09/2018

Hide the Search in Member Directory Gadget

The search function on a Wild Apricot member directory gadget is really handy. It allows you to search the member directory by keyword. Unfortunately when a page loads, the search box receives the browser focus and the page scrolls automatically to wherever the search box is on the page. Sometimes that is near the bottom of a page, scrolling the page below important content. There is a simple fix: hide the search box or use JavaScript to disable the focus.

JavaScript to disable the focus. This keeps the search box on the screen and available without scrolling the window. You should insert this into the Global Javascript under Settings > Site > Global Javascript

<script type="text/javascript">
jq$(function()
{
function noFocus() {
console.log('nofocus here');
if (jq$('.WaGadgetMemberDirectory').length) {
var refreshId = setInterval(function() {
if (jq$('.WaGadgetMemberDirectory table#membersTable').length)
{ document.activeElement.blur(); window.scrollTo(0,0); clearInterval(refreshId); }
}, 50);
}
else if (document.activeElement && (document.activeElement.tagName=="INPUT")) {
document.activeElement.blur();
window.scrollTo(0,0);
}
}
BonaPage.addPageStateHandler(BonaPage.PAGE_PARSED, noFocus);
});
</script>

 

Or you can use the CSS below to just hide the search box. Place this code in the raw headers of each page where you want to hide the search box on. Note that the styles affect the IDs of the elements separately.

 

/* search box */

<style>
#FunctionalBlock1_ctl00_ctl00_search {
display:none;
}
</style>

/* search label */


<style>
#FunctionalBlock1_ctl00_ctl00_searchLabel {
display: none;
}
</style>

/* advanced search link */
<style>
#FunctionalBlock1_ctl00_ctl00_advancedSearchStatusPanel_advancedSearchLink {
display: none;
}
</style>

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment