Having equal size columns will make our design look much better, and it's not going to be so hard. First of all, we are going to download one plugin that's going to help us with our task. Just visit this page:

http://www.cssnewbie.com/equalheights-jquery-plugin/.

Download the jquery.equalheights.js file and place it in components/com_tinynews/js/. In order to include it, we are going to again edit the default.php file to add the necessary addScript method:

...
                $css = JURI::base().'components/com_tinynews/css/frontend_style.css';
                $document->addStyleSheet( $css );
                $js = JURI::base().'components/com_tinynews/js/ jquery.equalheights.js';
                $document->addScript($js);
            

After doing so, we need to call the plugin method; we will do that after the previous code:

$js = "
                jQuery(document).ready(function($){
                $('.news_box').equalHeights();
                });
                ";
                $document->addScriptDeclaration($js);
            

The addScriptDeclaration method will help us add our code to the header of our site and will be executed on document ready. If we now try to reload our site, we will see that, thanks to the plugin, our columns will have exactly the same height. Want to take a look? Check the next screenshot:

Why don't you try it on your own site? As you have seen, it's quite easy to accomplish. Also, don't forget to check the plugin's author website (http://www.cssnewbie.com/equalheights-jquery-plugin/) as there are some other interesting options that you can use:

As always, you can find these two files in the equal_heights folder of the code bundle for Chapter 9. Take a look at the folder in order to see the necessary changes. Of course, you will need to download the plugin.

Now that we have our columns with equal heights, what can we do to enhance our component? Well, as the section title itself is quite self-explanatory, I think the surprise effect has been lost.

But don't worry, to compensate, we will see a very interesting plugin; just keep reading. This time we are going to use the Quick Paginate plugin. As always, you can find it by searching on the http://jquery.com/ page or by browsing to this link:

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

After downloading the plugin, we need to place it in our js folder, components/com_tinynews/js/jquery.quickpaginate.js. Soon we will be seeing how versatile this plugin is. But first, we need to include it in our components/com_tinynews/views/tinynews/tmpl/default.php file. To do this, we will add the following code:

$js = JURI::base().'components/com_tinynews/js/ jquery.quickpaginate.js';
                $document->addScript($js);
            

And now it's time to change the code that we use for our addScriptDeclaration method. In our first example, we are going to make the call for quickpaginate in its default way:

jQuery(document).ready(function($){
                $('.news_box').equalHeights();
                $('#news_container div').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') });
                });
                ";
                $document->addScriptDeclaration($js);
            

We will take a look at the options in the call. But first, we will finish the example so that later, when we have a working copy, we can make changes and see the results.

Our next necessary step is going to be to create a container for our news_box DIVs and another one for the pagination elements. Take a look at the following code:

<div id="news_container">
                <?php
                foreach($this->news as $new){
                ?>
                <div class="news_box">
                <h1><?php echo $new->title; ?></h1>
                <p><?php echo $new->text; ?></p>
                </div>
                <?php
                }
                ?>
                </div>
                <div id="news_container_page">&nbsp;</div>
            

As you can see from the previous code, we have created a news_container DIV that will contain all the other DIVs created in the foreach loop. And at the end, we have news_container_page that will contain the paginator elements.

Some styles are also needed and we need to add them to our frontend_style.css file. In fact, we are only going to add the following style:

#news_container_page{
                float: none;
                clear: both;
                text-align: center;
                }
            

If the jquery.quickpaginate.js plugin is not working, we will need to make one small change to it. Open the jquery.quickpaginate.js file and look for the following line:

var pagerNav = $('<a class="'+settings.prev+'" href="#">&laquo; Prev</a><a class="'+settings.next+'" href="#">Next &raquo;</a>'),
            

Change it to:

var pagerNav = jQuery('<a class="'+settings.prev+'" href="#">&laquo; Prev</a><a class="'+settings.next+'" href="#">Next &raquo;</a>'),
            

With all these elements in place, we can take a look at our site. The next screenshot shows us the output:

Good, we are now able to go from one page to another in just one click. Nice, isn't it?

And before continuing, let's take a look at the options of our call (discussed previously):

$('#news_container div').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') });
            

The options are as follows:

However, we can also change the classes for styling the elements. Take a look at the following plugin page to see the options:

http://projects.allmarkedup.com/jquery_quick_paginate/.