Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Web Site Search Boxes
Mottie (SuperAdmin) 10/17/2008 5:55 PM EST : RE: Web Site Search Boxes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike


WoWDB Search Box

*WOWDB No longer exists!*

This is pretty much the same code as above 

I had to make the images since WoWDB doesn't have a search box for some odd reason. But feel free to replace them with images of your own making to match your site.

The Code

<style type="text/css">
.searchbox120 { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb120.png) no-repeat; position: relative; width: 120px; height: 100px; }
.searchbox120 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox120 input {background: transparent; border: 0; color: white; width: 88px; position: absolute; top: 75px; left: 7px; }
.searchbox120 button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search2.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -24px; bottom: -20px; border: none; cursor: pointer; }
.searchbox120 button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search_hover2.png) !important; }

.searchbox160 { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb160.png) no-repeat; position: relative; width: 160px; height: 125px; }
.searchbox160 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox160 input { background: transparent; border: 0; color: white; width: 103px; position: absolute; top: 97px; left: 14px; }
.searchbox160 button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search2.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -5px; bottom: -18px; border: none; cursor: pointer; }
.searchbox160 button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search_hover2.png) !important;}
</style>
<div align="center">
<div class="searchbox" align="center">
<a href="http://www.wowdb.com/"><div></div></a>
<input id="search-input" type="text" title="Search" maxlength="256" name="search_text" />
<button id="searchbx" />
</div>
</div>
<script type="text/javascript">
searchSize = 120;
searchNewWindow = false;
/*
******************************
Don't Change anything below
****************************** */
if (searchNewWindow) $(".searchbox").find("a").attr('target','_blank');
var temp = ( searchSize == 160 ) ? "searchbox160" : "searchbox120";
$(".searchbox").addClass(temp);
$("#searchbx").click( function(){ searchWin() });
$("#search-input").keypress(function(e){var key=(e.which)?e.which:e.keyCode;if(key==13){searchWin()}});
function searchWin () {
 var searchtxt = "http://www.wowdb.com/search.aspx?search_text=";
 searchtxt += $("#search-input").attr("value");
 if (searchNewWindow) { window.open(searchtxt) } else { document.location.href = searchtxt; }
}
</script>

Customizing

  • Please scroll up to the original post, the instructions are almost exactly the same.
Edit (10/18/2008): Fixed the opening two new windows problem
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%