Update: alternative banner rotator for Moodle

Just to add to my previous post regarding adding banner rotators to Moodle I’ve also integrated an alternative option for people who want to have titles on each tab in the rotator.

It’s based on the ubiquitous jQuery UI extension from http://jquerytools.org/ using the Tabs tool. For full documentation see here and to download the .js file go here

Use the same process as in the previous post to enable the Javascript (to make it easy select the Include jQuery 1.7.2 option so you get everything you need in one file)

For the tabs you need this code in a separate .js file to activate them…

// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");

Edit: just tried to add this to my local dev site many months later and realised I haven’t put the embed code into this post, just to make your life easier here it is (also found in the documentation pages) 🙂

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>

<!-- tab "panes" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>

If you want to use images in the tabs and use the images to link just add standard <a> tags inside the divs in the “panes” section.

The clever stuff comes in the CSS file I’ve tweaked to do the following…

  • 3 tabs equally spaced along the top for a nice neat block style header
  • allows either text or images to be used in the box with neat layout… text gets padded by about 15px but images sit seamlessly in the corner
  • default size of the content area is 540px wide and 250px high
  • removed borders for neat, clean look to suit the aardvark theme

As I’m feeling very generous this week the CSS file is being uploaded to SkyDrive now…. download, test and enjoy 🙂

If you find it useful please leave a comment on this post…

Update: in testing the MyMobile theme I’ve decided that it’s best if the banner rotator doesn’t attempt to load in mobile view so added an extra tweak…

When putting the embed code in the front page add an extra set of divs e.g.

<div id="frontpagetabs"
tab code goes here

Then add some CSS to your mobile theme…

#frontpagetabs {

The banner rotator then disappears when using mobile view and reduces clutter on the front page 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: