CSS news ticker

challenge: is it possible with CSS?

[Darkelve]

I want to create a news ticker for our homepage. But I was wondering if this was possible without any Javascript. This is my basic chunk of code:

<div style="background-color: #ffffcc; border: 1px solid black; padding: 4px; font-size: 0.8em;">
<strong>News</strong>:
<a href="myurl.html">Newsitem 1</a> - <a href="myurl.html">Newsitem 2</a> - <a href="myurl.html">Newsitem 3</a>
</div>

As you can see, there is one link in there. However, I want to provide 2 'left' and 'right' buttons/arrows (maybe make it so they are links?) so they can call up the next (or previous) news item.

*Only one* of these newsitems should be visible at one time, i.e. when you select an arrow, the next (or previous) link will become visible in the news box.

[createErrorMsg]

CSS can't do anything with a button click, and it doesn't have any way to remember the state of an element, so I'm going to say this isn't possible without scripting.

However, you could keep the JS to a minimum by coding all of your news items into the html, assigning each one a unique ID, stacking them on top of each other and then setting all but one to display:none;. You would then have to use JS to toggle between them, using the click of the arrow to change the visible item's ID to display:none and the next item to display:block.

You would also have to use the JS to remember which item in the list is currently active in order to have an arrow click cycle through them.

cEM