Anchor Links from outside of a Tab? Tab Script v2.2

[Valyekrin]

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

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

3) Describe problem:

http://www.datacore.com/partners/partners_worldwide.asp

My site uses the Tab script to break down partners in certain regions. You can see that I've used the picture of the earth and the names of these regions to link to the tabcontent.

Since I have very large areas of Tabcontent, I want to be able to link to a specific spot within a tab from anywhere in my page. So For Example, If you were to click on "Germany" you would open up the Europe Tabcontent, and then the anchor would take you down to the content starting with Germany.

Has anyone found a solution to this?

Thanks!

[ddadmin]

First, try adding a HTML anchor (< name="whatever"></a>) to the position within the Tab Content you wish a link to jump to when clicked on. Then, modify your link's href attribute to go to that HTML anchor while calling tabcontent.expandit() to first expand that Tab Content first. Altogether it may look something like:

<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<p><a href="#germany" onClick="mypets.expandit(1)">2nd tab, germany content</a></p>

<div id="pettabs" class="indentmenu">
<ul>
<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>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

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

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
<div style="height:600px"></div>
<a name="germany"></a> Germany description
<div style="height:600px"></div>
</div>

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

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

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

[rovska]

hi there, i was wondering if i could do the same thing if using the ajaxcar demo

since the list goes all the way down whereby the user needs to scroll down to see the last tab and click then scroll up again to view the content, i was wondering if anyone could help me to make the page goes straight to the top?

[ddadmin]

Well the concept should be the same Rovska. You'd create a HTML anchor where you want the page to jump to, then inside your link that loads the Ajax page, modify it to something like:

<a href="#myanchor" onClick="ajaxpage('test.htm', 'contentarea');">test</a>

[rovska]

thx for replying, i tried it and it does bring it to the top of the page, but the content doesn't show. i adapted the script to my page it goes like:

originally:
<ul id="maintab53" class="shadetabs">
<li><span class="shadetabs"><a href="ilabs.html" rel="ajaxcontentarea">ilabs</a></span></li>
</ul>

edited:
<ul id="maintab53" class="shadetabs">
<li><span class="shadetabs"><a href="#myanchor" onClick="ajaxpage('ilabs.html', 'ajaxcontentarea');">ilabs</a></span></li>
</ul>

i'm very new to this so sorry if i'm confusing you.

[ddadmin]

I'm confused. I thought you were asking about the script Ajax Content script?