mfSlideBar: Sliding sidebar for Joomla modules

Placed in: Home

A common problem in web design is having a lack of space. mfSlideBar gives you a fancy Web 2.0 solution for this problem. Simply place modules in to a nice sliding side bar on your Joomla! website.

You can place any module in to this sliding sidebar and you can set your own theme / style. mfSlideBar is very flexible and comes in sliding from the left or the right of the page.

Want to have a nice Web 2.0 sliding sidebar showing your modules on your website? mfSlideBar is your solution.

mfSlideBar works with Prototype.js.

Demo (movie)

In this demo, I'm showing the "simple" and "light" theme, loading different module positions. Sorry for the bad demo, but I hope you get the idea.

Install on Joomla! 1.0.x

Log in to your back-end of the site
Go to "Installers", "Modules"
Click on "Browse" and navigate to the downloaded ZIP archive
Press "Upload File & Install"
Go to "Modules", "Site Modules"
Search for mfSlideBar and edit it
Set your parameters
Save and publish the module

Install on Joomla! 1.5

Log in to your back-end of the site
Go to "Extensions", "Install/Uninstall"
Click on "Browse" and navigate to the downloaded ZIP archive
Press "Upload File & Install"
Go to "Extensions", "Module Manager"
Search for mfSlideBar and edit it
Set your parameters
Save and publish the module

How to use

mfSlideBar allows you to add a nice sliding sidebar to your Joomla! website.

Setup

Publish this module on any position. Set the module position it should load and other paramaters and you're ready to go.

Never use the same module position as it's loaded in. For example, when you placed mfSlideBar in position "left", do not load other modules from position "left". Otherwise you'll create an infinate loop & your website will crash.

Change the "Image width" to the width of the original image in px when placing mfSlideBar on the right, otherwise it will not show up properly in every web browser.

This module is best viewed when "Show title" is set to "No".

Themes

mfSlideBar comes default with three themes: dark, light & simple. They look like this:

To create your own theme, add them in hem in the following directory:

modules/mod_mfslidebar/templates/

Now create a directory starting with your theme name and if it's placed on the left or right. Seperate those with a "-" symbol. Add your own "slide-button.gif" and "slide-button-active.gif" that fits your template. Place your template in your module parameters and you're done.

Example:

modules/mod_mfslidebar/templates/newTemplate-right/

Don't forget to publish this module!

Download

Feel free to give feedback about this module. Enjoy using it!

Update

For those who have problems loading the module inside mfSlideBar, Erik has provided the following fix:

Open mod_mfslidebar.php in any text editor.
Go to line 41 and remove it (the jdoc:include line)
Replace it with the following:

 
<?php
   jimport('joomla.application.module.helper');
   $myblurb_modules = &JModuleHelper::getModules( $loadmodule );
   /* loop through the array and render their output */
   foreach ($myblurb_modules as $myblurb) {
      echo JModuleHelper::renderModule( $myblurb );
   }
?>

Thanks a lot Erik!

moofSlideBar - mfSlideBar for MooTools

Adam Kempenich and John-David Dalton managed to port this plugin to use Mootools. You can download this script now (for Joomla! 1.5.x)!

Thanks a lot Adam and John-David, for bot improving my script and sharing it with the community.

Interested in this topic? You might enjoy another article I've written called

Comments

Add New

RSS

Sergio - how to use prototype.js

2008-04-17 17:28:54

Hi,

first of all let me congratulate about all you work, this is soooo good.

Can you help me with the use of prototype.js with Joomla? how do I install this?

best regards,

srj