How to id a default tab

[RedRhino]

1) Script Title:

Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem:

I am working with the script above and I love it. However, I have a hard time defining the first tab as the tab that I want to be default tab/external page to display. I have not made any major changes to the script after downloading it so I'm pretty much working with it's initial configuration under which it seems to favor the second tab.

Also, my third tab includes links to other pages of our site. However, even though I have defined the page properly (the page has an identical layout with 3 ajax tabs) it only links to the external page within the 3rd ajax tab, rather than the index page that holds all ajax tabs.


Thanks

[ddadmin]

If you want the first tab to be selected by default that happens to also be a tab showing external content (either IFRAME or Ajax), give the tab a class="selected" assignment. Example:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer" id="favorite">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="countrycontainer">Tab 4</a></li>
</ul>

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

<script type="text/javascript">

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

</script>

Regarding the 2nd issue, please post a link to the page on your site that contains the problematic script so we can check it out.

[RedRhino]

Thanks for your swift reply. If you look at the source code of the following page, you will see that we properly gave a "selected" assignment; however, it's is still pulling up the second tab first.

The page can be found at http://www.insights.fastventures.com...2008/index.php

Also, if you look at the 3rd tab of this page you will see a link to another product page. Although the link pulls up the right page, it also pulls up the third tab instead of the first.

Thanks for your time and help.

[ddadmin]

Actually, looking at your page, the first tab does appear selected by default for me now.

Regarding the 2nd issue, are you basically asking how to have the user click on a link within the 3rd tab that loads a new page with the same Ajax Tabs Content defined on it, plus have a particular tab be selected by default on the target page?

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[RedRhino]

Well, unless there’s some sort of cache or cookie that makes the page appear differently on our machines, the page still loads with the second tab first.

The link to another external page in the third tab should not load the external page in the same tab but rather link to it with the first tab selected.

I look into the issue with the copyright notice. We worked with a third party developer on this and weren’t aware of any requirements in that regard.

Thanks.

[ddadmin]

I just ran your page in 3 different browsers- FF3, IE7, and Opera 9.5- in all 3 cases, the first tab "Abstract" is selected by default.

The reason the 3rd tab remains selected when you go to the target page from the original page is since "persistence" is turned on on the target page:

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

You can either turn it off, or use the remote URL tab selection method to force the 1st tab to be selected on the target page, from the URL on the previous.

[RedRhino]

I have another quick question regarding this script.

I wanted to load an external page into one of the tabs via iframe because the external page will likely be longer than the predefined height of the countrydivcontainer. I managed to do that; however, the external page contains a number of links, which now load the linked pages in the same iframe.

Is it possible to somehow prevent that from happening without having to add a target="blank" attribute to each link?

I'm concerned that since this will essentially open a new browser window for each linked page that some users get annoyed with this and that some pop-up blockers might interfere with that.

Any ideas would be greatly appreciated. Thanks.

[ddadmin]

If you mean how to get links inside the external pages that are loaded in the IFRAME to load in the full browser window (instead of inside the IFRAME), the target attribute value you want is actually:

target="_top"

Such a target won't cause the link to load in a new window, just inside the primary browser window, breaking out of any frames if any. Or instead of adding this attribute to every link, on the top of the external page (HEAD section), you can just add the following to apply this attribute to all links within that page:

<base target="_top">