FF1+ IE5.5+ Opr8+

Ajax Tabs Content Script (v 2.2)

Author: Dynamic Drive

Note: Updated April 8th, 08 to version 2.2. Adds support for expanding a tab via a link on another page and using a URL parameter. Only .js file changed from v2.1

Description: This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. We got our inspiration for this script from Yahoo's homepage, which employs such a concept to show news in an organized fashion.

Here's a quick outline of the script features:

  • Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax.
  • (v 2.0) Apart from Ajax, an external page can also be fetched and displayed via the IFRAME element instead. This is useful for external pages that either contain JavaScript/ CSS code that doesn't run properly when fetched via Ajax, or the page is from an outside domain.
  • Add a "default" content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages.
  • Supports session only persistence, so the last tab user clicked on is remembered if he/she returns to the page within the same browser session.
  • (v 2.0) Supports auto mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
  • (v 2.0) Ability to also expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted.
  • (v 2.0) Ability to dynamically select a tab either based on its position within its peers, or its ID attribute.
  • (v 2.1) Ability to dynamically cycle forward/back between tabs. Create a "Next" and "Back" link for users to move between tabs, for example.
  • (v 2.2) A link from another page linking to the target page can select a tab on the later when loaded, via the URL parameter string ((ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0).
  • (v 2.0) Ability to directly load a different external page into the content container, either via Ajax or IFRAME.
  • (v 2.0) Ability to set where the CSS class "selected" get assigned when a tab is clicked on- either on the tab link itself (its "a" element), or its parent instead (ie: "li" element). This makes the script adaptable to both CSS Tabs that are styled at the "A" level itself, or its parent container instead.
  • (v 2.0) Supports nested Ajax Tabs! In other words, you can have an external page fetched via Ajax contain in itself Ajax Tabs that show their own contents when clicked on as well. This is made possible using the "onajaxpageload" custom event handler (see documentation).
  • Supports multiple Ajax Tabs Contents on the same page.
  • Fully unobtrusive, search engine friendly design. For search engines or browsers with JavaScript disabled, the external contents will just load as actual pages (instead of via Ajax).

As you can see, this Ajax Tabs Content script was designed to be much more than look pretty, but usable.

Reminder: Due to security limitations, the external pages loaded via each tab using Ajax must reside on the same domain as the script itself. This limitation doesn't apply if you use the "IFRAME" option to fetch and show the external page instead.

Demos:

Demo #1- Basic implementation

- First tab shows default, inline content directly added inside container DIV
- 2nd and 3rd tabs show external pages fetched via Ajax
- 4th tab shows an external page fetched via IFRAME

This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.

Dynamically select last Tab | Reload page and select 2nd tab using URL parameter


Demo #2- Expanding of arbitrary DIVs on the page enabled

- All tabs fetched via Ajax
- 2nd and 4th tabs also show/hide arbitrary DIVs when clicked on


Back Forward

Load "external2.htm" into content container via Ajax


Demo #3- All contents fetched via "IFRAME"

Load "Google Homepage" into content container via IFRAME


Directions

To add this script to your page, just download "ajaxtabscontent.zip", and refer to "demo.htm" inside for the full source code to the 3 demos you see above:

Setting up the script on your page- basic usage

Lets see in detail now how to set up this script on your page. After having added the .js and .css file references to the HEAD section of your page, as seen in demo.htm, proceed with the following:

Step 1: Define the HTML for the Tabs themselves. This can be a fancy CSS menu, or even just a DIV tag with a bunch of links inside. Lets use the former:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

The parts in red are significant, regardless of how you define your tabs:

  1. id="countrytabs": Give the main container of your tab links a unique ID (ie: "countrytabs"). All links ("A" elements) within this container will be scanned by the script for special meaning.
  2. rel="#default|containerid|#iframe": For each tab link that should reveal content when clicked on, add a "rel" attribute inside its link tag with one of three possible values: "#default", id_of_container_div, or "#iframe". This in combination with the link's href attribute determines what external file to fetch, and how to display it. Most commonly you'll be using containerid, which corresponds to the ID of the container DIV on the page in which to load the Ajax fetched content (see Step 2 below). "#default" and "#iframe" on the other hand are both special keywords. "#default" causes the tab to show no external content but instead what's embedded directly inside the container DIV, while #iframe causes the tab to show its content inside an IFRAME tag instead of via Ajax.
  3. rev="divid1, divid2, etc": For each tab link, you can also insert a rev attribute to simultaneously toggle the visibility of arbitrary DIVs on the page. See example #1 in the documentation page for more info.
  4. class="selected": If you wish a certain tab to be selected by default when the page loads, give the tab in question a class="selected" assignment. By default it should be added inside the link itself ("A"). However, the script can also be told to look for such as class in the link's parent container instead (in this case, "LI"). This is useful depending on how the CSS for your tabs are structured. See the documentation page for more info.
  5. A tab can also just act as a regular link, with the absence of the "rel" attribute (ie: the "Dynamic Drive" tab at the very end).

There is an additional attribute you can use, the "rev" attribute, to also expand/contract arbitrary DIVs outside the Tab interface. See the documentation below for details.

Step 2: Define a Content container DIV that will house the display of the external pages specified in the tabs above:

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>

The only required portion is the DIV itself with a unique ID assigned as highlighted in red. The content "//Optional default content here" that's added inside the DIV, is, well, optional. Define it if you wish a certain tab to show this content instead of external content fetched via Ajax or IFRAME. It's useful as the content for the tab selected by default when the page loads, to cut down on the trips the script has to take to fetch files from the server. To associate a tab with the default content of the container DIV btw, you would use the declaration rel="#default" inside the tab's link.

Step 3: With your Tabs and the container DIV both defined, it's now time to activate the script, by calling ddajaxtabs() with the desired settings:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

The first line tells the script the IDs of both your CSS tabs container and content container, in that order, with the variable "countries" being an arbitrary but unique identifier variable. The second line toggles the persistence of the tabs' state, whether or not a clicked on tab should be remembered and recalled upon the user's return (within the same browser session). The 3rd line tells the script whether to look for class="selected" within the tab link ("A") itself, or its parent container instead (ie: "LI"). What value to use depends on where you will be inserting the class="selected" attribute inside a tab. Lastly, the 4th line initializes everything.

And that's it for setting up the script in its basic form. However, you'll want to also learn how to expand/contract arbitrary DIVs on the page at the same time a tab is selected, plus how to get the tabs to automatically rotate like a slideshow. That's what the documentation below is for!

Adding default content to Ajax Tabs

While you can certainly configure the script so that every tab loads an external page, you might as well have a particular tab show content that already exists within the content container:

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>

Any HTML added inside the DIV above is the default content, and can either be shown if the script is not set to select any tab automatically, or if associated with a certain tab, so clicking that tabs shows this content. For the later, to associate the default content with a tab, just use the keyword "#default" instead of the ID of the container DIV inside the tab link's "rel" attribute:

<li><a href="#" rel="#default">Tab 1</a></li>

Syntax for specifying an external page to load

When specifying a tab to load an external page, either via Ajax or IFRAME, the path to the page is specified in the tab link's "href" attribute:

<li><a href="external.htm" rel="countrycontainer">Tab 2</a></li>

This assumes external.htm is in the same directory as where the Ajax Tabs script is. You use an absolute URL to the external page as well:

<li><a href="http://www.mysite.com/dir/external.htm" rel="countrycontainer">DHTML</a></li>

For Ajax fetched pages, You cannot, however, specify a URL that's outside your server's domain, such as "http://www.google.com/page.htm', as Ajax security dictates that the calling page and page to be fetched via Ajax must be from the same domain. This limitation doesn't apply to the IFRAME method.

This convention for specifying the page to load means the script downgrades 100% with JS disabled browsers and search engines, allowing them to load the links as normal pages.

Turning on slideshow mode

You can have the tabs within your Ajax Tabs Content automatically rotate every x seconds until a user explicitly clicks on a tab. To enable "slideshow mode" on your Tab Content, just pass in an integer when calling instance.init() to initialize your script:

<script type="text/javascript">

var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init(3000)

</script>

Notice the integer in red, which is in units of milliseconds. With one defined, the script will rotate through the tabs every x milliseconds (so 3000=3 seconds).

Expanding/ Contracting arbitrary DIVs on the page when a tab is selected

You already know that a tab can fetch external content either via Ajax or IFRAME via the "rel" attribute. However, you can in fact take this one step further, and also have the same tab manipulate the visibility of arbitrary DIVs on the main page itself! This is done using the "rev" attribute, and setting them to the ID(s) of the arbitrary DIVs on the page to also expand/contract. See example #1 in the documentation page for more info.

On the next page, we look in detail the three methods at your disposal to dynamically select a tab or load an external page into the Content Container from anywhere on your page.

Table Of Contents

This script consists of an index page plus a supplementary page:

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post