Appendix JS_C_A6-A7

Requirement: Timed activity can be controlled.

Details: Use scripting to create an alternative, static version of scrolling content.

<div>
    <button id="demo-pause-button" type="button">Pause</button>
    <button id="demo-expand-button" type="button">Expand</button>
</div>
<div id="demo">
    <ol>
        <li>
            <small>[17:40]</small> 
            <a href="...">Six Italian scientists and an 
            ex-government official have been sentenced to 
            six years in prison over the deadly 2009 
            earthquake in L'Aquila.</a>
        </li>
        <li>
            <small>[16:59]</small> 
            <a href="...">Security guards prevent a man 
            wielding a knife from attacking Finnish Prime 
            Minister Jyrki Katainen during a local election 
            campaign, officials say.</a>
        </li>
        <li>
            <small>[14:08]</small> 
            <a href="...">Lebanon's army urges political 
            leaders to be careful when expressing views, 
            in a bid to halt rising tensions after the 
            killing of a senior security official.</a>           
        </li>
        <li>
            <small>[13:25]</small> 
            <a href="...">Lance Armstrong is stripped of 
            his seven Tour de France titles by cycling's 
            governing body the UCI</a>
        </li>
    </ol>
</div>

var container = document.getElementById('demo');
var list = container.getElementsByTagName('ol').item(0);
var pauser = document.getElementById('demo-pause-button');
var expander = document.getElementById('demo-expand-button');
 
var scrollwidth = 0;
var items = list.getElementsByTagName('li');
for(var i = 0; i < items.length; i ++)
{
    scrollwidth += items[i].offsetWidth + 20;
}
 
var scrollstart = container.offsetWidth;
list.style.left = scrollstart + 'px';
 
var scrolloffset = scrollstart;
var moving = false;
var timer = null;
 
function pause()
{
    moving = false;
    window.clearInterval(timer);
    timer = null;
}
 
function resume()
{
    moving = true;
    timer = window.setInterval(function()
    {
        scrolloffset -= 5;
        if(scrolloffset < (0 - scrollwidth))
        {
            scrolloffset = scrollstart;
        }
 
        list.style.left = scrolloffset + 'px';
 
    }, 100);
}
 
pauser.addEventListener('click', function()
{
    if(moving)
    {
        pause();
        pauser.firstChild.nodeValue = 'Resume';
    }
    else
    {
        resume();
        pauser.firstChild.nodeValue = 'Pause';
    }
}, false);
 
expander.addEventListener('click', function()
{
    pause();
    container.className = 'expanded';
 
    pauser.parentNode.removeChild(pauser);
    expander.parentNode.removeChild(expander);
 
}, false);
 
resume();