Creating a ticker tape

Visual appearance

When content initially appears, it always does so by scrolling in from one side. It never appears in place at the same time as the widget itself. This would often result in the user missing the start of the text since it would not draw attention to itself by movement until it had already scrolled away the initial part of the content. The scrolling is cyclical, so when all items have been displayed it starts again at the beginning.

User interactions

When a user selects the Ticker Tape widget itself or a focusable item displayed inside it, the scrolling stops, and then resumes again when the user selects something else outside of the widget. If the user clicks on the focusable item, then the link is opened.

Note:

The Ticker Tape widget must have a layout associated with it, to separate its content from the container. If none is specified then it will behave the same as the body element.

XDIME 2 elements

The widget:ticker-tape element is the containing element.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:ticker-tape</title>
  </head>
  <body>
    <widget:ticker-tape id="myTickerTape" class="ticker">
      <span>The Ticker Widget is a sideways-scrolling display area. </span>
      <span>Its purpose is to display information such as news headlines, stock prices, weather
        conditions etc</span>
    </widget:ticker-tape>
  </body>
</html>

The Ticker Tape widget is able to refresh its contents periodically, at intervals that can be specified in the widget:refresh action.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:template="http://www.volantis.com/xmlns/marlin-template"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>Ticker Tape Widget with AJAX</title>
    <link rel="mcs:theme" href="/themes/main.mthm"/>
    <link rel="mcs:layout" href="/layouts/main.mlyt"/>
    <style type="text/css">
      #myWeatherTicker {
        width: 99%;
      }
      #myWeatherTicker > span{
        padding-right: 10em;
      }
    </style>
  </head>
  <body>
    <template:apply href="templates/demo-main.xdtpl">
      <template:binding name="title" value="Ticker Tape w/AJAX"/>
      <template:binding name="content">
        <template:complexValue>
          <widget:ticker-tape id="myWeatherTicker" class="widget">
            <widget:refresh src="service/ticker?id=myWeatherTicker" interval="15"/>
            <span>Ticker Tape can be configured to periodically refresh its content
              by fetching data, such as weather conditions, from a web service...</span>
          </widget:ticker-tape>
        </template:complexValue>
      </template:binding>
    </template:apply>
  </body>
</html>

The response:ticker-tape element provides a way for the Ticker Tape widget to refresh its content.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head>
    <response:link rel="mcs:theme" href="/main.mthm"/>
  </response:head>
  <response:body>
    <response:ticker-tape id="myWeatherTicker">
      <span>Current weather conditions - last update 2007-02-23 12:27</span>
      <span><a href="http://www.berlin.de">Berlin</a>: 25°C, partly cloudy</span>
    </response:ticker-tape>
  </response:body>
</response:response>

Styling the widget

You can use the mcs-marquee-direction, mcs-marquee-speed, and mcs-marquee-repetition properties to style the widget. Use the mcs-frame-rate property to specify the frequency required when displaying visual effects such as transitions, or scrolling.

A Ticker-Tape may take the focus, even it does not contain any focusable elements, if you use the focus pseudo-class on the element. The default value for this pseudo-class is 'accept'. If you specify 'ignore', users will not be able to action contained elements unless they can take the focus.

Note:

You can add separators between items in the widget content using the ::before and ::after pseudo-elements.

Non-client fallback

If the device does not support the Ticker Tape widget then it displays all the content at once, and it cannot be updated from the server.

JavaScript

This widget supports JavaScript. Refer to JavaScript support for details.