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

0
Like

0
Dislike

RoM Search Box 

This code is for a Runes of Magic database search box for your site. Add the following code to a Free Form Text/HTML type widget while in HTML mode.

 

The Code
<style type="text/css">
.searchbox { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rom-logo.gif) no-repeat; position: relative; width: 160px; height: 100px; }
.searchbox div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox input { background: transparent; border: #777777 1px solid; color: white; width: 125px; position: absolute; top: 53px; left: 5px; }
.searchbox button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn-search.png) no-repeat; width: 31px; height: 31px; position: absolute; right: 5px; bottom: 20px; border: none; cursor: pointer; }
.searchbox button:hover { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn-search-hover.png);}
</style>
<div align="center"><div class="searchbox" align="center">
<a href="http://www.runesdatabase.com/"><div></div></a>
<input id="search-input" class="tooltip" type="text" title="Search" maxlength="256" name="search_text" />
<button id="searchbx" />
</div></div>
<script type="text/javascript">
openNewSearchWindow = false;
siteLanguage = 'www'; // www = english, de = german, fr = french, etc.
/*
******************************
Don't Change anything below
****************************** */

if (openNewSearchWindow) { $(".searchbox").find("a").attr('target','_blank'); }
$("#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://' + siteLanguage + '.runesdatabase.com/search?q=';
 searchtxt += $("#search-input").attr("value");
 if (openNewSearchWindow) { window.open(searchtxt); } else { document.location.href = searchtxt; }
}
</script>
Customizing

  • To open a search results in a new window, change the value of "openNewSearchWindow" in red to true. If false, the search results open in the same window.

  • You can change the search result site language to match your language. For english, leave it as 'www' (in blue). For other languages, copy the subdomain of the site (e.g. 'de' = german, 'fr' = french, etc).

  • If you have your own images you want to use, change the image urls (in orange). You will also most likely need to change the size and positioning of the images as well.

  • The only color in the css above is applied to the input area border (in blue). Adjust the color as desired.
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%