IESR Search HTML Plug-in

What Is It?

The IESR Search HTML Plug-in allows you to add an IESR search to your website in order to discover new electronic resources. The plug-in is a simple HTML search box that shows results on the IESR website.

How Do I Add It?

You need a basic knowledge of HTML and CSS plus the ability to edit webpages. Simply add the following HTML, CSS and Javascript to your webpage to create the search box.

(Line wraps marked » )

HTML

The HTML creates the form for the search box. You should copy the IESR logo image and load it on your server

<form id="iesrsearch" action="http://iesr.ac.uk/service/iesrsrch" method="get">
  <p>
    <span id="iesrlogo"><span>
        <a href="http://iesr.ac.uk/" title="IESR home">
          <img src="../../images/logos/iesr/iesr-logo-100.png" alt="IESR" width="100" height="27" />
        </a>
    </span></span>
    <span id="iesrsearchinput">
      <label for="iesrsearchterm" class="overlabel">Search the »
        IESR</label>
      <input type="hidden" name="start" value="1"/>
      <input type="hidden" name="pg" value="1"/>
      <input type="text" id="iesrsearchterm" name="text" size="20" title="Enter search term" »
        value="" />
    </span>
    <input type="submit" id="iesrsearchsubmit" title="Submit search term" value="Search" />
  </p>

CSS

The CSS styles the search box. Either add it to the webpage header or to your site CSS. You may need to adjust some values to suit the style of your webpage. You should copy the two IESR logo images, load them on your server and edit the image paths to suit.

form#searchiesr	{
	position:relative;
	}
form#searchiesr span#iesrlogo a img	{
	height:0;
	border:0;
	}
form#searchiesr span#iesrlogo a, 
form#searchiesr span#iesrlogo span	{
	float:left;
	display:block;
	width:100px;
	height:27px;
	background:#fff url(http://iesr.ac.uk/images/logos/iesr/iesr-logo-100.png) »
		repeat-x bottom left;
	margin-right:10px;
	}
form#searchiesr span#iesrlogo a:hover	{
	background-image:url(images/logos/iesr/iesr-logo-100.png);
	}
form#searchiesr span#search	{
	position:relative;
	float:left;
	margin-top:6px;
	}
form#searchiesr input#searchterm {
	width:13em;
	}
form#searchiesr input#submit {
	margin-top:7px;
	margin-left:5px;
	}
form#searchiesr label.overlabel-apply {
	position:absolute;
	top:3px;
	left:5px;
	z-index:1;
	}

Javascript

The Javascript is simply used to position the "Search the IESR" text over the search box: it is not used to process the form. All form processing is handled server-side on the IESR website. Simply add it to the webpage header or organize it with your existing scripts.

function initOverLabels () {
  if (!document.getElementById) return;      

  var labels, id, field;

  // Set focus and blur handlers to hide and show 
  // labels with 'overlabel' class names.
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {

    if (labels[i].className == 'overlabel') {

      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute »
('for');
      if (!id || !(field = document.getElementById(id))) {
        continue;
      } 

      // Change the applied class to hover the label 
      // over the form field.
      labels[i].className = 'overlabel-apply';

      // Hide any fields having an initial value.
      if (field.value !== '') {
        hideLabel(field.getAttribute('id'), true);
      }

      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute('id'), true);
      };
      field.onblur = function () {
        if (this.value === '') {
          hideLabel(this.getAttribute('id'), false);
        }
      };

      // Handle clicks to label elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };

    }
  }
};

function hideLabel (field_id, hide) {
  var field_for;
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    field_for = labels[i].htmlFor || labels[i]. »
getAttribute('for');
    if (field_for == field_id) {
      labels[i].style.textIndent = (hide) ? '-1000px' : »
'0px';
      return true;
    }
  }
}

window.onload = function () {
  setTimeout(initOverLabels, 50);
};

Version

Version 2. Updated 30 November 2009.

Accessibility

The form is accessible and degrades gracefully in the absence of CSS and/or Javascript.

Feedback

We would like your opinion of this plug-in and feedback on use. Please contact us.