PDA

View Full Version : ajaxtabscontent + static



Simonp
07-02-2006, 10:17 AM
1) CODE TITLE: ajaxtabscontent + static content

2) AUTHOR NAME/NOTES:
Simon French - extension on dynamic drive script

3) DESCRIPTION:
Based on 'ajaxtabscontent' script (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm) I have added the ability to:
- load either external pages or static layers per tab
- the option to have subnav with static layers

I added this functionality as I need to load several types of static content as well as load external pages if the tab was clicked. This allowed better control of page size by loading what was need upfront and letting the rest load as selected. Also, ensured search engines to see the content on a single page i wanted and load external pages on their own.

Usage:
- For tabs with static content added 2 more attributes :
1) loadstatic: value is => id of layer that holds static content - eg: loadstatic="static1"
2) loadtabnav: value is => id of tab nav content - eg: loadtabnav="subnav1"
Note: these divs must reside in the parent div 'ajaxcontentarea'

tab eg: <li><a href="#default" rel="ajaxcontentarea" loadstatic="static1" loadtabnav="subnav1">Intro</a></li>

static content & nav eg:
<div id="ajaxcontentarea" class="contentstyle">

<!-- start static secton 1 -->
<div id="static1">
Tab content 1 here<br />
</div>

<div id="subnav1">
subnav1 goes here</div>
<!-- end static secton 1 -->
</div>



Script additons:
function ajaxpage modified to include:

document.getElementById('tabsubnav').innerHTML=""; //set as empty
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
//init containers
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
//load subnav layer
document.getElementById('tabsubnav').innerHTML=document.getElementById(targetobj.getAttribute("loadtabnav")).innerHTML
//load static content
document.getElementById(containerid).innerHTML=document.getElementById(targetobj.getAttribute("loadstatic")).innerHTML
return
}



4) URL TO CODE:
http:/digiads.com.au/ddscripts/ajaxtabscontent/files.zip & working example:http:/digiads.com.au/ddscripts/ajaxtabscontent