Question

I have very little HTML knowledge, so this is probably a very trivial question. I would really appreciate any help!

When I’m creating presentations with the LaTeX beamer class there is the very useful command:

\begin{itemize} 
\item<x-> Alpha
\item<x-> Beta
\item<x-> Gamma  
\end{itemize}

This creates three bullet points that appear incrementally after a mouseclick or forward/backward arrow like in Powerpoint for example.

I would like to have the same function in a .html file for very long lists, maybe more than 50 items. So it really wouldn’t work in a slide environment, but only in a browser by scrolling down.

Is there an easy way to achieve this with HTMl5 or jQuery or some other way? Googling throws up thousands of presentation tools, and I don’t really know where to begin.

Answer 1

With jQuery you could bind a keypress event to the window, and show the next list item every time a key is pressed:

var curIndex = 0;
$(window).keypress(function() {
   $("li").eq(curIndex).show();
   curIndex++;
});

To make this work with only the arrow keys, a slight change is required (you need to use keydown instead of keypress):

var curIndex = 0;
$(window).keydown(function(e) {
    if(e.keyCode === 37) {
        if(curIndex > 0) curIndex--;
        $("li").eq(curIndex).hide();
    }
    else if(e.keyCode === 39) {
        $("li").eq(curIndex).show();
        if(curIndex < 3) curIndex++; 
    }
});

Your HTML list will look something like this:

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

The list items will need to be hidden by default, using something like li { display:none } in your CSS.

Also note that the above example does not handle the case when the last element is shown – what were you intending to happen in this case?

Here is an example fiddle showing this in action (you need to click on the “Result” frame to give it focus, then press any key to trigger the event handler).