Using <txp:article_custom> as a container allows some pretty neat effects when combined with jQuery. In this tip we’re going to use the jCarousel Lite jQuery plugin to make a list of headlines scroll upwards, revealed one by one.

The TXP code

Let’s assume you have a ‘news’ section in your TXP site and want to show each article’s title — one at a time — in a single row in the header of your site. Each permlinked title is displayed, there’s a pause of a few seconds, and then the next title scrolls up into view to replace the previous one. This repeats and cycles when it reaches the end of the list. The items are displayed in a random order in this example, but you can order them any way you wish.

The only extra thing to take into account is that since this is in your header — which may appear on both list and individual article pages — once somebody clicks on one of the articles and is reading it, you want to omit this article from the headline list.

<div id="news_scroller">

  <txp:hide>
     If we're on an individual article page we record the current article's ID
     in a txp:variable. If on a list page we use an article ID that does not exist
  </txp:hide>
  <txp:if_individual_article>
    <txp:variable name="this_art" value='<txp:article_id />' />
  <txp:else />
    <txp:variable name="this_art" value="9999999" />
  </txp:if_individual_article>

  <txp:hide>
     Only output non-expired articles that do _not_ match the current article
  </txp:hide>
  <txp:article_custom section="news" sort="rand()" wraptag="ul">
    <txp:if_expired>
    <txp:else />
      <txp:if_article_id id='<txp:variable name="this_art" />'>
      <txp:else />
        <li><span class="teaser">
          <txp:permlink>Latest:
          <txp:title /></txp:permlink>
        </span></li>
      </txp:if_article_id>
    </txp:if_expired>
  </txp:article_custom>
</div>

The javascript

Quite simply, include the jCarousel Lite plugin and then tell it we want to vertical scroll one item at a time with a 3.5 second pause between each item and an animation speed of 0.5 second:

<script type="text/javascript" src="/js/jquery.jcarouselLite.js"></script>
<script type="text/javascript">
jQuery(function() {
	jQuery("#news_scroller").jCarouselLite({
	    vertical: true,
	    visible: 1,
	    auto:3500,
	    speed:500
	});
});

That’s it. Of course, you may wish to supply a little CSS to pretty things up.