Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Search Box
Mottie (MVP) 10/19/2008 6:45 PM EST : Search Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Search Box

This script adds a search box to your site that basically allows you to search any site you desire. Add or subtract sites from the list any time you want! See this search box in action on my test-site. Click on the icon to open the list of available sites to search. Then click on the magnifying glass to search that site!

 Search Box
Search Box (showing list)

The Code

<style type="text/css">
#searchbox img { cursor: pointer; position: relative; top: 4px; }
#searchbox input { color: #ffffff; background: #222222; border: #222222 1px solid; width: 90px;}
#searchbox button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search.png) no-repeat; position: relative; top: 13px; left: -5px; width: 37px; height: 35px; border: none; cursor: pointer; }
#searchbox button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search-hover.png) no-repeat; }
#popitmenu { background: #222222; border: #222222 1px solid; position: absolute; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #ffffff; display: block; }
#popitmenu a:hover{ background-color: #444444; }
#popitmenu img { border:0px; padding-right:10px; }
html>body #searchbox button {top:0px;}
</style>
<script type="text/javascript">
var sites = new Array();
var searchNewWindow = true;
var searchDefault = "WowHead";
var defaultMenuWidth = "120px";

sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://wow.allakhazam.com/search.html?q="]);
sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowarmory.png","http://www.wowarmory.com/search.xml?searchType=all&searchQuery="]);
sites.push (["Google","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/google.png","http://www.google.com/search?q="]);
sites.push (["Thottbot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/thottbot.png","http://thottbot.com/?s="]);
sites.push (["WowDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb.png","http://www.wowdb.com/search.aspx?search_text="]);
sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);
sites.push (["WowWiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowwiki.png","http://www.wowwiki.com/index.php?search="]);

/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<div align="center"><div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<span ="showmenu(event,linkset[0])" ="delayhidemenu()"><img id="search-image" src=""></span>
<button id="searchbx" />
</div></div>
<script src="http://www.axiomfiles.com/Files/243007/searchbox.js" type="text/javascript"></script>

Customizing

CSS

  • Change the numbers in blue to match the colors of your site. I made the background and border the same color because it looks nicer that way 

  • The width of the search box is optimized for the default side column width of 175 pixels. If you made the columns wider and want to make your input box wider, then modify the number in red.

    width: 90px;

  • If you want to replace the magnifying glass search button, replace the icon's URL in orange with the URL to your image... make sure you make a "hover" version and adjust the image height and width definitions as well.

Search Sites

  • The above script is set up for a World of Warcraft search box, but you can modify it to work for any game site, or to search any database. Follow the steps below to modify this code.

  • To make the search box open the search results in a new window, set this variable (in teal) to "true"

    var searchNewWindow = true;

  • You can set a default search engine by typing in the name of the site (in green) - this must match the name (case sensitive) you put into the "sites" variable. In the example below, I chose the default search site to be "WowHead".

    var searchDefault = "WowHead";

  • You can adjust the width of the pop-up selection menu by adjusting the "defaultMenuWidth" (in red)

    var defaultMenuWidth = "120px";

  • How to add a search site - You will need three things to make this work... here is the variable:

    sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);

    1. The Site Name is the first part of the variable (in green). This is the name that must match (case sensitive) the "searchDefault" variable if you want this site to be set as default. It is ok to include spaces.

    2. The second part of the sites varible is the URL of the icon for the site (in orange). All the icons in this post were custom made and are 18 x 18 pixels in size.

    3. The last part of this variable is in purple. It is the URL to the actual search page. The best way to find this page URL is use the search box on the site itself. Choose something very general to search for, such as "cloak". Most of the time it will return a list of items that match "cloak"... now look at the browser's URL and you'll most likely see something like "http://www.wowhead.com/?search=cloak". Copy this URL and add it to the third part of the "sites" variable, don't forget to remove the "cloak" from the URL. This works for just about any site with a search box. In fact, I've included a list of other sites that you can choose from below!

  • Other search sites you can add to your search box!!... just add or replace the "sites" variables in the script above to customize this box for your specific game. If I haven't included a site that is commonly used for your game, please feel free to reply with your "sites" variable and I'll update this thread!

    AoC Armory
    sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Conan.png","http://www.conanarmory.com/search.aspx?search_text="]);

    DAoC
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://camelot.allakhazam.com/searchdb.html?a=Search&terms="]);

    EQ
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://everquest.allakhazam.com/search.html?q="]);
    sites.push (["EQ Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQwiki.png","http://www.eqwiki.net/wiki/Special:Search?search="]);

    EQ2
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eq2.allakhazam.com/search.html?q="]);
    sites.push (["EQ2i","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2i.png","http://eq2.wikia.com/wiki/Special:Search?search="]);

    EQOA
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eqoa.allakhazam.com/itemname.html?iname="]);

    EVE ONLINE
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eve.allakhazam.com/db/itemlookup.html?itemname="]);
    sites.push (["EVEwiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EveWiki.png","http://www.eve-wiki.net/index.php?search="]);

    FFXI
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://ffxi.allakhazam.com/search.html?q="]);
    sites.push (["FFXIclopedia","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/FFXIWiki.png","http://wiki.ffxiclopedia.org/wiki/Special:Search?search="]);

    LINEAGE II
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://l2.allakhazam.com/db/itemlookup.html?iname="]);
    sites.push (["Stratics","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/L2stratics.png","http://lineage2.stratics.com/l2wiki/index.php/Special:Search?search="]);

    LOTRO
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://lotro.allakhazam.com/search.html?q="]);
    sites.push (["LOTRO Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/LOTROWiki.png","http://lotro-wiki.com/index.php/Special:Search?search="]);

    WARHAMMER
    sites.push (["WarDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/WarDB.png","http://www.wardb.com/search.aspx?search_text="]);
    sites.push (["War Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/WarWiki.png","http://www.thewarwiki.com/wiki/Special:Search?search="]);
Edit (10/20/2008): Replaced the select box with a pop-out menu to make it look better on non-Firefox browsers.
TopBottom

Mottie (MVP) 10/19/2008 6:58 PM EST : RE: Search Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Sadly, I just tested this with IE and Chrome and it's totally messed up... I'll work on it and try to get it working better with those browsers.

Replaced the select box with a pop-out window (similar to a tooltip), so now it works nicely with Firefox, IE and Chrome.
TopBottom

Avandius (New Admin) 10/20/2008 7:56 AM EST : RE: Search Box
Avandius
Posts: 337
Fingers of Fury!

Looks like an awesome idea!! I think im going to use this code on my site since we are a multigame guild after all. I just need to create some sort of universal artwork to display above it

Can you make me a dummy 200px blank image to put above it that way i know where to put it in the code? Along with the search box being 200px center aligned.

:D

Edit: After putting it in my site and playing around with it some if come across a couple bugs. The mouse over doesnt display on the search button, if i add WAR websites the icons arn't feeding and showing up. I want to make the box 200px wide but if i change the search field to that wide or 130px it pushes the search icon onto the next line even though it hasnt filled up the content box.

http://www.guildportal.com/Guild.aspx?GuildID=241533&TabID=2106231 
TopBottom

Kaysi (Guild Admin) 10/20/2008 9:22 AM EST : RE: Search Box

Kaysi
Posts: 445
Fingers of Fury!

Love it! Thank you Mottie! 
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 10/20/2008 11:36 AM EST : RE: Search Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

LOL ok Avandius... I see the problem, somehow all the "//" were erased from the URLs.... I just added them back, but you can easily edit your script by adding them back
it was "http:i201...", just add the double slashes back to "http://i201...."
The search URL was also effected the same way.. sorry about that!!

I'll look into fixing the width problem after we raid tonight.
TopBottom

Avandius (New Admin) 10/21/2008 5:31 AM EST : RE: Search Box
Avandius
Posts: 337
Fingers of Fury!

BAH! I shoulda caught that one. Weird considered i copied the URL and pasted it into the address bar and it loaded perfectly, it must have auto fixed it.

Let me know about the width and photo.

Also another request, would it be possible to disable it reloading and jumping to the top of the page when you switch search providers? Just make it load that spot rather than the whole page?
TopBottom

Mottie (MVP) 10/21/2008 9:23 AM EST : RE: Search Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Avandius,

Ok, I added & fixed a few things:
  • It no longer jumps to the top of the page when switching search sites
  • I removed all the extra space around the magnifying glass icon and made it smaller to match the icon size... and of course updated the CSS to make it look better
  • I added a banner image over the search box (URL in orange) - it's below the "Don't change anything below" but hey LOL.
  • I removed the <button> tag as it also made the page reload and replaced it with an image.
  • I added a new variable that adds a horizontal line into the tooltip, tell the script where to add the lines using this variable:

    var tooltipSeparator = "1|2";

    The number indicates to add a horizontal line after that element. Each number is separated with a line "|" (shift-\). So in the example above "1" corresponds to "Google" and "2" to the "Armory", both of which have a horizontal line.
Here is what it looks like now (200 pixels wide)

 Search Box with Banner
 Search Box tooltips (with horizontal separators)

Here is the updated code:
<style type="text/css">
#searchbox img { cursor: pointer; border: none; position: relative; top: 5px; }
#searchbox input { color: #ffffff; background: #222222; border: #222222 1px solid; width: 150px; font-size: 10pt;}
#searchbx { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search2.png) no-repeat; width: 18px; height: 18px; }
#searchbx:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search2-hover.png) no-repeat; }
#popitmenu { background: #222222; border: #222222 1px solid; position: absolute; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #ffffff; display: block; }
#popitmenu a:hover{ background-color: #444444; }
#popitmenu img { border: 0px; padding-right:10px; }
</style>
<script type="text/javascript">
var sites = new Array();
var searchNewWindow = true;
var searchDefault = "WowHead";
var defaultMenuWidth = "120px";
var tooltipSeparator = "1|2";

sites.push (["Google","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/google.png","http://www.google.com/search?q="]);
sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowarmory.png","http://www.wowarmory.com/search.xml?searchType=all&searchQuery="]);
sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://wow.allakhazam.com/search.html?q="]);
sites.push (["Thottbot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/thottbot.png","http://thottbot.com/?s="]);
sites.push (["WowDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb.png","http://www.wowdb.com/search.aspx?search_text="]);
sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);
sites.push (["WowWiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowwiki.png","http://www.wowwiki.com/index.php?search="]);

/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<div align="center">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/searchweb.gif">
<div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<img id="search-image" src="" ="showmenu(event,linkset[0])" ="delayhidemenu()">
<img id="searchbx" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif"/>
</div></div>
<script src="http://www.axiomfiles.com/Files/243007/searchbox.js" type="text/javascript"></script>

Please follow the instruction in the top post on how to customize this further.

TopBottom

Avandius (New Admin) 10/22/2008 5:10 AM EST : RE: Search Box
Avandius
Posts: 337
Fingers of Fury!

Thanks alot Mottie! Works wonderfully! 

I really like the new icon load.
TopBottom

Vodoobanshee (Guild Admin) 10/22/2008 6:33 AM EST : RE: Search Box

Vodoobanshee
Posts: 1492
Zomgawsh Poster

Hey Mottie you are the best....wish i was this guru like.

Could you help a less advanced person...when I read all your posts I am having trouble with what portions go where.

For example on your Wardb search, it says content box so I assume that copy and paste that into a free form content box and your good to go...however thats not the case.

So..can you help educate. What goes into your custom css box and then what peice goes into free for etc.
________________________________________________
TopBottom

Avandius (New Admin) 10/22/2008 7:29 AM EST : RE: Search Box
Avandius
Posts: 337
Fingers of Fury!

Nothing entered for the message body or unable to parse (possible due to malformed HTML).....well i was going to post the code that i used on my site for WarDB. However, i cant seem to figure out how to post code without poping an error. Mottie if you can steal the one from my site i think it would get him going in the right direction.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%