Click here to Skip to main content
12,305,151 members (71,128 online)
Click here to Skip to main content
Add your own
alternative version

Stats

38.8K views
183 downloads
42 bookmarked
Posted

JavaScript Awesome Bar

, 18 Jun 2008 BSD
Rate this:
Please Sign up or sign in to vote.
A JavaScript implementation of Firefox's "Awesome Bar".

jawbar.png

Introduction

jawBar is a JavaScript implementation of Firefox 3's "Awesome Bar". While not a perfect implementation, it does contain a similar look and feel.

Background

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.

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

Constructor

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"/>

Methods

  • object.add(options): Adds a new item to the awesome bar. options is a JavaScript object containing the text you want to add, among other things.
  • object.position(): Attempts to position a hidden div and 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 div and iframe visible. Effectively shows the results of the search.
  • object.hide(): Hides the div and iframe. Effectively hides your search results.
  • object.remove(index): Removes the item at index index. If index is not provided, removes all items.

Add() Method

The 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.

Technique

Coming next update....

Bugs

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

In IE6, <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.

History

  • Wednesday, June 18 2008 -- Article created.

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

Helbrax
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralNicely Done! Pin
DFU231-Jul-08 5:16
memberDFU231-Jul-08 5:16 
GeneralRe: Nicely Done! Pin
Helbrax1-Jul-08 5:31
memberHelbrax1-Jul-08 5:31 
GeneralRe: Nicely Done! Pin
DFU231-Jul-08 5:58
memberDFU231-Jul-08 5:58 
GeneralRe: Nicely Done! Pin
Helbrax1-Jul-08 7:50
memberHelbrax1-Jul-08 7:50 
GeneralRe: Nicely Done! Pin
Balkrishna Talele1-Jul-09 21:04
memberBalkrishna Talele1-Jul-09 21:04 
GeneralThe BSD License Pin
SAMir Nigam18-Jun-08 21:00
memberSAMir Nigam18-Jun-08 21:00 
GeneralRe: The BSD License Pin
Guido_d18-Jun-08 22:43
memberGuido_d18-Jun-08 22:43 
GeneralRe: The BSD License [modified] Pin
SAMir Nigam18-Jun-08 23:01
memberSAMir Nigam18-Jun-08 23:01 
AnswerRe: The BSD License Pin
Helbrax19-Jun-08 1:37
memberHelbrax19-Jun-08 1:37 
GeneralRe: The BSD License Pin
SAMir Nigam19-Jun-08 1:45
memberSAMir Nigam19-Jun-08 1:45 
GeneralRe: The BSD License Pin
Helbrax19-Jun-08 1:59
memberHelbrax19-Jun-08 1:59 
GeneralRe: The BSD License Pin
SAMir Nigam19-Jun-08 2:34
memberSAMir Nigam19-Jun-08 2:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160530.1 | Last Updated 18 Jun 2008
Article Copyright 2008 by Helbrax
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid