Making our module look better is quite easy, as we are only using plain HTML for now. A bit of jQuery won't do any harm; in fact, it will look much better.

For this example, I've one jQuery plugin in mind: the Vertical news ticker plugin. We can find it on the jQuery site by searching for "Vertical news ticker", or we can download it at the following link:

http://plugins.jquery.com/project/vTicker.

Download the plugin, place the jquery.vticker.js file in modules/mod_tinynews/js/, and we are done. We have the necessary tool for our example. Our next step will be to change the modules/mod_tinynews/tmpl/default_tmpl.php file, just some cosmetic changes, as follows:

<?php
            defined('_JEXEC') or die('Direct Access to this location is not allowed.'),
            ?>
            <div id="tinynews">
            <ul>
            <?php
            foreach($news as $new){
            echo "<li>";
            echo "<b>".$new->title."</b><br/><br/>";
            echo "".nl2br($new->text)."<br/><br/>";
            echo "</li>";
            }
            ?>
            </ul>
            </div>
        

We have prepared an unordered list of elements; the plugin will need that to move the elements. Our next change is in the modules/mod_tinynews/mod_tinynews.php file. Here we need to add the highlighted code:

...
            $document =& JFactory::getDocument();
            $document->addscript(JURI::root(true).'modules'.DS.'mod_tinynews' .DS.'js'.DS.'jquery.vticker.js'),
            $document->addscript(JURI::root(true).'modules'.DS.'mod_tinynews' .DS.'js'.DS.'tinynews.js'),
            ...
        

This will load the necessary jQuery plugin. Now we need to make the necessary plugin call. We will be doing that in our modules/mod_tinynews/js/tinynews.js file. We will replace its current contents with the following code:

jQuery(document).ready(function($){ $('#tinynews').vTicker({ speed: 2000, pause: 4000, showItems: 1, animation: 'fade', mousePause: true });
            });
        

We are calling the vTicker function on the #tinynews DIV—that's the DIV containing our unordered list of news. Let's take a quick look at the options:

These options will be very useful to modify the resulting effect. For example, I've added some more texts to our news, and our module now looks similar to the following screenshot:

I've tried to capture the moment of the fade, but it's much better to see it in action, so why don't you give it a try?