New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

Ajax Tabs Content documentation

The following documents Ajax Tabs Content script, from its HTML structure to the methods you can call to further manipulate it.

HTML Syntax:

<head>
<link rel="stylesheet" type="text/css" href="ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>
<body>

<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>

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

<script type="text/javascript">

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

</script>

  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. "#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 simultanously toggle the visibility of arbitrary DIVs on the page. See Example #1 below.
  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.
  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).

Main script function and methods syntax:

ddajaxtabs() constructor function and methods
Constructor Description
new ddajaxtabs(CSSTabsId, contentContainerID)

Required

Main ddajaxtabs() constructor function to create a new instance of Ajax Tabs Content.

Parameter:

  • CSSTabsId: ID of the container that surrounds your tab links. Typically a DIV or a UL element.
  • contentContainerID: ID of the DIV that the fetched content will be displayed in.

Example:

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")

Methods

Description

instance.setpersist(true/false) Tells the script whether to persist the tabs' state for the duration of the browser session. If enabled, the last clicked on tab is remembered and recalled upon the visitor's return.

Parameter:

  • true/false: Boolean value (true or false without quotes around it!).
instance.setselectedClassTarget(targetstring) Changes the element the script sifts through to locate a class="selected" declaration (which tells the script to select that tab by default). By default the script expects the declaration to be inserted directly inside the tab's link ("A") element:

<li><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2" class="selected">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>

If you insert class="selected" elsewhere in the tab's hierarchy (ie: the "LI" element instead), the script will no longer select that tab by default, as it doesn't know to look for the declaration there.

Based on the way your tabs are styled, you may want to add class="selected" to the parent container of each tab link instead. For example, this may be appropriate for the below sample tab links which are each contained in a DIV tag:

<div><a href="#" rel="tcontent1">Tab 1</a></div>
<div class="selected"><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>

To inform the script to search each tab's parent container for this CSS classname, you would invoke:

instance.setselectedClassTarget("linkparent")

The two keywords supported for the lone parameter are "link" or "linkparent".

Parameter:

  • targetstring: A string with two possible values: "link" or "linkparent". The default is the former, telling the script to look for class="selected"  inside each tab's link itself. The later tells the script to look for this CSS class in each of the tab's parent container instead.
instance.init(optional_integer)

Required

Call this function at the very end to initialize this instance of Ajax Tabs Content. You can pass it an optional integer parameter to put the script into slideshow mode, so the tabs are automatically rotated when the page loads based on a time interval until the user clicks on a tab.

Parameter:

  • optional_integer: An optional parameter that if defined puts the tabs in slideshow mode (so they auto rotate). The valid value is an integer in milliseconds (ie: 3000 means 3 seconds), to set the delay between rotation.

Examples:

countries.init() //Just start up the script for this tab instance

countries.init(4500) //Auto rotate through the tabs every 4.5 seconds for this tab instance

Additional method(s)

Description

instance.expandit(tabid_or_position) This method lets you dynamically select any tab based on either its ID attribute (you need to first assign one to that tab), or position relative to its peer tab links. The method can be called anywhere on the page, such as inside a link on the page.

Parameter:

  • tabid_or_position: Either a string representing the tab link's ID, or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab).

Example:

Based on the following sample tabs layout:

<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" id="favorite">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>

Here is how to dynamically select two of its tabs anywhere on the page:

<!--Selects 2nd tab within Tab instance "countries" -->
<a href="javascript:countries.expandit(1)">Select 2nd Tab</a>

<!--Selects tab with ID="favorite" within Tab instance "countries" -->
<a href="javascript:countries.expandit('favorite')">Select "Roses" tab</a>

instance.cycleit("next/prev") v2.1 method This method lets you move back or forth between tabs. It's very useful for creating "Next" and "Previous" pagination links. The method can be called anywhere on the page, such as via a link on the page.

Parameter:

  • "next/prev": Enter either "next" or "prev" as its lone parameter.

Example:

Based on the following sample tabs layout:

<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>

Here's how to create "forward" and "back" pagination links:

<a href="javascript:countries.cycleit('prev')">Back</a> | <a href="javascript:countries.cycleit('next')">Forward</a>

 
instance.loadajaxpage(pageurl) Use this method to directly load an external page into the Ajax Content Container via Ajax. The method can be called anywhere on the page, such as inside a link on the page. The page to load must be from your own server, as the loading process is via Ajax, and subject to Ajax in-house domain restrictions.

Example:

The below link loads a page into the Ajax Tabs Content instance "countries":

<!--Load "canada.htm" into the the Ajax Tabs Content Container -->
<a href="javascript:countries.loadjaxpage('canada.htm')">Load New Page</a>

instance.loadiframepage(pageurl) Use this method to directly load an external page into the Ajax Content Container via IFRAME. The script will replace whatever was previously in the Content Content container with an IFRAME tag instead, and load the specified page into the IFRAME. This method allows you to load pages both on your server and from outside domains.

<!--Load "Google Homepage" into the the Ajax Tabs Content Container -->
<p><a href="javascript: countries.loadiframepage('http://www.google.com')">Load Google Homepage</a></p>

instance.onajaxpageload=function(pageurl){
//custom code here
}
A custom event handler you can use to execute your own code whenever a tab with content fetched via Ajax is clicked on. See the section on "Nesting Ajax Tabs" for more info.

Example #1- Expanding of arbitrary DIVs on the page enabled

A tab can not only manipulate load an external page, but also toggle the visibility of arbitrary DIVs on the main page itself if you wish. This is done using the "rev" attribute inside the tab link, and setting them to the ID(s) of the arbitrary DIVs on the page to also expand/contract:


<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div id="flowerdivcontainer" style="border:1px solid gray; width:350px; height: 200px; background-color: lightyellow; padding: 5px">
</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="external1.htm" rel="flowerdivcontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer" rev="flowernote, flowernote2">Tab 2</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="flowerdivcontainer" rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs script</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

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

</script>

Within the same "rev" attribute, separate multiple IDs with a comma (ie: rev="flowernote, flowernote2"). With the above code, clicking on Tab 2 will not only fetch and load "external2.htm", but also toggle the visibility of the two arbitrary DIVs anywhere on the page called "flowernote" and "flowernote2". Clicking on Tab 4 will load "external4.htm" while also hiding "flowernote" and "flowernote2". In other words, the DIVs specified using the "rev" attribute are interlinked.

Make sure the code to initialize Ajax Tabs Content script appears after all DIVs specified using both the "rel" and "rev" attributes within the page source! Otherwise, an error will be thrown with the script complaining one of the DIVs specified doesn't exist.

Example #2- Using images for the tabs

You can completely customize the look of the tabs, such as changing them to image links. The script treats every link ("A") within the specified tab container as a potential tab link, so as long as your tabs are some form of links, it will work. For example:

<div id="photogallery">
<a href="external1.htm" rel="countrydivcontainer" class="selected"><img src="tab1.gif" /></a>&nbsp;
<a href="external2.htm" rel="countrydivcontainer"><img src="tab2.gif" /></a></li>&nbsp;
<a href="external3.htm" rel="countrydivcontainer"><img src="tab3.gif" /></a>&nbsp;
<a href="external4.htm" rel="countrydivcontainer"><img src="tab4.gif" /></a>
</div>

Example #3- Changing the location the script looks for a class="selected" declaration

By default, if you wish a tab to be automatically selected when the page loads, you add a class="selected" attribute inside that tab link ("A"). However, sometimes your CSS for the tabs may be structured in a way that would make things a lot easier for you if you can add class="selected" to the parent of the tab link, and still have the "default selected" feature work. An example would be tab links that are each wrapped around a DIV, and styling to the selected tab in your CSS is on the DIV element, not the link:

<div id="whatsnew" class="someclass">
<div class="selected"><a href="external1.htm" rel="countrydivcontainer">Tab 1</a></div>
<div><a href="external2.htm" rel="countrydivcontainer">Tab 2</a></div>
<div><a href="external3.htm" rel="countrydivcontainer">Tab 3</a></div>
<div><a href="external4.htm" rel="countrydivcontainer">Tab 4</a></div>

To tell the script to look for class="selected" on each tab link's parent container, you would call setselectedClassTarget() with the string parameter in red:

<script type="text/javascript">

var newcontent=new ddajaxtabs("whatsnew")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()

</script>

Example #4- Customizing the look of your Tabs

If it's not already clear after reading examples #3 and #4, you have full flexibility in customizing the look of your tabs, as long as you remember that every link within your tab container will be scanned by the script for any special meaning (ie: does it have a "rel" attribute?), so don't put any non relevant links in there.

Table Of Contents

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