Share via

Making Buttons and Other Elements Focusable

  • Article

Each template is linked to script that enables the remote control to move the focus among focusable items, based on the location of the items on the page. You can create new buttons or other focusable elements in the template pages by copying and pasting similar elements found in the templates. You can also make almost any element focusable by following these steps:

  1. In the element's tag, set the MCFocusable attribute to "true". The script checks for this attribute to determine whether an item should be focusable.

  2. In a linked style sheet file (or in a STYLE element in the HTML page) create a new style class for your element, and add the behavior:url(hilite.htc); attribute. Then add any style attributes you want for your element in its non-focused state. Your new class should look something like this:

    .myButtonStyle {behavior:url(hilite.htc); BACKGROUND: #aaaaaa; 
    WIDTH: 251px; HEIGHT: 51px; FONT-WEIGHT: bold; FONT-SIZE: 20pt;
    font-family: arial; color: #f2f2f2;}

  3. Style classes for focusable elements are always created in pairs: one style class for the non-highlighted state, and one for the highlighted state. To create your second class, paste a copy of your new class from step 2 directly below the original. Add "_hilite" to the end of the class name. Then change attributes such as background color or text style, as needed, to display the highlighted state. The two classes together should look something like this:

    .myButtonStyle {behavior:url(hilite.htc); BACKGROUND: #aaaaaa; 
    WIDTH: 251px; HEIGHT: 51px; FONT-WEIGHT: bold; FONT-SIZE: 20pt;
    font-family: arial; color: #f2f2f2;}
.myButtonStyle_hilite {behavior:url(hilite.htc); BACKGROUND: #aaaaaa;
    WIDTH: 251px; HEIGHT: 51px; FONT-WEIGHT: bold; FONT-SIZE: 20pt; 
    font-family: arial; color: orange;}

  4. Assign your class from step 2 (the non-highlighted class) to your HTML element. The element should look something like this:

    <span id="Left1" class="myButtonStyle" MCFocusable="true">Button Text</span>

The new element should now be focusable. Be sure that your page contains links to the BasicFunctions.js and MoveFocus.js JScript files. Also be sure that the URL in your behavior attribute from step 2 points to the correct location of the HTC file. Notice that the Main.css file from the sample templates already contains several different classes for focusable elements. If these suit your purposes, you can link to one of them instead of creating a new one, and skip steps 2 and 3.

See Also