Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : WH > WarDB Search Box
Mottie (SuperAdmin) 1/5/2011 2:22 PM EST : WarDB Search Box
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

WarDB Search Box

GuildPortal admin site link to original post

The WarDB site provides a search box that you can add to your site, but it doesn't work when you add it. So, because I have OCD, I worked on it until I made it work 

There is no need to add the javascript code from the WarDB search box page once you add this code.

The Code

<style type="text/css">
.searchbox120 { background: url(http://www.wardb.com/images/wardb120.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://www.wardb.com/images/btn_search.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -24px; bottom: -20px; border: none; cursor: pointer; }
.searchbox120 button:hover { background: url(http://www.wardb.com/images/btn_search_hover.png) !important; }

.searchbox160 { background: url(http://www.wardb.com/images/wardb160.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://www.wardb.com/images/btn_search.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -5px; bottom: -18px; border: none; cursor: pointer; }
.searchbox160 button:hover { background: url(http://www.wardb.com/images/btn_search_hover.png) !important;}
</style>
<div align="center">
<div class="searchbox">
<a href="http://www.wardb.com/"><div></div></a>
<input id="search-input" type="text" title="WarDB 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.wardb.com/search.aspx?search_text=";
 searchtxt += $("#search-input").attr("value");
 if (searchNewWindow) { window.open(searchtxt) } else { document.location.href = searchtxt; }
}
</script>

Customizing

  • The CSS has all the contents of the external javascript, so now you can change the CSS to make it fit your site.

    • The ".searchbox120" is for the 120 x 100 size box

    • The ".searchbox160" is for the 160 x 125 size box

  • The box size is changed by modifying this part of the code:

    searchSize=120;

    • Use 120 for the 120 x 100 size box

    • Use 160 for the 160 x 125 size box

  • To open the search results in a new window or same window, modify this part of the code:

    searchNewWindow=false;

    • false = Same window

    • true = New window

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%