Tab Content Script 2.0 linking to tabs from external links (not within the page)

[jaimenacach]

1) Script Title: Tab Content Script (v 2.0)

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: Hello,

I'm having a problem figuring out how to link to a specific tab (select a tab) from an external link (a link coming from another page, not within the same page). This means, that I want to link from another page into a specific tab within a page that contains the tab content script.

I've been able to successfully select a tab from within the same page using the code shown in the Script's page. Yet, it does not say in the tutorial how to link to a specific tab (select a tab) from another page.

I've found some threads in this forum that answer this for the previous tab content script 1.0 and for the ajax tab content script, but the answers in those threads do not work with the new 2.0 tab content script.

The threads are:
http://www.dynamicdrive.com/forums/showthread.php?t=24475
http://www.dynamicdrive.com/forums/showthread.php?t=12105 (this is more relevant)

Here are links to my successfully created tab content pages:
http://mkdigitaldirect.com/new/products/lighting-systems/mk-gem-ebox.html
http://mkdigitaldirect.com/new/products/led-lighting/in-counter-led-natural-daylight-jewelry-stores-give-sparkles.html

Pretty much I want to be able to link to a specific tab within a page to show specific information from within a tab section.

Hope someone has an answer... as the answer will be helpful to anyone using this script that was updated October 7, 2007

[ddadmin]

The fundamental technique discussed in the first thread (http://www.dynamicdrive.com/forums/showthread.php?t=24475) you cited is best summarized here (http://www.dynamicdrive.com/forums/showthread.php?t=24920) (using "Animated Collapsible DIV" as the subject). To add a similar ability to Tab Content Script v2.0 using the aforementioned technique, first, add the below function to the very end of tabcontent.js:


function externalselectlisten(tabcontentvar){
var re=new RegExp(tabcontentvar+"=(\\d+)", "i") //match tabcontentvar=xxx (xxx=integer)
var urlparam=window.location.href.match(re)
var paramvalue=RegExp.$1
if (/\d+/i.test(paramvalue)) //if URL parameter contains "?tabcontentvar=xxx"
return parseInt(paramvalue) //return xxx part
else
return -1
}

Then, on your page containing the Tab Content, add the below portion in red to the default initialization code:


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

var externalselectindex=externalselectlisten("countries")
if (externalselectindex!=-1)
countries.expandit(externalselectindex)

With the part in red added, the tab content instance "countries" will now listen in on any URL parameters matching the syntax "tabcontentvar=xxx" telling it whether to select a particular tab, where xxx is the position of the tab to select (0=1st tab). For example, on some random page, you may now have a link such as:


<a href="target.htm?countries=2>sdfd</a>

This will cause the 3rd tab within "countries" on the page "target.htm" to be selected, where "countries" is the unique variable you assigned that particular Tab Content instance.

[jc_gmk]

You could maybe use some PHP for this:

http://www.dynamicdrive.com/forums/showthread.php?t=26757

[jaimenacach]

Hello ddadmin

I've tried the code that you have posted and I'm now able to link directly to any tab that I desire. Thank you so much, this IS very helpful for the design of my website.

Take care
Jaime Nacach