Having recently downloaded Firefox 3, I found their new location bar rather delightful, if not a bit overwhelming. I decided that I would like to have a similar control to use in my own web designs.
Using the code
Include the jawbar.js file in your
script tags. In the
window.onload event (or any event that occurs when the DOM is ready), create your
jawBar object and add any items you wish.
The constructor is very simple, and takes only one argument, the ID of the textbox you want to convert into an awesome bar.
var bar = new jawBar('myid');
<input type="text" id="myid"/>
object.add(options): Adds a new item to the awesome bar.
object.position(): Attempts to position a hidden
iframe for your awesome bar. You should need to call this, but if you alter your element's positions, you may have to.
object.show(): Makes the
iframe visible. Effectively shows the results of the search.
object.hide(): Hides the
iframe. Effectively hides your search results.
object.remove(index): Removes the item at index
index is not provided, removes all items.
add() method currently supports (and requires) the following options to be passed to it:
text: The text that will appear in the awesome bar.
subtext: The text that will appear in smaller, italicized letters under the text.
icon: The icon to display beside the item. Should be 16x16 pixels.
searchValue: The text that is actually searched when typing in the awesome bar.
displayValue: The text that will actually appear in the awesome bar when you click an item.
Coming next update....
Currently, if the
text property wraps to the next line, the
subtext may not display properly. I suspect this has to do with the
offsetHeight of the
div not being updated properly, as this only occurs in some browsers and not others.
I'm sure there are plenty of others. This code is more a concept than a finished product, so bugs and browser inconsistency is not unexpected.
Points of Interest
<select> elements do not obey the z-index order and are always on top. The one exception to this rule is an
iframe, which can cover the
<select>. Currently, this
iframe hack is used for all browsers, but I plan to make this IE6 only in the future.
- Wednesday, June 18 2008 -- Article created.