6 times 9 Web Search
About
The code was originally created for a design of my personal website, richardwinskill.co.uk, that never progressed very far. When I decided to abandon that design and start again, I also decided to create a standalone search form.
The form allows you to search many different websites (such as Google, Wikipedia, and IMDb) from one location.
It can be used either as a standalone page, or it can be embedded in other pages.
The size of the form was set such that it should fill the available space in Safari on an iPhone.
I keep adding more searches as I think of them, and since the search form that's embedded is still the live form at search.6times9.com, any new searches will automatically appear in embedded forms. If you have any suggestions or requests for new searches, feel free to send them via the Contact Us form.
Example
The form can either be used as a standalone webpage, or it can be embedded, as shown below:
Using
Searching
To search using the form, simple enter the search term in the top box, choose the website from the list, and click "Search the Web".
Embedding
Embedding should be a ridiculously simple process but, because of Internet Explorer, it's not...
You therefore have two options: if your site is not designed to be viewed by Internet Explorer, then it's simple; if you want to support Internet Explorer, then it's slightly more complicated.
Ignore Internet Explorer
If you do not need, or do not want, to support Internet Explorer then simply add the following HTML to include the form:
<div id="sxnwebsearch"><object data="http://search.6times9.com/?plain" type="text/html"><h2>6 times 9 Web Search</h2><p>The embedded search box cannot be loaded. The site may be down, or your browser security settings may have blocked access.</p><p>If you want to use the feature, you can try going to the actual <a href="http://search.6times9.com">6 times 9 Web Search</a> site.</p></object></div>
Then include this CSS somewhere to correctly set the size:
#sxnwebsearch object {width: 480px; height: 200px;}
Support Internet Explorer
There are two problems with embedding in Internet Explorer: Internet Explorer does not appear to like remote pages in <object> tags, and it does not appear to be possible to remove the border and scrollbar.
I have used extra CSS to mask the border and scrollbar, and I have used PHP to create a local file for Internet Explorer.
First you need to download 6x9search.php. Then you need to edit 6x9search.php, and replace "#dfd" with the background colour you need the box to have.
Then you need to use the following code to include the form, making sure you update the path for 6x9search.php as necessary (note that the path is for the browser, not PHP):
<div id="sxnwebsearch"><object data="<?php if(strstr($_SERVER['HTTP_USER_AGENT'], "MSIE")){echo '6x9search.php';}else{echo 'http://search.6times9.com/?plain';} ?>" type="text/html"><h2>6 times 9 Web Search</h2><p>The embedded search box cannot be loaded. The site may be down, or your browser security settings may have blocked access.</p><p>If you want to use the feature, you can try going to the actual <a href="http://search.6times9.com">6 times 9 Web Search</a> site.</p></object></div>
Finally, include the following CSS in the HEAD section of pages using the form:
<style type="text/css" media="screen">
#sxnwebsearch object {width: 480px; height: 200px;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#sxnwebsearch {overflow: hidden; width: 480px; height: 200px;}
#sxnwebsearch object {width: 500px; height: 204px; margin: -2px 0 0 -2px;}
</style>
<![endif]-->
With this code, Firefox, Opera, and Safari should use the form at http://search.6times9.com, and Internet Explorer should use the local file. All four should display correctly.
Please Note: Submitting the form or clicking the links should load in the same page in Firefox, Opera, and Safari (as opposed to opening the results in the small window displaying the form). However, that didn't work in Internet Explorer (it's annoying like that) so they need to open in a new window.
Please Note: Internet Explorer 6 does not support PNG transparency, and appears to be even worse at handling the <object> tag. You should not expect the form to look right in IE6 and earlier...
Feedback
I'd like to hear what you have to say about this script; I've only been able to test it in IE, Firefox, and Opera in Windows - I have no idea if it'll work on a Mac, for example...
If you have any comments, compliments, or suggestions feel free to email me and let me know.