administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

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>):

  1. <div style="display: none;" id="darken"></div>
  2. <div style="display: none;" id="qnav">Hotbox content comes here!</div>

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:

  1. #darken {  
  2. position:fixed;  
  3. top:0;  
  4. left:0;  
  5. width:100%;  
  6. height:100%;  
  7. display:none;  
  8. z-index:199;  
  9. background:black;  
  10. opacity:.7;  
  11. filter:alpha(opacity=70); /* Transparency in IE */  
  12. }  

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:

  1. #qnav {
  2. display:none;
  3. background:#fff;
  4. position: fixed;
  5. top:40%;
  6. left: 50%;
  7. margin-left: -100px;
  8. height:200px;
  9. width:200px;
  10. z-index:200;
  11. }

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:

  1. function isFormEvent(e) {
  2.    // this function checks if the supplied event came from a form element
  3.    es = e.target.nodeName;
  4.    return (es == 'HTML' || es == 'BODY' || es == 'DIV' || es == 'A' || es == 'FIELDSET' ? false: true);
  5. }
  6.  
  7. $(document).ready(function() {
  8.  
  9.    // when the user presses and holds the space key outside a form, launch the quicknav panel
  10.    $().keydown(function (e) {
  11.    // key pressed
  12.    if (e.which == 32) {
  13.      // space key pressed
  14.      if (!isFormEvent(e)) {
  15.        // space key pressed outside form (so not in an input element)
  16.        // darken background and show the navigation panel.
  17.        $('#darken').show(0);
  18.        $('#qnav').show(0);
  19.        // stop the default behavior (space is usually used as extra pagedown key)
  20.        e.preventDefault();
  21.       }
  22.     }
  23.    });
  24.  
  25.    // when the user releases the space key outside a form, hide the quicknav panel
  26.    $().keyup(function (e) {
  27.      // key pressed
  28.      if (e.which == 32) {
  29.         // space key pressed
  30.         if (!isFormEvent(e)) {
  31.            // space key pressed outside form (so not in an input element)
  32.        // lighten background and hide the navigation panel.
  33.        $('#darken').hide(0);
  34.        $('#qnav').hide(0);
  35.        // stop the default behavior (space is usually used as extra pagedown key)
  36.            e.preventDefault();
  37.         }
  38.       }
  39.     });
  40. });

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.

Next steps

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

Share |

Comments: 8
Reviews: 4
Average rating: rating
Highest rating: 5
Lowest rating: 3

COMMENT: KYLE SIMPSON emailhomepagerating

FEB 19, 2009 - 05:57:25 PM

comment » I love this idea. Really an innovative new way to provide navigation in web apps and RIAs. It's like combining the best of keyboard shortcuts with mouse navigation.

One question... I wonder if anyone really uses the default behavior of "spacebar" (which seems to be to down-scroll the page). I wonder if it'll irk them that they loose that? «

COMMENT: TREVOR GERZEN emailhomepage

FEB 19, 2009 - 06:52:37 PM

comment » I noticed that on my MacBook Pro in FF3 that when I hover over the box my cursor flickers. Haven't looked at it in any other browsers «

COMMENT: FERDY

FEB 20, 2009 - 07:58:30 AM

comment » @Kyle,

Thank you, now that is the kind of feedback I like :)

I think few people use the spacebar as pagedown key. In fact, I only discovered this behavior when my page scrolled after launching the panel, so I had to block the behavior.

@Trevor,

Thanks for the feedback. Unfortunately I have no Mac to reproduce this 16 «

COMMENT: VITOR PEREIRA emailhomepagerating

FEB 23, 2009 - 08:36:56 PM

comment » Great idea Ferdy! I really like it. The only downside for me is the use of the spacebar not so much because of the pagedown but because I use Ubiquity (an absolutely indispensable add-on for FF) which is activated using control+space. «

COMMENT: DILEEP K SHARMA emailhomepage

FEB 24, 2009 - 10:09:02 AM

comment » Great job Ferdy. Its really hot 01 «

COMMENT: KEYRO rating

MAR 6, 2010 - 11:49:58 P.M.

comment » any idea to avoid to get the key pressed? 01 «

COMMENT: TED

JUN 29, 2010 - 11:30:35 PM

comment » This is very sweet. DotNetNuke needs something like this, actually, to toggle Admin mode. Thank you for sharing this. «

COMMENT: DAVID emailrating

JUL 24, 2012 - 06:34:06 AM

comment » "Just because I can" - I love it!

Granted, this is years old, but my mouse freezes in FF12 while holding space. And that's why we now have a bazillion better ways, such as other hotkeys, tootlips, etc. But kinda cool none the less, and good for it's time. «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.