This is another extension that I like a lot. I know I'm always telling you that the extensions and plugins we see are great. But I hope you agree with me.

The developers of these extensions have done great work with them, and I think I'm very enthusiastic in developing our site. But enough talk, let's continue with our work.

This time we are going to see the jScrollPane plugin. With this plugin, we will be able to create a scrollbar in any DIV we want.

For example, take a look at the central module zones on our site:

Those zones are quite practical, though a bit small. If we place a large amount of text on them, we may not be able to see all of it. Let's try it! Just open the Administrator screen of our site; then we can go to Extensions | Module Manager, and then click on New and later on Custom HTML.

Place this module in the module_5 position of our template. Then add some demo content to it. It should look more or less as follows:

Here you can see an example of exactly what we were talking about. When we have quite a long paragraph of text, we need more space for it to be shown. But we don't have the space. Wouldn't it be great to incorporate a scroll bar, not the browser ones, but better ones that looked like the rest of our site, with the same style and look?

Get ready! That's just what we are going to do. First, we need to download the plugin. We can look for it in the jQuery page by performing a search for "jScrollPane", or by visiting the developer's site:

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html.

Once downloaded, the steps to have our scroll bar ready are a few. But let's go step by step. First search for the jScrollPane.js file, or something similar—the version number really doesn't matter.

This file needs to be placed in the templates/jj15/js folder, and as in the previous examples, we need to add a script tag in our template header:

<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15/js/jScrollPane.js"></script>
                

With this done, we also need to link another file—this time a CSS file. Look for a file called jScrollPane.css or similar. This file contains the basic styles for the plugin to work. So we need to place it in our templates/jj15/css folder.

Later in our template, we need to include it as follows:

<link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/jj15/css/jScrollPane.css" type="text/css" />
                

We now have the basic files ready, but we need to make some changes to our template file. Open the templates/jj15/index.php file. If you are going to use the module_5 position, search for the following code:

<?php if($this->countModules('module_5')) : ?>
                    <div id="module_5">
                    <div class="pad">
                    <jdoc:include type="modules" name="module_5" />
                    </div>
                    </div><!-- End module 5 -->
                    <?php endif; ?>
                

We can modify this code as follows:

<?php if($this->countModules('module_5')) : ?>
                    <div id="module_5">
                    <div class="pad">
                    <div id="scroll_1">
                    <jdoc:include type="modules" name="module_5" />
                    </div>
                    </div>
                    </div><!-- End module 5 -->
                    <?php endif; ?>
                

We are almost done. We only need to make the function call. The basic way is as follows:

<?php if($this->countModules('module_5')) : ?>
                    <div id="module_5">
                    <div class="pad">
                    <div id="scroll_1">
                    <jdoc:include type="modules" name="module_5" />
                    </div>
                    </div>
                    </div><!-- End module 5 -->
                    <script type="text/javascript">
                    jQuery(document).ready(function($) {
                    $('#scroll_1').jScrollPane();
                    });
                    </script>
                    <?php endif; ?>
                

We call the jScrollPane function over our newly created scroll_1 DIV. With this our site will look similar to the following screenshot:

Now our scroll_1 DIV has a scrollbar applied to it, but somehow disappears at the bottom. This is because of the DIV height. Well, as we haven't defined a height for our DIV, it uses the limits of the module_5 DIV. Let's give it a height in our template's css/styles.css file:

#scroll_1{
                    height: 322px;
                    }
                

With this little modification, our module position will look similar to the following image:

Now we can notice the difference between the slider track and the drag. It is much better now, isn't it?

But we can also modify the style a bit, and this is quite easy to achieve. For example, add the following styles to the template's css/styles.css file:

.jScrollPaneDrag {
                    background: #B40000;
                    }
                    .jScrollPaneTrack {
                    background: #DADADA;
                    }
                

Now our module will look like the next screenshot:

Do you think we are done? No, we can still do more.

<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15/js/jquery.mousewheel.js"></script>