Categories

• JavaScript Web Tips
• Others

Other Tips

• Disable "HOME" Button on Home Page Using SSI
• Invoking a Search Engine -- Method 1
• Invoking a Search Engine -- Method 2
• Next Page >>

Disable "HOME" Button on Home Page Using SSI

This is a simple thing, but for those of you who tend to adhere to Jakob Nielsen's usability recommendations (link opens in new window) it can be an useful one -- and easy to implement.
Jakob's recommendation says (rightly so!) that a HOME button on the home page can be confusing for unexperienced users, as it leads them into believing that they are actually not on the home page. Therefore, it is wise just on the front page to remove such a HOME button. While one can think of complicating pieces of JavaScript that will test (using smart regex's and such) whether the URL of the current page is something like index.html or index.htm or index.asp or default.asp or it's just http://www.sitename.com/ (with or without the ending slash) and based on that change the contents of an element, I would just say that such approach is prone to errors and/or problems:

• First of all, you have many cases to cater for and simply just saying "if the page ends with index.html then it's home page" doesn't work -- http://www.mysite.com/page1/page2/index.html meets such criteria yet is not the home page! Counting the characters in the URL again makes it non-portable (you'll have to change the script each time you place it onto a new domain name, with either more or less characters in the name) and would mean that both http://www.mysite.com/index.html abd http://www.mysite.com/abcde.html would be flagged as "home page". Sure, one can combine these rule in smarter criteria and achieve the result, but it would be a pain to do so.
• If you change your webserver configuration such as the "welcome page" for each location changes from index.html say to default.html or index.shtml then your whole script is wrong again! (And trust me, having to re-read regex's is not the most pleasant activity :-)
• Also, because your script will be executing on the client side, the browser will still request first the whole portion of the UI that contains the HOME button -- and if your menu uses large image files, that can be a bit of an unneeded overload.
• Last but not least, for the same reason described above, if you are replacing the HOME button dynamically with another image/UI component, if the new image/UI component is quite large or for PCs on slow links and/or slow processors, the user might still see for a little while the HOME button and then it will see it dissappearing -- which can be even more confusing!

Rather than taking the JavaScript approach, you could use SSI as it follows:

• Make sure you turn on SSI (Server Side Includes) in your webserver configuration.
• Place your whole menu in an external .shtml file.
• In this .shtml, for the part where the HOME menu button/image/link is shown, use a piece of code as follows:

• Now, in your home page before including the menu .shtml file (via <--!#include virtual="..." -->) set a variable called home to have the value of 1 like this:

DONE! Now, when you will visit the first page, because the SSI engine will find a variable home set to 1, it will not include the HOME button. However, on all the other page (which you don't need to change to <!--#set...--> the home variable at all!), because the variable is not defined, it cannot be possibly equal to the value of 1 and therefore the HOME button is shown! Simple, yet powerful -- methinks :-)
As a last comment on this matter, this site uses the same trick ;-)
Back to the beginning of the page

Invoking a Search Engine -- Method 1

I personally don't quite see the reason for this, but I have noticed that certain sites tend to put a little search box on their site that allows you to search the web using search engines like Google, Yahoo etc. (I say that I don't see the reason because everyone nowadays knows how to use search engines; the only time I see a reason for using such a search box on a web page is if the user will use the search engine to search only your site.)
Anyway, arguments aside, if you want to implement such a facility, you have more than one way of doing it : using some sofisticated API that the search engine might provide, using some fancy IFRAME where you load the actual search engine's main page etc. One simple way of doing it though is presented below, which should be easy to implement and will work for any search engine. Here is how:
Open the search page for the search engine you want to use -- in this example we will consider Google (http://www.google.com). Using your browser's controls, view the source of this page -- this will allow you to see the HTML code behind the page. In this HTML window, locate the <form> tag where the search controls are placed. In our case, you will come across a <form> tag like this:

This indicates that when you press the SEARCH button, the search terms will be submitted (via HTTP-GET) to http://www.google.com/search. So the idea that quickly springs to mind is to place a <form> on your web page which has the action property set to this URL. Therefore, when the user will press the SEARCH button, the input will be sent to the search engine directly and the engine will process the search terms and display the results. One other thing to locate as well is the <input> tag where the user can type the search terms -- the most important property that you will have implement on your search form is the name property, as this will be passed to the search engine. In our case, the name of this input is q (no doubt as in short for query).
Putting it all together, here's an example of using Google's search here:

You can try the above form by typing in a few search terms and pressing Search Google and you will see the Google results coming back.

Invoking a Search Engine -- Method 2

If you've read the paragraph above and don't want to take that approach but still want to implement a search the web facility on your site, there is another way of doing it. It is slightly more complicated than the one above, but it might be worth using.
As you have noticed when using the search engines, most of them work over HTTP-GET, so when you submit a search phrase like web the search engine will send your browser to a URL in the format http://www.searchengine.com/blah/blah/blah?blah=web&blah=.... So as you notice, your search phrase is included in an URL that contains all sorts of other parameters. Typically it is safe to just identify the parameter that contains your search phrase and discard the others -- the search engine will use some default values for the other parameters and it will still perform the search.
Let's consider the example of Yahoo -- if you perform a search on the keyword web, the end result URL (in my case) will be: http://search.yahoo.com/search?p=web&sm=Yahoo%21+Search&fr=FP-tab-web-t&toggle=1&cop=&ei=UTF-8 Looking at the URL we can identify that the important part is just this: http://search.yahoo.com/search?p=web. (You can copy and paste the above URL in your browser and you'll see that the search is still performed.) So in order to perform a search using Yahoo, we will have to append our search terms to this base URL: http://search.yahoo.com/search?p=. Therefore, you can add a form with some JavaScript around it on your page, so when the user clicks on the SEARCH button you form a URL in this way and open it in a new window using window.open.
Note that W3C recommends that special characters are encoded using %HH (where HH is the hexadecimal UTF-8 code for the character) -- so you will have to encode/escape at least things like spaces (%20) when generating the URL. This can be easily done using a RegExp that replaces all the white spaces with %20:

You can try the above method in the form below:

P.S. You will notice that the above form also encodes the double qoutes (") -- but I'll leave it up to you to figure out the RegEx for this. Also, these are not the only 2 characters that need to be escaped, so the above example will fail for characters like & (ampersand) etc -- but it is easy to modify to escape such characters too.
Back to the beginning of the page

Go to next page.
Go back to the Technical page.
Go back to the main page.