Flangy > Software Development > Web Note: Creating Browser bars

Creating Browser Bars

IE/Windows has a feature called the "Search Pane" or "Explorer Bar", depending on version. Mozilla (all platforms, but not all projects that use the Gecko rendering engine) has a feature called "Sidebars". Both of these features work the same way. They create a new pane in the browser (by default on the left) with a new HTML window. This window can be referenced by the main window, and the main window can reference into the new pane (kind of.)

(IE/Mac also has Explorer Bars, but I don't know how to set them to arbitrary content.)

See the Bars: links on The Conversatron for a live example, assuming you're using a supporting browser. (Browsers that don't support either will generally pop open a new window on the IE link and do nothing or throw a Javascript error on the Moz link.)

To create an IE search pane, link to any URL with target="_search" in the A tag. To register a Mozilla sidebar it's slightly more complicated. The A tag should have an onclick handler that calls window.sidebar.addPanel(...) as documented here. The URL passed to addPanel had to be absolute for it to work for me.

Just like any other web page window or frame, by default links in the pane will retarget the same frame. To get something back into the main window, you need to add a target to the link (or form, you can have forms target the main window.)

On IE the main window is called "_main" and on Mozilla it's called "_content". (I guess Mozilla just couldn't bear to use the same name to save people just that little bit of trouble.) On The Conversatron both versions of the pane are served from a single CGI script. I don't try to sniff the browser type in the pane, browser sniffing is just getting more and more complicated. (Every one tries to spoof being everyone else. It's dumb.) The version links just pass a querystring variable to the script. The script then sets a variable "linktarget" to the browser-specific name, which is used when printing the topic links.