автор: karpoff

Всплывающий поиск

Может, кому-нибудь пригодится такой скриптик.
Его функциональность:
При нажатии на ссылку в меню Поиск, страница с поиском не загружается, а появляется только окошко  с двумя полями: слова для поиска или автор.
При повторном нажатии, оно исчезает.
Также в окошке есть ссылка "Расширенный поиск", которая ведёт к полной странице поиска.
Это нужно, чтобы не грузить каждый раз полную страницу с поиском.

<script language="JavaScript">
document.getElementById("pun-navlinks").style.position = "relative"

function showDiv()
{
if(  document.getElementById("searchDiv").style.display == 'none' )
     document.getElementById("searchDiv").style.display = ''
else document.getElementById("searchDiv").style.display = 'none'

return false;
}

str  = "<a href=\"search.php\" onclick=\"return showDiv()\"><span>Поиск</span></a>"
str += "<div id=searchDiv style=\"display: none; \">"

str += " <form method=\"get\" action=\"search.php\">"
str += "    <input type=\"hidden\" name=\"action\" value=\"search\">"
str += "    <p class=\"inputfield\">"
str += "    <label for=\"fld1\">Ключевые слова</label><br />"
str += "    <span class=\"input\"><input type=\"text\" name=\"keywords\" size=\"25\" maxlength=\"100\" /></span>"
str += "    </p>"
str += "    <p class=\"inputfield\">"
str += "    <label for=\"fld2\">Поиск автора</label><br />"
str += "    <span class=\"input\"><input type=\"text\" name=\"author\" size=\"25\" maxlength=\"25\" /></span>"
str += "    </p> <br>"

str += "    <input type=\"hidden\" name=\"forum\" value=\"-1\">"
str += "    <input type=\"hidden\" name=\"search_in\" value=\"all\">"
str += "    <input type=\"hidden\" name=\"sort_by\" value=\"0\">"
str += "    <input type=\"hidden\" name=\"sort_dir\" value=\"DESC\">"
str += "    <input type=\"hidden\" name=\"show_as\" value=\"topics\">"

str += "    <p><input type=\"submit\" class=\"button\" name=\"search\" value=\"Отправить\" accesskey=\"s\" title=\"Accesskey:s\" /></p>"
str += " </form>"

str += "    <a href=\"search.php\">Расширенный поиск</a> "
str += "</div>"

document.getElementById('navsearch').innerHTML = str
</script>
<style>
#searchDiv{
position:absolute;
background-color : Gray;
border : solid;
padding-bottom : 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
z-index:2;
}
</style>

Внимание!
Этот скрипт надо вставлять в html-низ!!!
Но в разных браузерах он будет отображаться по-разному.
Cмена цвкта  -  Gray

Есть параметр background-color
вместо Gray указывай любой, какой захочешь:

Код:
<style>
#searchDiv{
position:absolute; 
background-color : Gray; 
border : solid;
padding-bottom : 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
z-index:2;
}
</style>