Tab content script help

[Dazza30]

1) Script Title: Tab content script

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

3) Describe problem: Ive been looking for away to link to a tab on a different page.
Ive looked around the forum and i have found a thread about this, but my script seems to be slightly different to the one mentioned. Because of that im not sure how to proceed.


Here my tab script

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Specs</a></li>
<li id="tab2style"><a href="#" rel="tcontent2">Voda</a></li>
<li id="tab4style"><a href="#" rel="tcontent3">Tmob</a></li>
<li id="tab3style"><a href="#" rel="tcontent4">O2</a></li>
<li id="tab5style"><a href="#" rel="tcontent5">Orange</a></li>
<li id="tab6style"><a href="#" rel="tcontent6">Virgin</a></li>
<li id="tab7style"><a href="#" rel="tcontent7">Three</a></li>
<li><a href="#" rel="tcontent8">Wii</a></li>
<li><a href="#" rel="tcontent9">Xbox</a></li>
<li><a href="#" rel="tcontent10">Ps3</a></li>
<li><a href="#" rel="tcontent11">SatNav</a></li>
<li><a href="#" rel="tcontent12">Psp</a></li>
</ul>

<div class="tabcontentstyle" style="width: 710px">
<div id="tcontent1" class="tabcontent">
</div>
<div id="tcontent2" class="tabcontent">
</div>
<div id="tcontent3" class="tabcontent">
</div>
<div id="tcontent4" class="tabcontent">
</div>
<div id="tcontent5" class="tabcontent">
</div>
<div id="tcontent6" class="tabcontent">
</div>
<div id="tcontent7" class="tabcontent">
</div>
<div id="tcontent8" class="tabcontent">
</div>
<div id="tcontent9" class="tabcontent">
</div>
<div id="tcontent10" class="tabcontent">
</div>
<div id="tcontent11" class="tabcontent">
</div>
<div id="tcontent12" class="tabcontent">
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>

Here's a link to the other thread i mentioned

http://www.dynamicdrive.com/forums/s...ad.php?t=29823

[Dazza30]

Is the tabcontent script ive shown above an older version of the script below? as mine doesnt have this at the bottom

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


<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

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

</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>

<hr />

[ddadmin]

Yep, the script in your original post is version 1 of Tab Content script (current is v 2.x). The technique discussed in this thread on selecting a tab from a different page uses the later as basis.

I don't have the source code for v1 on hand to see if it can be easily adapted to use the same technique. Please either post the full original source code for the script, or simply try upgrading to v2 then applying the changes talked about in that thread.

[Dazza30]

I don't have the source code for v1 on hand to see if it can be easily adapted to use the same technique. Please either post the full original source code for the script, or simply try upgrading to v2 then applying the changes talked about in that thread.

Thanks for the reply ddadmin.


So far ive changed the source code to v2 and i added the below code to it.

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


Ive also downloaded the new js file and put the below code at the very bottom.

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
}

Here's the link im placing on another page <a href="lg-kgu990-viewtys.html?tabcontent=2>

Ive done all this and the tabs still arent being selected.

Here's the actual code as it would look on my page without content.

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

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

/***********************************************
* Tab Content script v2.1- © 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>

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1" class="style13">Specs</a></li>
<li id="tab2style"><a href="#" rel="tcontent2">Voda</a></li>
<li id="tab4style"><a href="#" rel="tcontent3">Tmob</a></li>
<li id="tab3style"><a href="#" rel="tcontent4">O2</a></li>
<li id="tab5style"><a href="#" rel="tcontent5">Orange</a></li>
<li id="tab7style"><a href="#" rel="tcontent6">Three</a></li>
<li><a href="#" rel="tcontent7">Ipodtouch</a></li>
<li><a href="#" rel="tcontent8">Wii</a></li>
<li><a href="#" rel="tcontent9">Xbox</a></li>
<li><a href="#" rel="tcontent10">Psp</a></li>
<li><a href="#" rel="tcontent11">SatNav</a></li>
<li><a href="#" rel="tcontent12">Ipod</a></li>
</ul>

<div class="tabcontentstyle" style="width: 710px">

<div id="tcontent1" class="tabcontent">

<p><b><a href="javascript: expandtab('maintab', 3)"></a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
</div>

<div id="tcontent3" class="tabcontent">
</div>

<div id="tcontent4" class="tabcontent">
</div>

<div id="tcontent5" class="tabcontent">
</div>


<div id="tcontent6" class="tabcontent">
</div>

<div id="tcontent7" class="tabcontent">
</div>

<div id="tcontent8" class="tabcontent">
</div>

<div id="tcontent9" class="tabcontent">
</div>

<div id="tcontent10" class="tabcontent">
</div>

<div id="tcontent11" class="tabcontent">
</div>

<div id="tcontent12" class="tabcontent">
</div>

<script type="text/javascript">

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

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

</script>

[ddadmin]

Do you have a URL to the actual problem we can check out?