Disabling and Hiding Buttons on a Thumbnail Toolbar

  • Article

This task describes how to change the state of a toolbar button, or hide buttons from view.

Note  The Thumbnail Toolbar is not available with Pinned Sites in Internet Explorer 10 on the new Windows UI.

 

  • Methods Used in this Task
    • msSiteModeUpdateThumbBarButton(nButtonID, fEnabled, fVisible)
  • Disabling and enabling buttons
  • Hiding toolbar buttons on page unload
  • Next Steps
  • Related topics

Methods Used in this Task

The following method is introduced in this topic:

msSiteModeUpdateThumbBarButton(nButtonID, fEnabled, fVisible)

You use the window.external.msSiteModeUpdateThumbBarButton method to change the state of a Thumbnail Toolbar button. Because all buttons must be added to the toolbar before the it is displayed, this method gives you control over which buttons are visible or active.

Disabling and enabling buttons

The Channel9 Podcast Player sample application uses Previous and Next buttons to navigate through an audio play list. These buttons detect when they reach the beginning or end of the list and disable themselves. In other words, the user cannot click the buttons to progress beyond either end of the list.

The following script first calls the msSiteModeUpdateThumbBarButton method and using true in the fEnabled parameter to enable both buttons. Then, based on the position of the current podcast, it disables either the Previous or the Next button.

function updateNextAndPrevButtons(podcastID)
{
    try {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeUpdateThumbBarButton(btnNext, true, true);
            window.external.msSiteModeUpdateThumbBarButton(btnPrev, true, true);

            if (podcastID == 0) {
                window.external.msSiteModeUpdateThumbBarButton(btnPrev, false, true);
            }
            else if (podcastID == podcasts.length - 1) {
                window.external.msSiteModeUpdateThumbBarButton(btnNext, false, true);
            }
        }
    }
    catch (e) {
        // Fail silently.
    }
}

Hiding toolbar buttons on page unload

A Thumbnail Toolbar might remain visible as long as the Pinned site window is open, regardless of the webpage that is displayed. However, if the user navigates to a different webpage, the Thumbnail Toolbar buttons stop working because an event handler is no longer available. To avoid this condition, always hide your toolbar buttons when a user leaves the webpage.

During the onunload event, call the msSiteModeUpdateThumbBarButton method and use false in the fVisible parameter to hide the toolbar, as shown in the following code example.

function hideButtons() {
    window.external.msSiteModeUpdateThumbBarButton(btnPrev, true, false);
    window.external.msSiteModeUpdateThumbBarButton(btnPlayPause, true, false);
    window.external.msSiteModeUpdateThumbBarButton(btnNext, true, false);
}

<body onunload="hideButtons()"> ... </body>

If the user clicks the Back button, the toolbar appears again because it is recreated during the page onload event.

Next Steps

Sometimes, button states are mutually exclusive. One button might become inactive while another is active, such as with the Play and Pause buttons. Rather than using two separate buttons, these commands might be combined into a single button that toggles between two states. For more information, see Toggling Button State on a Thumbnail Toolbar .

Tasks

Creating a Thumbnail Toolbar for a Pinned Site

Responding to Clicks on the Thumbnail Toolbar

Toggling Button State on a Thumbnail Toolbar

Conceptual

How to Create Thumbnail Toolbars

Introduction to Pinned Sites