Web Command Line

JavaScript Widget

Purpose

The purpose of this project is to provide a form where you can type the things you want to do, instead of clicking with the mouse. Some people have wrist problems from too much mouse use, and some people don't like to take their hands off the keyboard.

This form lets you quickly search sites such as Amazon, Bing, CSS Validator, Ebay, Fedex Tracking, Fry's, Google Maps, HTML Validator, jQuery Documentation, Dictionaries, Mozilla Development Center, PHP Documentation, Thesaurus, Tiger Direct, Microsoft Translator, UPS and USPS Tracking, Whois, Wikipedia, and Wordpress Documentation. Enter a two- or three-letter site abbreviation, then your search terms, and let it go. I've been using this form as my home page for years, and I can find anything quickly.

How It Works

The JavaScript file has a list of abbreviations for commonly used web sites and searches. You can add to the list of abbreviations. The script will also look through your page for matching links and use them. The searches are common web search URLs into which the script enters your search terms as URL parameters.

The script also draws the search widget for you. You can style the widget any way you wish using CSS.

To help you remember the abbreviations and sites, the widget comes with a default entry of "help". If you hit the return key or click Go, you'll get a list of the abbreviations the script knows about. You can add more sites and searches of your own to the top of the JavaScript file.

Getting Started

Here is how to use this on your own page.

1. Download the file mixcommand.js and reference it in the head section of your HTML file like this:

   <script type="text/javascript" src="mixcommand.js"></script>

2. Download the file mixcommand.css and reference it in the head section of your HTML file like this:

   <style type="text/css">
   @import "mixcommand.css";
   <style>

   (You can also reference your other styles and stylesheets here.)
3. Add this HTML code into your file where you would like the widget to appear.

   <div id="mixcommand"><div>

4. Optional. Add new search fields at the top of mixcommand.js in the array variable mix_custom_searches. Each array element is itself a two-element array, where the first element is the name/abbreviation of the site, and the second element is that site's search string, with the search term replaced by the string %s.

   Example. Note the %s reference in the URL:

   [ "Mozilla Dev Center",
     "https://developer.mozilla.org/en-US/search?q=%s" ],

5. Optional. Add new sites near the top of the top of mixcommand.js in the array variable mix_custom_searches. Each array element is a string consisting of a short abbreviation, then multiple spaces, then a longer notation of the site, then multiple spaces, and finally an absolute URL (without any search terms or URL variables).

   Example:

   "moz   Mozilla   https://developer.mozilla.org/en-US/",

6. Optional. Add or change styles in the file mixcommand.css, or add your styles in a separate CSS file. The widget DIV has an id of mixcommand.

Using the Widget

You use the widget by entering a site abbreviation, then optional search terms. If you don't enter search terms, the script looks in your list of abbreviations. If it doesn't find a match, it will look through any other links on your page.

For example, if you enter moz in the box above, the page will be redirected to the Mozilla Developer Network home page.

If you enter search terms, the script looks in your list of searches instead. It matches the first term to a site, and the rest of them it it plugs into the search query.

For example, if you enter moz onload in the box above, the page will search the Mozilla site for the search term onload.

Try It

Here are bunch of links. Try typing the first few letters of each site name into the box.