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:
It is important to note that these styles modify the base styles. Therefore, we need to load our stylesheet after the jScrollPane, as follows:
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/jj15/css/jScrollPane.css" type="text/css"
/>
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/jj15/css/styles.css" type="text/css" />
Do you think we are done? No, we can still do more.
Wouldn't it be nice to have scrolling capabilities in our scroll? Sure it
would, and as it's something easy to achieve, we are going to do it. If you
have downloaded the jScrollPane bundle, inside you will find a file
called jquery.mousewheel.js
. If not, you can download
this useful plugin from:
http://plugins.jquery.com/project/mousewheel.
Or, search the jQuery site for "mouse wheel extension". Once we have a
copy of the plugin, we need to place it in the template's
js
folder and then link it in our header, as in our previous
examples:
<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15/js/jquery.mousewheel.js"></script>
After we have done so, we will be able to scroll with our mouse wheel.
We are done with the jScrollPane plugin, and I encourage you to check all the possible options on their site:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html.
There are lots of great possibilities. Just check them!
3.145.11.227