I would use a system like WebYep to get the news into your page. The loop features in that system would let you create a collection of stories as long as you like, with only one “template” version of the story actually drawn on the page in Freeway. The idea is that you put all of the stories into the page where you want the one story to appear, then take all of the stories back out using JavaScript and use that JavaScript to create the effect.
So let’s say your news is now structured like this in your rightpanel element (at least this is how the HTML that WebYep generates looks):
<div id="rightpanel" style="...">
<h3><a href="link/to/story">Headline</a></h3>
<p>A lovely description of the story</p>
<h3><a href="link/to/story">Headline</a></h3>
<p>A lovely description of the story</p>
<h3><a href="link/to/story">Headline</a></h3>
<p>A lovely description of the story</p>
</div>
Apply Protaculous to the page, and choose prototype-packed from the Library picker. Click on the top Function Body button, and paste in the following:
var rightpanel = $('rightpanel');
var stories = rightpanel.select('h3').each(function(elm){
elm['link'] = elm.down('a').href;
elm['description'] = elm.next('p').remove();
elm.update(elm.down('a').innerHTML).setStyle('cursor:pointer');;
elm.remove();
});
At this point, nothing is left in the rightpanel box, the headlines, links, and their descriptions have been collected by Prototype into an array-like structure called an Enumerable, and they are ready to use.
To put the headlines into your sidebar and make them clickable:
var leftpanel = $('leftpanel');
stories.each(function(story){
leftpanel.insert(story);
story.observe('click',function(evt){
rightpanel.update(this.clone(true)).insert(
this.description.insert(
' <a href="' + this.link + '">read more</a>'
)
);
});
});
Now the headlines are all in the leftpanel box, the rightpanel box is empty, and if you click on any of the headlines, the headline and teaser will appear, followed by the read more link.
The only decision left is what to do with the rightpanel when the page initially loads. If you want the first story to load, you would do something like this:
var story = stories.first();
rightpanel.update(story.clone(true)).insert(
story.description.insert(
' <a href="' + story.link + '">read more</a>'
)
);
You could also change first() to [rand(stories.length - 1)] and get a random story from the list.
Other details you could add would be to highlight the headline you’re showing on the left list.
Getting back to my premise here – the reason why you would put all the content into the page at first load is so that Google (which does not execute JavaScript when indexing your page) sees all of it, rather than just one story.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options