Article: Coding a jQuery hotbox »
FERDY CHRISTANT - FEB 18, 2009 (04:09:20 PM)
I've always wanted to be good in 3D modeling. It is pure magic. It allows you to create anything you imagine in a photo realistic way. If you have the skills that is. I clearly don't, and I do not have the time to acquire them. Still, I like to occasionally play around in programs like Blender and Maya, just to see what it is like.
What is common about these programs is that their user interface is highly complex. Users want to have large views of their object, whilst also having a massive amount of controls on screen. Challenging. I've found out that most 3D programs use a so-called hotbox to make common options more accessible. Here's Maya's hotbox:
A hotbox like this is launched when the user presses and holds the spacebar, and is automatically closed upon releasing the key. The shortcut is an overlay on the currently active screen, and provides quick shortcuts depending on the context. By associating it with a large key like the space bar, this is a very accessible way for power users to increase their productivity.
As I am building a rather complex web application myself, I asked myself the question: why do we not have hotboxes on the web?
I've never seen one in a web application. Hence, I create one. Just because I can. Welcome to Coding a jQuery Hotbox.
What we will be building
We will be building a hotbox for the web using jQuery, some simple markup, and some clever CSS. We will use the spacebar as the key to activate it. When it is activated, we will dim the background of the page whilst preserving the opacity of the hotbox panel, much like the popular Lightbox technique. We will not use the Lightbox library though. We want something simple and fast without bloat.
Time to point you to the demo: jQuery Hotbox online demo
Go ahead and tryout the effect: press and hold the spacebar key to launch the hotbox. If you want to know how this is done, please download the Hotbox demo and open the project files in your favorite IDE or text editor.
Building the Hotbox demo - markup
Ok. I am assuming that you have the source files of the demo open. If not, I will at least point you to the most important parts, starting with the markup. Most of the markup in the source file is needed only to layout the demo page. The only relevantt section occurs just before the body close tag (</body>):
This markup contains just what you might expect: a "darken" div that we will use the dim the background, and a "qnav" (quick navigation) div that will contain our hotbox menu. The "darken" div is empty and initially set to not be visible. The "qnav" div is not visible either, and contains a simple text. Note that you can place any markup inside the hotbox div, depending on your needs. The above fragment of markup you should typically place outside the "flow" of your page layout divs.
Building the Hotbox demo - CSS
The demo HTML file has a head section that refers to two external stylesheets: main.css and reset-min.css. The latter is a CSS reset stylesheet. It is not really needed for this demo, but a good practice in general web development. The main.css file contains all styles used in the demo. Most of them are not relevant, they are needed to style the layout of the demo page. Let's have a look at the relevant parts:
The darken div is supposed to dim the entire screen, except for the hotbox panel. From the CSS you can see that we are declaring a layer of 100% width and height. There are a few specific things thata require our attention here:
- Line 2. By default, setting a width and height to 100% means a 100% of the visible screen, not the page. This is clearly visible when we have a page that scrolls, the dim effect would stop dimming below the scrolling area. To overcome this, we need to set the position to "fixed", not "absolute".
- Line 8. The z-index value is important, since we want to overlay the current screen. This value needs to be higher than the z-index of all other screen elements, yet at least 1 lower than the hotbox's z-index.
- Line 9-11. These rules set the color and opacity of the dim effect, feel free to adjust these to your own needs.
That was fairly easy. Now on to the styles for the hotbox. I have eliminated some irrelevant styles for brevity:
The most important lines for the Hotbox rules:
- Line 2. Hide the Hotbox by default.
- Line 4. We are again using the position:fixed rule to prevent scrolling issues
- Lines 5-9. Positioning and sizing the Hotbox. The margin-left rule is half of the width, this will center it.
- Line 10: The z-index of the Hotbox, this value needs to be higher than everything else
That is all the styling we need. On to the jQuery!
Building the Hotbox demo - jQuery
The HTML of the demo page has a reference to two external js files: jquery.js, and main.js. The jQuery file is obviously jQuery itself, version 1.3.1. The main.js file contains our logic for the Hotbox:
Let's have a look at the most important lines:
- Lines 1-5. Here we are declaring a global function that checks where the received event came from. See, we do not want the launch the Hotbox when a user presses the spacebar inside an editable element, such as a text box. Unfortunately, IE (as always!) behaves much different in detecting the event source than other browsers do. Therefore we have to do this the ugly way.
- Line 7. Start of our runtime code.
- Line 10. Capture the keydown event (this is different from the keypressed event!)
- Line 12. Check if it was the spacebar.
- Line 14. Check if the spacebar key down did not come from a form
- Lines 17-18. Show the dimmer (darken div) and the Hotbox (qnav div)
- Line 20. Prevent the default behavior of the spacebar key (usually it is an alternative pagedown key)
- Lines 26-39. Here we are doing almost the same thing. This time we capture the keyup event, check if it is a space not coming from a form, and then hide the dim and Hotbox.
That's all! It's a good thing we did this from scratch, it is a very lightweight solution.
Surely you should use this as a base and extend it, here are some ideas:
- Playing around with the dim color and opacity.
- Using animations for the launch and closure of the Hotbox. Personally I am against this, as it let's the user wait for nothing.
- Most importantly: filling the Hotbox with a useful menu that helps users!
- Even cooler: Inside the Hotbox, capture other key events, so that users can control the Hotbox using arrow keys.
- Way cool: Using irregular Hotbox shapes, such as a circle for a navigation menu. This can be accomplished using transparent PNG images.
A word of warning
Finally, I'd like to end this article with a word of warning. If you are to use the Hotbox in a real web application, be aware of the following:
- No user will be familiar with such a shortcut, therefore you need to explicitly tell them
- Do not use a Hotbox for primary navigation, because of the previous reason. A hotbox is a shortcut, it is not to replace regular navigation.
- The Hotbox breaks the convention of the spacebar being used as an alternative page down key. You can either accept this violation, or you can tie the Hotbox to another key.
The demo was tested to work with Firefox 3, IE7, Opera 9.63 and Safari 3.2.2, all on Windows Vista.
Hotboxes. Somewhat strange on the web, yet possible a nice innovation? Please rate/comment below...