Class ListFocusManager: Navigate through a simple list


A simple JavaScript class to navigate on a list of items in an application Smart TV.




The most basic form of navigation in an application for Smart TV is through a list of items.

Unlike web development where the main method of interaction is the pointer and we can get fancy with UI elements such as accordions, file tree views, drop down lists etc. in an application for Smart TV we need to keep things simple and easy for the user because the main method of interaction are the keys on the remote control, so the fewer the actions the user needs to perform to accomplish what he wants the best.



Navigating on a list of elements within a container is easy; you just need an index that marks the focused element (current element), a method to navigate to the next element in the list and another method to navigate to the previous one.

However, despite being something very simple we have seen all kinds of implementations, from the most complicated to the most useless.

So for our needs for Smart TV development I create a simple class to navigate through a list using the keys on the remote control.

The Class

ListFocusManager is a class that creates one instance associated with a list of common elements inside a container in HTML markup:

<ul id="basic-list" class="list">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>

Usually for cases like these (list of elements, side menus, tab headers) I often use the structure of the image above, however the class can work with any group of elements within the same container.

To create an instance associated with this list, we need to call our class using the following syntax:

basicList = new ListFocusManager({ id: "#basic-list" });

Where id is the identifier of our list in the markup with which we want to relate our instance.

The simplest way to invoke the same instruction as above is the following:

basicList = new ListFocusManager("#basic-list");

There are a variety of options we can include in our instance, which we will see in detail later in the documentation section.

Once initialized our instance, a class focus will be added to the first element of our list:

<ul id="basic-list" class="list">
    <li class="focus">Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>

The focus class will serve as our indicator of the element that is currently selected in the list.

In order to move the CSS class within the list elements we can use the methods up and down in our class:

 // Moves the focus to the previous element. 

// Moves the focus to the next element. 

These methods are the basis of our navigation on the list. We can add these instructions to the remote control keys we need to move either horizontally or vertically.

// Vertical navigation. 
case tvKeyCode.ArrowUp: basicList.up(); break; 
case tvKeyCode.ArrowDown: basicList.down(); break; 

// Horizontal navigation. 
case tvKeyCode.ArrowLeft: basicList.up(); break; 
case tvKeyCode.ArrowRight: basicList.down(); break;

Similarly, this class adds listeners to the elements of the list to be selected with the pointer without disrupting the navigation via buttons.

Now, we have two methods of navigation in this class: normal and infinite.

In normal mode, when you get to the edges of the list (first or last element) it is not possible to continue navigation.

In infinite mode, when you get to the edges of the list it is possible to continue navigation towards the opposite edge continuously.



To enable this, you only need to add a true value to the property infinite in the options of the class:

basicList = new ListFocusManager({ id: "#basic-list", infinite: true });


For a more specification of the class, please check our ListFocusManager JSDocs page.


I have included a sample of a simple implementation to navigate over a list of elements using the ListFocusManager class.

The zip file includes three projects of the same implementation, one for web browser and two other sources codes for both Orsay and Tizen using the TOAST framework.

The style of the sample is based on Mary Lou’s Inspiration for Buttons Stules and Effects of Codrops, an excellent site about web design and development.

And that’s it! I hope this article has been helpful to you and that this class will help you build the best user interfaces for Smart TV!

Any comments or feedback about and for the improvement of this class is welcome.



4 + 9 =