I've used the awesome
jquery library and
TexoTela's Newsticker plugin. These javascript libraries do the cute visual stuff and automatically take care of cross-browser issues. In this example they are driven by
Scott's News Articles Latest module.
First you need to put jquery.js and jquery.newsticker.js on your server. Then place a reference to these libs in the header section of your News Articles Latest module, which you will find under Module Settings / Advanced Settings. In the example below i assume that you placed these libs in a directory named "JS" in your portal's root. Please notice that the names of the libs may differ, because there are different download options (minimized, packed versions etc.).
<script type="text/javascript" src="http://www.mysite.de/JS/jquery.js"></script>
<script type="text/javascript" src="http://www.mysite.de/JS/jquery.newsticker.pack.js"></script>
|
Please note, that this is just a hack, you would normally place these script-references in the head-Section of your page. This is why i asked Scott to provide a [RegisterOnce] tag which could take care of this.
Next comes the code which actually starts the NewsTicker. This is placed in the footer section of the module (Module Settings / Advanced Settings), although it might work at any place, because it uses the jquery document.ready event to start the action when the document is loaded.
<script type="text/javascript">
jQuery(document).ready(
function()
{
jQuery("#news").newsticker();
}
);
</script>
|
That's all Javascript that is need for the Fading Newsticker. Now comes the content. How does the Newsticker know what to fade? Easy enough. The NewsTicker looks for an unordered list with id ="news" and class="newsticker". So all you have to is to create something like:
<ul id="news" class="newsticker">
<li>my first news</li>
<li>my second news</li>
<li>my best news</li>
</ul>
|
To create the above content i used the News Articles Latest module. In the View options use the Simple Layout and place something like that in the template areas:
HTML Header:
<ul id="news" class="newsticker">
|
HTML Body:
<li>
<a href=[LINK]>[TITLE]</a>
<p>[IMAGETHUMB:100] by [AUTHORUSERNAME] ([PUBLISHSTARTDATE])</p>
<p>[SUMMARY]</p>
</li>
|
HTML-Footer:
That's it! Let the magic happen.
Hope this helps,
Joe