Further Ideas: Using Dynamic Jump Lists

This topic discusses the idea of using dynamic Jump Lists for a local events site by using geolocation and the Bing Maps API. Other ideas for using dynamic Jump Lists are also discussed.

Examples

The following table provides examples of dynamic Jump Lists that have been customized for various types of websites:

Type of siteUsage
News Site
  • Post headlines for the section that the user pinned
  • Post headlines for the most discussed articles
Sports Site
  • Post times for upcoming games that the user is interested in
  • Post articles about the user's favorite teams and players
Video Site
  • Recommend videos based on what the user has watched before
  • Recommend the most popular videos
Local Events Site
  • Dynamically populate a Jump List category with events near the user's location by using the Geolocation API. (See example later in this topic.)

 

Using Location-Aware Jump Lists for a Local Events Site

You can use a combination of geolocation and dynamic Jump Lists to create a Pinned site that stays current with local events in the user's area. This example uses the Geolocation API and the Bing Maps API to determine the locality of your browser.

By using the Geolocation API, which is supported by Windows Internet Explorer 9, you can approximate a user's location (latitude and longitude). The user can decide whether to allow the site to use geolocation, and the user can save these settings for each site.

In the following example, the getCurrentPosition method returns the user's current location as latitude and longitude. Next, the script passes the location to the Bing Maps REST service, and retrieves the locality (city name) from the XML response. Finally, the setJumpListLocation function creates the title of the Jump List category from the corresponding city name.

The script requires a Bing Maps Key, which you can acquire without charge by following the directions described in Getting a Bing Maps Key. To test the script, you must replace the YourBingMapsKeyHere placeholder with your key.


<script type="text/javascript">
window.onload = function() {
    if (window.external.msIsSiteMode()) {
        navigator.geolocation.getCurrentPosition(successCallback);
    }
}

function successCallback(position){
    // Use the position to locate the user geographically
    try {
        var point = position.coords.latitude + "," + position.coords.longitude;
        var addr = "http://dev.virtualearth.net/REST/v1/Locations/" + point +
                 "?o=xml&key=YourBingMapsKeyHere";
        var xhr = new XMLHttpRequest();
        xhr.open( "GET", addr, true );
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 && xhr.status == "200" ) {
                var city = xhr.responseXML.selectSingleNode("//ResourceSet/Resources/Location/Address/Locality");
                document.getElementById('output').innerHTML = city.text;
                setJumpListLocation(city.text);
            }
        };
        xhr.send(null);
    }
    catch(ex) {
        alert(ex.message);
    }
}

function setJumpListLocation(city) {
    window.external.msSiteModeCreateJumpList(city + " Events");
    // Add events here.
    window.external.msSiteModeAddJumpListItem("TEST","TEST","TEST");
    window.external.msSiteModeShowJumpList();
}
</script>
</head>

<body>
<p>Your location is: <span id="output">unknown</span>. </p>
</body>


Note  For simplicity, this example uses a cross-domain request, which is subject to the browser's same origin policy. Websites often work around this restriction by using a simple web proxy service on the web server to request content from another domain in the backend, thus circumventing the check within the browser.

Using Dynamic Jump Lists for a Music Site

You can use a dynamic Jump List to help the user navigate to different stations on an Internet radio Pinned site.

The following image shows how Slacker.com uses a dynamic Jump List to display links to stations for their Internet radio website.

Jump list of Slacker.com Internet radio stations

Using Dynamic Jump Lists for a Movie Information Site

You can use a dynamic Jump List to alert the user to news and reviews about the most popular movies.

The following image shows how RottenTomatoes.com uses a dynamic Jump List to display links to" What's Hot On Rotten Tomatoes".

Jump list showing "What's Hot On Rotten Tomatoes"

Using Dynamic Jump Lists for a Shopping Site

You can use a dynamic Jump List to:

  • alert the user to sales
  • alert the user to new releases
  • allow the user to view orders that were previously placed
  • contact customer service
Jump list showing "Amazon Favorites"

Related topics

Tasks
Further Ideas: Using Notifications
Further Ideas: Using Thumbnail Toolbars
Conceptual
Badge Notifications, directly on your Windows 8 Pinned Site
Fresh Tweets 2.0 - demo for Windows 8
High Quality Visuals for Pinned Sites in Windows 8
How to Create Dynamic Jump Lists
Introduction to Pinned Sites
How to Create a Location-Aware Webpage
Pinned Sites in Windows 8

 

 

Show:
© 2014 Microsoft