PDA

View Full Version : Ajax Tabs - link within a tab set



beej3030
01-18-2007, 04:38 PM
1) Script Title:Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem:
I'm trying to duplicate Yahoo's home page ajax tabbed menu with the DD one, and i'm close to getting it. I have the main tabs working, but want to include sub tabs under each main tab. Like on Yahoo, the first tab is 'Featured', and then they have 4 links with smaller images at the bottom of the content area.

I've set up this page: http://castlehillinn.com/Special_Offers/Lodging_Packages/bj.htm and want the bottom two images/text to open the link like the main tabs (within the same content area). Right now, it's just loading the page in another window. Is there a workaround to this?

Any help would be great. Thanks.

ddadmin
01-19-2007, 04:54 AM
Try the below. Inside the .js file, make the following two changes:


function ajaxpage(url, containerid, targetobj, directBol){

and


if (typeof directBol=="undefined"){
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className="" //deselect all tabs
targetobj.parentNode.className="selected" //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
}

The code in red is new. Then, inside any of your external pages, create links such as:


<a href="#" onClick='ajaxpage("external2.htm", "ajaxcontentarea", "", 1); return false'>Load Dog page</a>

where the first parameter is the path to the external page to load, the second is the ID of your content area, the third is just a blank string, and the forth, a value of 1.

vc604
02-10-2007, 10:00 AM
hi

thx for the suggested changes in the post: http://www.dynamicdrive.com/forums/showthread.php?t=16665&highlight=Ajax+Tabs+Content+script

i was looking for a similar soln so i implemented the changes in .js.

now all my main tabs stopped loading the content in the contentarea- instead they all open up in a new page.

the tabs are created in the original way:
<li><a href="testtab1.php" rel="ajaxcontentarea">TestTab1</a></li>

any help would be greatly appreciated...thanks.

vc604
02-18-2007, 12:38 AM
got it working...ignore the message above. thx