Tab Content Script Linking

[meganp]

1) Script Title: Tab Content Script

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

3) Describe problem:
How can I link to a particular tab on a different page? I've only found information on how to link to a tab on the same page using this code: <a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>.
Thanks!

[lazywolfy]

I too was searching for the same answer and found it here:
http://www.dynamicdrive.com/forums/s...ad.php?t=24475

It works perfectly. Thanks DDAdmin

The fundamental technique discussed in the first thread you cited is best summarized here (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.

[lazywolfy]

Here's a weird twist to this question......

How would I link to a tab within a tab (from an external url of course)?

I copied the Tab Content Script within itself and edited the css to give me a set of tabs within tabs. (DEMO HERE)
So for example...is it possible to create a url on a different page that points to the "Operations" tab within the "Disease Outbreak" tab?

Or is there a more efficient way of accomplishing this?

Thanks for any help/advice.

//EDIT: Well I played around with it and I think I figured it out.

I added the red code below to my external url:

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

where "morecountries"= the unique variable assigned to the 2nd set of tabs
where "1"=tab ID/position

If someone could still tell me wether or not this is not the ideal solution, I'd appreciate it.
Thanks

[ddadmin]

I haven't actually tested it out, but yep, that looks like it should work.

[lazywolfy]

here's yet another "weird" twist to this question....

How can I add a 2nd row of tabs? (or more rows)
and how would I reduce the gap between tabs? in the css?

//Edit
hehe well I guess I shoulda searched b4 asking. I found this thread which gives me a 2nd row...
http://www.dynamicdrive.com/forums/s...ight=rows+tabs

but if a tab from the top row is selected, I'd like it to drop down to the bottom row so that it appears right above the content....if that makes any sense. But that probably involves more work which I'm not getting paid for! -_- lol
I'll stick with this.

For Shade Tabs, the easiest way to have multiple rows of tabs with respect to Tab Content Script is actually just to embed multiple menus (UL tags). Move the ID attribute from the UL tag to a DIV instead that wraps around all the tabs. So for example:

<div id="cattabs">

<ul class="shadetabs">
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
</ul>

<ul class="shadetabs" style="margin-top: 5px">
<li><a href="#" rel="dog4" class="selected">Tab 4</a></li>
<li><a href="#" rel="dog5">Tab 5</a></li>
<li><a href="#">Tab 6</a></li>
</ul>

</div>

The beauty of Tab Content script is that it scans the links generically for special meaning within a container with the specified ID, whether that container contains.

[lazywolfy]

I'm having some trouble with the CSS.
The tabs are automatically breaking to a 2nd row because the spacing between the tabs is too wide.

They look fine in preveiw mode (basic html page), but when I view the tabs using my CMA, it looks like this:


Is there a way to fix this or is my CMA causing the problem?
here's the CSS I'm using:

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 5px;
margin-right: 0px;
border: 1px solid #A9A9A9;
color: #0066cc;
background: #cccccc top left repeat-x;
}

.shadetabs li a:visited{
color: #0066cc;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #0066cc;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background: #FFFFFF;
border-bottom-color: white;
font: bold 12px Verdana;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: underline;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

.shadetabs2{ /*nested tabs*/
padding: 3px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs2 li{
display: inline;
margin: 0;
}

.shadetabs2 li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #A9A9A9;
color: #0066cc;
background: #cccccc top left repeat-x;
}

.shadetabs2 li a:visited{
color: #0066cc;
}

.shadetabs2 li a:hover{
text-decoration: underline;
color: #0066cc;
}

.shadetabs2 li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs2 li a.selected{ /*selected main tab style */
background: #FFFFFF;
border-bottom-color: #A9A9A9;
font: bold 12px Verdana;
}

.shadetabs2 li a.selected:hover{ /*selected main tab style */
text-decoration: underline;
}

a
{
	background-color: transparent;
	/* font-size: .85em; */
	color: #0066CC;
	font-weight: normal;
	text-decoration: none;
}

a:hover
{
	background-color: transparent;
	/*font-size: .85em;*/
	/*font-family: Verdana, Arial, Helvetica, sans-serif;    */
	color: #0066CC;
	font-weight: normal;
	text-decoration: underline;
}

[lazywolfy]

I got it working....

changed shadetabs css from:
margin-left: 0;

to:
margin-left: -2em;