Ajax tabs: Loading external links into tabs div

[synergy]

1) Script Title:
Ajax Tabs Content

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

3)Site URL
http://www.artisanculturedstone.com/new/

4) Describe problem:
This is a fantastic script! What I am trying to do is get the links that are contained in the external pages (i.e. external.htm) to load in the div that the tabs load into. For instance, I want the PRODUCT PAGE link in the sidebar on my site to load into the ajaxcontentarea div and preferrably load with that tab selected. I also want, for instance, the contact us link on the default tab to load contact.html in the ajaxcontentarea div. I hope this makes sense. I searched for quite a while to find a post addressing this but couldn't find anything. Let me know what you guys think would be a good solution for this.

[jscheuer1]

http://www.dynamicdrive.com/forums/s...8485#post48485

[synergy]

Thanks. I already read this post but I guess I was unclear about it. I'll try this then.

[synergy]

http://www.dynamicdrive.com/forums/s...8485#post48485

This isn't really what I want to do. If I understand this right...you would be on a non-tabbed page (index.htm) and want to link to a specific tab on tabs.htm.

What I want is when I already have a tab loaded in the ajaxconentarea div I will have a link or links within that file that I want to load into the same div.

[jscheuer1]

I see what you mean. OK, the tabs are numbered from 0 to however many you have, and the function ajaxpage() is what really does the switching. So, if you put this function in the head of your Ajax page, the top page, the one with the tabs on it, like so:

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

/***********************************************
* Ajax Tabs Content script- © 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>
<script type="text/javascript">
function linkjax(h, a, n){
ajaxpage(h,a,document.getElementById('maintab').getElementsByTagName('li')[n].firstChild);
}
</script>

Making sure that maintab in the above is the id of the <ul> element (from the demo):

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="externa . . .

You can now use a link anywhere on the page or within any added tab content (the external#.htm pages in the demo) like so:

<a href="javascript:linkjax('external14.htm', 'ajaxcontentarea', 2)">Link Text</a>

The red 2 is the number of the tab you are targeting, it can be the same tab currently displaying or any tab available on the top page.

Remember the tabs are numbered starting with 0, not 1.

[synergy]

B-e-a-utiful! Thanks much. That works great! I had to modify it just a hair so I could load links from my second set of tabs too.

<script type="text/javascript">
function linkjax(h, a, n){
ajaxpage(h,a,document.getElementById('maintab', 'facts').getElementsByTagName('li')[n].firstChild);
}
</script>

Thanks again

[jscheuer1]

I really don't think that will work in most browsers. Try this for the linkjax function:

function linkjax(h, a, n, tid){
ajaxpage(h,a,document.getElementById(tid).getElementsByTagName('li')[n].firstChild);
}

and this for the link:

<a href="javascript:linkjax('external14.htm', 'ajaxcontentarea2', 2, 'facts')">Link Text</a>

The part added in red tells the new linkjax() function which tab set to use.

[yurican]

Thanks jscheuer1! All works!
But how about "BACK" button?

Example:
My 2 tab named "News" and contents a list of links to news. When I click on some link I scream "B-e-a-utiful! Thanks jscheuer1! All works!" but when I want to go back to news list and click BACK in browser.....

I believe it possible. ))

[trippin]

When the links within that div are clicked, write a cookie with the current tab info. When the page loads after clicking the back button, it will read from the cookie and go to the specified tab upon page load.

[yurican]

Thank you.
Where can I get an example of how to write this to the cookie? I'm a total newbie.