Spatial Navigation

By  on  

Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply HTML5 wrapped in a chromeless browser shell (Gecko) so most apps require spacial navigation to ensure the physical television remote is useful.  Mozilla's Luke Chang has created SpatialNavigation to make implementing JavaScript navigation easy and flexible!

SpatialNavigation boasts features like:

  • Completely stylable focus elements
  • Definable regions
  • Integration with jQuery
  • Awesome performance

A simple example usage of SpatialNavigation:

// Initialize
SpatialNavigation.init();

// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
  selector: 'a, .focusable'
});

// Make the *currently existing* navigable elements focusable.
SpatialNavigation.makeFocusable();

// Focus the first navigable element.
SpatialNavigation.focus();
<body>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="focusable">Div 1</div>
  <div class="focusable">Div 2</div>
</body>
/* Add style to the focused elements */
a:focus, .focusable {
  outline: 2px solid red;
}

While the demo above is fairly simple, we know that dynamic apps are not simple.  The SpatialNavigation repository features more than a dozen unique example usages of the utility, from the most basic to very complex.  I encourage you to explore these demos to see all that SpatialNavigation has to offer.

Spatial navigation can also play a role on desktop websites; many sites these days use a flexbox grid layout which could make great use directional arrows.  You'd need to be careful about CMD+up and CMD+down for full page scrolling, of course, but spatial navigation in that space would be useful.

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

Discussion

  1. John

    I wish I saw this post 6 months ago when I was building a prototype for a set top box interface!

  2. Karun

    People working on #FirefoxOS #KaiOS feature phones UI development should see this.

  3. I’ve been working with this and i’m having a persistent problem. My page links open a new page that loads a mp4 video. when I use the back button on the d-pad it returns to my main page but the focus is defaulted to the first focusable element on the page but I really want it to come back and the last focused element before I left the page should be defaulted. so frustrating. here’s the working site http://loopzine.tv/firetv.htm
    anyone have a solution?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!