»
EnglishFrenchVietnamese

Print - Internal Search Box - JavaScriptBank.com

Full version: jsB@nk » Utility » Search-code » Internal Search Box
URL: https://www.javascriptbank.com/internal-search-box.html

Internal Search Box © JavaScriptBank.comThis JavaScript search tool can be used to create a dropdown search box for your Web site, just like forums. You can also create dropdown search forms, hint boxes, and menus.

Full version: jsB@nk » Utility » Search-code » Internal Search Box
URL: https://www.javascriptbank.com/internal-search-box.html



CSS
<style type="text/css"><!--div.sample_attach, a.sample_attach {  width: 100px;  border: 1px solid #DFAD00;  background: #FFFFEE;  padding: 0px 5px;  font-weight: 900;  color: #00009C;  text-align: center;}a.sample_attach {  display: block;  border-bottom: none;  text-decoration: none;}form.sample_attach {  position: absolute;  visibility: hidden;  border: 1px solid #DFAD00;  background: #FFFFEE;  color: #00009C;  padding: 0px 5px 2px 5px;  text-align: center;}--></style>


JavaScript
<script type="text/javascript"><!--// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.// Technical support: http://www.php-development.ru/// http://www.php-development.ru/javascripts/dropdown.php//// YOU MAY NOT// (1) Remove or modify this copyright notice.// (2) Distribute this code, any part or any modified version of it.//     Instead, you can link to the homepage of this code://     http://www.php-development.ru/javascripts/dropdown.php.//// YOU MAY// (1) Use this code on your website.// (2) Use this code as a part of another product provided that//     its main use is not creating javascript menus.//// NO WARRANTY// This code is provided "as is" without warranty of any kind, either// expressed or implied, including, but not limited to, the implied warranties// of merchantability and fitness for a particular purpose. You expressly// acknowledge and agree that use of this code is at your own risk.// ***** Popup Control *********************************************************function at_display(x) {  var win = window.open();  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');}// ***** Show Aux *****function at_show_aux(parent, child) {  var p = document.getElementById(parent);  var c = document.getElementById(child );  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;  for (; p; p = p.offsetParent) {    top  += p.offsetTop;    left += p.offsetLeft;  }  c.style.position   = "absolute";  c.style.top        = top +'px';  c.style.left       = left+'px';  c.style.visibility = "visible";}// ***** Show *****function at_show() {  var p = document.getElementById(this["at_parent"]);  var c = document.getElementById(this["at_child" ]);  at_show_aux(p.id, c.id);  clearTimeout(c["at_timeout"]);}// ***** Hide *****function at_hide() {  var c = document.getElementById(this["at_child"]);  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);}// ***** Click *****function at_click() {  var p = document.getElementById(this["at_parent"]);  var c = document.getElementById(this["at_child" ]);  if (c.style.visibility != "visible")    at_show_aux(p.id, c.id);  else c.style.visibility = "hidden";  return false;}// ***** Attach *****// PARAMETERS:// parent   - id of visible html element// child    - id of invisible html element that will be dropdowned// showtype - "click" = you should click the parent to show/hide the child//            "hover" = you should place the mouse over the parent to show//                      the child// position - "x" = the child is displayed to the right of the parent//            "y" = the child is displayed below the parent// cursor   - Omit to use default cursor or check any CSS manual for possible//            values of this fieldfunction at_attach(parent, child, showtype, position, cursor) {  var p = document.getElementById(parent);  var c = document.getElementById(child);  p["at_parent"]     = p.id;  c["at_parent"]     = p.id;  p["at_child"]      = c.id;  c["at_child"]      = c.id;  p["at_position"]   = position;  c["at_position"]   = position;  c.style.position   = "absolute";  c.style.visibility = "hidden";  if (cursor != undefined) p.style.cursor = cursor;  switch (showtype) {    case "click":      p.onclick     = at_click;      p.onmouseout  = at_hide;      c.onmouseover = at_show;      c.onmouseout  = at_hide;      break;    case "hover":      p.onmouseover = at_show;      p.onmouseout  = at_hide;      c.onmouseover = at_show;      c.onmouseout  = at_hide;      break;  }}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      if (oldonload) {        oldonload();      }      func();    }  }}addLoadEvent(function() {  at_attach("src_parent", "src_child", "click", "x", "pointer");});//--></script>


HTML
<div style="cursor: pointer;" class="sample_attach" id="src_parent">Site Search</div><form style="position: absolute; visibility: hidden; top: 629px; left: 357px;" class="sample_attach" id="src_child"><b>Enter search terms:</b><br><input style="margin-bottom: 1px; width: 170px;" name="terms" type="text"><br><input value="Submit" type="submit"></form>