Dynamic Search Bar Script

Dynamic Search Bar

A dynamic search bar script, to display or hide a search box at a time by clicking a text link or image. You can include many search forms in the same bar, limiting the length of the table.

Author: SimplytheBest.net Price: Free GPLv2 Type: Javascript

EXAMPLE

Click on the links or the arrow images to display or hide the search boxes, and of course you can try our searches.

SimplytheBest WebZone

Scripts Search

STEP 1

Download the file with the search.js and style.css files and unzip into the selected directory.

STEP 2

Insert the following code between the </HEAD> and <BODY> tags in your HTML.

STEP 3

Insert the following HTML code in the <BODY> section where you want the search bar to appear in your page.

Click in textarea to select code then copy and paste Ctrl-CCtrl-V

<div class="searchbar"> <span style="margin-right:40px"> <a class="slink" onclick="ShowHideBox(1); return false;" href="http://web.simplythebest.net">SimplytheBest WebZone</a> <form id="form1" name="form1" action="http://web.simplythebest.net/search.php" method="get"> <input class="fbox" type="text" id="box_1" maxlength="50" name="keyword" /></form><img class="arrow_submit" id="button_1" onclick="SearchButton(1);" src="arrow.gif" width="8" height="12" /> </span> <span><a class="slink" onclick="ShowHideBox(2); return false;" href="http://scripts.simplythebest.net">Scripts Search</a> <form id="form2" name="form2" action="http://scripts.simplythebest.net/search.php" method="get"> <input class="fbox" type="text" id="box_2" maxlength="50" name="keyword" /></form><img class="arrow_submit" id="button_2" onclick="SearchButton(2);" src="arrow.gif" width="8" height="12" /> </span> </div>

Customize the search bar in the HTML section and in the style.css to match the style of your page. You can place as many search boxes as you like, just make sure to appropriately number each ID as highlighted in the examples above.