Tab Panel Module

This module adds a three-tab panel with two columns of content in each panel and a static image.

Instructions

  1. Open the file ‘tabpanel.css’ in a text editor. Copy its contents and paste it into /css/ca_department.css.
  2. Move ‘tabpanel_corners.gif’, ‘tabpanel_tabs.gif’ and the sample image ‘tabpanel_photo.jpg’ into the images/ca_department folder. You may replace the sample image with your own.
  3. Open the file ‘tabpanel.js’ in a text editor. Copy its contents and paste it into /javascript/department.js.
  4. Open the file ‘tabpanel.html’ in a text editor. Copy its contents and paste it into your html file, where desired.
  5. Customize the html code by replacing the sample headings and links with your own. Text must be kept short to prevent breaking the layout.

Tab Panel Module Sample

Modification A: No Image or Using Different Dimensions for the Image

  1. The sample image is 123 pixels wide. If your image has a different width, update the CSS at line 48. Set the left margin to the width of your image. Add 27 pixels for padding around the image.
  2. If you do not want to include the image:
    a. Remove the class “contains_portrait_photo” from tabpanel.html, line 7.b. Uncomment the height property for the container in tabpanel.css, line 9. Adjust the height to fit your content.

Modification B: Change Two Columns to a Single Column

Update tabpanel.css (or the file where you now have this code) as shown below (line #3 below: ” width:100%“)

#tabpanel #tab_list ul ul li {

float: left;

width:100%;

background:transparent url(../images/ca_department/bullet_black.gif) 6px .3em no-repeat;

}

To change the height of the container, please update the tabpanel.css (line #5 below, third value, change “50px” to your new value.)

.block_with_image_and_tabpanel .image_container {

border: 1px solid #bcc5d0;

background:#fff;

padding:7px 7px 0px 7px;

margin:5px 0px 50px 5px;

Modification C: Change Bulleted List to Paragraph

Step 1: Add this code to your CSS file:

#tabpanel_1_sublist p {

white-space:normal;

margin:10px;

}

#tabpanel #tab_list ul ul#tabpanel_1_sublist li {

float: left;

width:96%;

background:none;

}

Step 2:  Your new <ul> will look like this:

<ul id=”tabpanel_1_sublist” class=”list_decorative_dark”>

<li>

<p>Your paragraph goes here…</p>

<span class=”bottom_right”></span>

<span class=”bottom_left”></span>

</li>

</ul>

Modification D: Add More Tabs

NOTE: We do not recommend using long tab headings or applying any more than five tabs.

HTML

  1. Copy and paste content of Tab:<li id=”tabpanel_3” onmouseover=”tabpanel_mouseover(this);” onmouseout=”tabpanel_mouseout(this);”><a href=”#” class=”tab_link”>Standard Tab</a><ul id=”tabpanel_3_sublist” class=”list_decorative_dark”><li><a href=”#”>Link C 1</a></li><li><a href=”#”>Link C 2</a></li>…
  2. <li><a href=”#”>Link C 7</a></li><li><a href=”#”>Link C 8</a><span class=”bottom_right”></span><span class=”bottom_left”></span></li>

    </ul>

    </li>

  3. Change “tabpanel_3” and “tabpanel_3_sublist” to: “tabpanel_4” and “tabpanel_4_sublist”
  4. Repeat for Tab #5

CSS

Modify you CSS file in two places to add new styles

  1. li#tabpanel_1, li#tabpanel_2, li#tabpanel_3, li#tabpanel_4, li#tabpanel_5 {
    background: #7E98BA url(../images/ca_department/tabpanel_tabs.gif) 0px -60px no-repeat; /* normal tabs */margin: 0;float: left;display: inline;padding: 0;}
  2. #tab_list li.tabpanel_default, #tabpanel_1:hover, #tabpanel_2:hover, #tabpanel_3:hover, #tabpanel_4:hover, #tabpanel_5:hover {
    background: #E8EFF6 url(../images/ca_department/tabpanel_tabs.gif) top left no-repeat; /* Hovered tab background */}

JAVASCRIPT

Modify your javascript file. Add the last the four lines below addressing tabpanel 4 and 5

function tabpanel_mouseover(node)

{

var panel_1_width = document.getElementById(“tabpanel_1_sublist”).offsetWidth; // Needed for IE

document.getElementById(“tabpanel_1”).className = “”; // De-activate default item

node.className = “tabpanel_default”; // Activate the hovered item

if (panel_1_width) {

if (document.getElementById(“tabpanel_2_sublist”))

document.getElementById(“tabpanel_2_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

if (document.getElementById(“tabpanel_3_sublist”))

document.getElementById(“tabpanel_3_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

if (document.getElementById(“tabpanel_4_sublist”))

document.getElementById(“tabpanel_4_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

if (document.getElementById(“tabpanel_5_sublist”))

document.getElementById(“tabpanel_5_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

}

}

Modification E: Replace static image with Random Image

Prerequisite: You’ve added the Tab Panel module with the static image.

Directions:

Step 1: Replace this html code:

<div class=”image_container”><img src=”images/ca_department/tabpanel_photo.jpg” alt=”Photo” /></div>

with:

<div class=”image_container” id=”random_image”>

<noscript>

<div><img src=”/images/sample1.jpg” alt=”Sample photo 1″ /></div>

</noscript>

</div>

Step 2: Replace the sample image with one of your own. This image will be shown if the visitor has disabled javascript.

Step 3: Add this code to the end of your department.js file:

///////////////////////////////////////////////////////////////////////

function randomImage() // Random Image function

{

var iNumImages = 5; // Number of images

var aSource = new Array(iNumImages); // Path to the images

var aAlttext = new Array(iNumImages); // Alt text

var iRandomNumber = Math.floor(Math.random() * iNumImages);

// Enter the root-relative paths to your images

aSource = [

“/images/sample1.jpg”,

“/images/sample2.jpg”,

“/images/sample3.jpg”,

“/images/sample4.jpg”,

“/images/sample5.jpg”,

];

// Enter the alt tags for your images

aAlttext = [

“Sample photo 1”,

“Sample photo 2”,

“Sample photo 3”,

“Sample photo 4”,

“Sample photo 5”,

];

if ((document.getElementById) && document.getElementById(‘random_image’))

document.getElementById(‘random_image’).innerHTML = ‘<img src=”‘ + aSource[iRandomNumber] + ‘” alt=”‘ + aAlttext[iRandomNumber] + ‘” />’;

}

addLoadEvent(randomImage); // Add randomImage to the page onload event handler

///////////////////////////////////////////////////////////////////////

Step 4: Customize the script by entering the paths and alt tags for your images into the variables aSource and aAlttext. For the variable iNumImages, enter the number of images you have defined.

0 Comments

Submit a Comment