A few features of the ticker:

• The ticker pulls its contents from the default SharePoint Announcements list using jQuery.
• The title of the announcement links to the display form for the item
• Ticker pauses on mouseover
• For each Announcement the first 500 characters are shown as an intro.

Here is the code it can just be pasted in a content editor web part. The only dependency is jQuery. The code for the ticker came from this post on Net Tuts Plus. I removed the comments but you can see the commented code and an explanation here.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="ticker.js"></script>
	<script type="text/javascript">
       $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Announcements</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='Body' /> \
                               <FieldRef Name='ID' /> \
								<FieldRef Name='FileDirRef' /> \
								<FieldRef Name='Created' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
        	var teaser = $(this).attr("ows_Body");
        	var teaserText = teaser.slice(0,500);
        	var urlValue = $(this).attr("ows_FileDirRef");
			var urlArray;
			var urlName;
			     if (urlValue == undefined)
	    	{
      		urlName = "";
        	}
        	else {
        		urlArray = urlValue.split(";#");
        		urlName= urlArray[1];
        	}     	

            var liHtml = "<dt class='newsItem'><a href='/" + urlName + "/Dispform.aspx?ID=" + $(this).attr("ows_ID") + "'>"
            + $(this).attr("ows_Title") + "</a></dt><dd>" + teaserText + "</p></dd>";
            $("#ticker").append(liHtml);
        });
	$(function() {
		var ticker = $("#ticker");
		ticker.children().filter("dt").each(function() {
		  var dt = $(this),
		    container = $("<div>");
		  dt.next().appendTo(container);
		  dt.prependTo(container);
		  container.appendTo(ticker);
		});
		ticker.css("overflow", "hidden");
		function animator(currentItem) {
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
			animator(currentItem.parent().children(":first"));
		  });
		};
		animator(ticker.children(":first"));
		ticker.mouseenter(function() {
		  ticker.children().stop();
		});
		ticker.mouseleave(function() {
		  animator(ticker.children(":first"));
		});
	  });
        }
</script>
<style type="text/css">
#ticker {
  width:180px; height:420px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
  font:normal 14px Georgia; padding:0 10px 5px 10px;
  background:#e5e5e5 url('/_layouts/images/keyword.gif') no-repeat left 60%; padding-top:10px; padding-left:22px;
  border:1px solid #ffffff; border-bottom:none; border-right:none;
}
#ticker dd {
  margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
  border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
  border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;  }
#ticker div { margin-top:0; }
</style>

<div class="myclass">
		<dl id="ticker"/>
</div>

Related posts:

1. Image Slideshow with captions
2. Annoucements Slider using SP Web Services
3. Adding Suggestions to the Sharepoint search box : Part 2

Too Much Code

The only issue is the preview pane solution is that in environments with slow internet connections the preview pane will be almost as slow as if the user actually broswed to the display form for the item.

Although its done through AJAX jQuery is still having to load the whole DispForm.aspx and then only displaying the contents of  a specific element.  DispForm.aspx when rendered through the borwser (like most pages in SharePoint) is very code heavy with over 700 lines of code ( An Announcement List item). Reducing the amount of code jQuery has to load from the diplay form will decrease load times and make everyone happy.

Faster

Gabe Hilado and I decided to try to make it faster. The simple solution is to make your own diplay form in SharePoint Designer. First we tried creating a blank .aspx page and putting the list view webpart on it.  The reduced the amount of code on the page but I wanted it to be even faster.

The next step was to use a dataview webpart only displaying the fields we needed for the preview. The result was a page with under 100 lines of code (varies based on the item legnth). 

Below is the modified javascript.

<script src=<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js</a>" type="text/javascript"></script>
<script type="text/javascript">
function handleError() { //fn needed for IE
return true;
}
function jLoadMe(t) {//load content

$("#jLoadMe").load(t+" .ms-formtable", function(result,status,xhr) {
$("#jLoadMe h3").css("font-size","8pt");
});
}
function initjLoadMe() {//initialize page
var arrayList = $("a[href*='DispForm.aspx']");
$.each(arrayList, function(i,e){
var t = $(e).attr("href");
t = t.replace('DispForm.aspx','empty.aspx');
$(e).hover(function() {jLoadMe(t)});
});
}
$(function() {
window.onerror = handleError; //needed for IE
initjLoadMe();
});
function jLoadEdit(t) {//load content
$("#jLoadMe&quot;).load(t+" .editForm",  function(result,status,xhr) {
$("#jLoadMe h3").css("font-size","8pt");

});
}
</script>
<div id="jLoadMe" class="content"></div>

What’s going on

The code has been modified so that onhover instead of calling DispForm.aspx it calls empy.aspx. However when the item title is clicked the browser will nagivate to the traditional DispForm.aspx.

Related posts:

1. Switch List Displays with JQuery and CSS
2. Adding Comments to a List Part 2
3. SharePoint Vertical News Ticker