Treasure Chest Toolbar

The "Treasure Chest" Toolbar(TCT) allows me to compact most of the links you would find on a home page into one tiny expandable icon that is at your mouse-tip. The real trick is to get it all to work using frames. Here are some details:

Basically Speaking
Technically Speaking
Hints and Tips
Why Do It?

Basically Speaking...

• You get more screen space to display the information you want. TCT replaces all the wasted space and clutter of site links. It shrinks to a small icon when not in use.
• Wherever you are, TCT is right behind you. TCT follows the mouse and stays just to the upper right. Move the mouse over TCT, wait 1/2 second and TCT displays virtually all the links in the site at your finger tips. Move off TCT and it shrinks and follows the mouse again. 
• You can stop TCT following the mouse at any time. Position TCT where you want and click the icon. TCT will not move as you scroll through a page or navigate the entire site. TCT will popup immediately when in this mode(no 1/2 second wait). You can start floating at anytime by clicking the icon again. 
• Links are just one click away. Add this to above and navigating anywhere is simple.
• TCT stays on top of all other information so you can find it easily.
• Multiple Dimensions allow you to drill down to what you want making it easier to find what you need.
• TCT uses the site color theme you choose for a smooth integrated look. Change your theme and TCT adjusts automatically. 
• Disabled buttons. The top level buttons are disabled when the page is already being viewed. You can see what not to click. If you make a mistake and click the button, nothing happens. Saving everyone time from accidental reloads.
• Buttons highlight when you move over them so you can see what you are doing. If they can be clicked the cursor changes to a hand.
• If you don't like the little yellow help boxes you can stop them. Click "Hide Hints" in the configuration options. The button will change to "Show Hints" so you can turn them back on.
• Three configurable views... your choice:
  1. Icons Only - This view shows buttons with just icons. Something like Windows application toolbars. TCT will display icons horizontally with sub menus displaying below the icon. The icons are noticeably larger than "Icons&Text" option. Saves the most space.
  2. Text Only - This view shows buttons with just the text. All buttons are placed vertically.  This is the fastest and uses less space than "Icons&Text".
  3. Icons&Text - This is the best way to view this site. The buttons show both graphics and text and the buttons are displayed vertically. If you use less than 800x600 resolution you may want to choose option 1 or 2. Since the graphics only account for around 8kb total there is no real speed issue.
• Settings are saved for you. As soon as you change any configuration settings they take effect immediately plus the new settings are saved and used on future visits.

Technically Speaking...

TCT works the way you think it should thus you probably don't notice many of the technical solutions to achieve this "feeling". Here are some...

• As far as I know this can not be accomplished in any type of multiple frames environment without using "Iframes". Technically my "main" Iframe could load a standard frames page thus creating the floating effect above standard frames. Iframes are supported by IE4+ and NN6+(90%+ of total surfers). Standard frames can not be overlaid and thus can not achieve this function. 
• TCT was built for this site. It was not designed as a distributable package although the design did consider this for future releases. It is is a prototype.
• TCT technically uses 3 Iframes for the 3 levels of options. This means more complexity in communication between menus but gives a more pleasing experience for the user plus more design options for the developer.
• The "Floating" is simple in a page with no frames but this site like many sites does have frames. That makes a few issues...
  • I need to overlay TCT over one or more frames(stay on top). More importantly TCT must be able to overlay multiple frames at the same time. TCT has to be in it's own Iframe(s) to allow this.
  • Frames are independent and do not communicate together automatically. This means I have to "pass" TCT between frames in a seamless motion but only when TCT is "floating". Each frame must keep "state" of several items. Each frame must handle it's positioning of TCT independently.
  • Since we are using frames there are issues with positioning. TCT is relative to the entire window but X/Y co-ordinates are relative to the specific FRAME! This is important to keep in mind. A lot of work went into this so it was easier for you.
  • Since the "main" IFRAME displays various documents the solution is more challenging. Need a script that handles all variations of pages plus allow for exceptions. I then added a script block to every page(I got big side bonuses from this so it was OK).
  • A simple solution was keeping TCT on top(set to highest z-index). Under laying submenus was better than overlaying. 
  • This toolbar was built this way specifically to demonstrate the capability to "float" over multiple frames. The number of frames and their layout would have to be considered for your installation.   
• The buttons keep track of their own "State" in a frames environment. Best to explain this by example... If you click on "Products" the button is disabled and the products page is displayed. If you then click "Contacts" the products button is returned to normal and the Contacts button is disabled(no big deal). Now click the "Back" button in your browser. Notice the buttons have adjusted, products are disabled, Contacts are enabled. If this were not a frames page this would be simple(hardcode)! Since this is multiple frames each frame has to know what all other frames are doing. TCT has to be told that the main frame has changed and adjust accordingly. TCT has to determine how to "adjust accordingly". I only make this work on top level buttons due to other design considerations but it could work at all levels.
• Another state demonstration is the configuration submenu. TCT can be in one of three display states(Icons/Text/Both). The submenu does not display the button that represents the currently selected state. This dynamically changes depending on the state of TCT. This demonstrates hiding options rather than disabling them.  
• A third state demo is buttons stay highlighted while navigating submenus. If you move to the submenu of Demos then submenu of How To Demos notice the Demos and How To Demos buttons both stay highlighted? Watch as you switch options. Notice TCT adjusts properly. Another one of those things that works the way you think it should.
• Now that I use frames and I position/collapse/expand them to suite my needs coding these functions was much more complex.
• The user can not place TCT over my logo. Attempts to stop floating while over my logo result in a message informing user they can't do this.
• Keeping track of everything at the mouse move level added complexity. Exactly when should I hide that submenu?...and get it to work properly every time. This makes TCT truly dynamic in appearing/disappearing as needed and creates the "One Click" to virtually any link.
• Demonstrates 2 different toolbar looks...Configurable first layer, whatever is needed on second and third layers.
• Remembers configuration via cookies.
• Demonstrates dynamically adjusted horizontal and vertical layouts. Uses different button sizes, content and positioning. When the submenu should appear and other issues must be adjusted.
• Changes to toolbar configuration only affect TCT. The whole site is not refreshed(only techies notice this).
• Required a special delay timer to handle moving mouse to the upper right without popping up TCT immediately. Previously as soon as the user made a movement to the upper right TCT would popup(problem of real fine tuning). If the user was just moving the mouse across the screen TCT would popup/hide over and over. Timer disadvantage is user has to wait 1/2 second over the icon. The delay only occurs when floating, make TCT stationary and it pops up without delays. 
• I use "button" html tags instead of DIV for buttons. It gives the nice 3D effect better. Normal INPUT tags do not allow color, images or anything cool(standard gray). 
• Trying to keep the minimized toolbar just the right distance from the cursor has been challenging. Had to go through lot's of variations to get this right, regardless of screen resolution, window size,  position or user changing any/all of these while viewing the page.  
• Although the expanded toolbar is "boxy" looking it is possible to use the same concept and create a toolbar any shape you want. I just didn't do it here because this is a space saving demo.
• There is no true transparent Iframe. It uses the background color of the frame it is positioned over when it loads. This is really noticeable when the theme has one color for the border frame and another color for the main frame. The Canada Eh! theme demonstrates this. Move TCT over the red border area to see what I mean. It sucks but the solution would make the icon "disappear/jump" when crossing over frames so this is lesser evil. 
• This toolbar was designed to be very sensitive to user interaction. This was required to allow for the mouse move level of interaction. Sometimes I find it too sensitive.
• I could have hidden TCT and made it popup when the user right clicked the mouse but that would have replaced the normal right click menu. I want people to be able to look at the source, besides the user would have to "click" one extra time ;-)
• I am looking at having the submenus dynamically switch sides depending on available space. The third submenu(or 4,5,6...) is the major consideration. Especially if you want to get fancy with your submenus.
• There are at least a few items I could have done better but this is a demo. If it were production I would have the test team and all the bugs would be worked out. If I wanted to distribute it I would clean it up noticeably.
• For some reason TCT does not go above most selection lists or the graph in the savings calculator demo. This is browser/component issue...nothing I can do:-( 

Hints and Tips

• When moving the mouse to the upper right TCT may popup when you stop moving. It is best to go past the location you want to position the mouse then move any way except up/right to position the mouse where you want.
• If you have less than 800x600 resolution you should not use "Icons & Text". Although TCT will still work it must be in the upper left corner to see all three levels on your screen.  
• Once you are familiar with TCT you will probably want to turn off those yellow help boxes. You can do this by selecting "Hide Hints" from the configuration menu.
• If you intend to stay on a single page for a while turn off floating. Turn it back on when needed.
• Popup TCT on the left side of page to ensure you have space to display all submenus. 
• You can not position TCT over my logo.

Why Do it?

You might notice there is no need to save space on this site. So why do all this work? Like most of this site it is the concepts that are being emphasized. Many things this toolbar does easily may be critical for medium/large business. Many companies have fights(sometimes literally) over who can be on the home page. Just think what you could do with a lot more space. What about the customer that keeps clicking the button before the page loads. This causes headache to your customer, you and the network. The difficulty has always been to do this in a multiple frames/windows environment. Now you know it can be done. Want me to help do it?