PDA

View Full Version : NEXT/PREV with Nested Tabs



marcdet
07-26-2008, 04:45 AM
1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): Ajax Tabs Content: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm
3) Describe problem:
Does anyone have a way to make NEXT/PREV (cycleit) work in a nested tab set? Thanks.

ddadmin
07-26-2008, 05:20 AM
A cycling link will still work when put inside a nested tab content. That is, if that content is the 2nd tab, clicking on the "next" link will cause the 3rd tab to be selected:


<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 280px;"><img src="roundleft.gif" border="0" /> Back</a>
<a href="javascript:countries.cycleit('next')"><img src="roundright.gif" border="0" /> Forward</a></p>

Or are you asking about going to a different tab than sequentially?

marcdet
07-26-2008, 06:09 AM
A cycling link will still work when put inside a nested tab content. That is, if that content is the 2nd tab, clicking on the "next" link will cause the 3rd tab to be selected:


<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 280px;"><img src="roundleft.gif" border="0" /> Back</a>
<a href="javascript:countries.cycleit('next')"><img src="roundright.gif" border="0" /> Forward</a></p>

Or are you asking about going to a different tab than sequentially?

Thanks for the reply.
If I use the code you posted the links take me out of the nested page and to the next main tab; instead of the next page in the nest.
I am asking about going to the next tab inside the nested page, sequentially. I thought it should work like this: but it does not.



<p><a href="javascript:provinces.cycleit('prev')" style="margin-right: 280px;"><img src="roundleft.gif" border="0" /> Back</a>
<a href="javascript:provinces.cycleit('next')"><img src="roundright.gif" border="0" /> Forward</a></p>


I get an error: 'provinces' is undefined. Thanks for the help.

ddadmin
07-26-2008, 07:44 AM
Ah yes, you need to make sure "provinces" is declared as a global variable when you initialize it. In other words, you'd remove the part in red here:


countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalnested.htm")!=-1){
var provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}

That will do it.

marcdet
07-26-2008, 08:03 AM
You got it, works as I expected now.
Thanks again for the help.

marcdet
07-26-2008, 05:38 PM
admin- I have another tweak I was wondering if someone had already done for an external link into the tabbed content using ID's instead of index #'s?
Using the standard code as below, I would like to link into the tabbed content with the following (or somthing similar?);
<a href="target.htm?flowertabs=myfavorite">Target Page</a>
which would lead me to target.htm with external2.htm tab selected.


<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected" id="thebestest">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer" id="myfavorite">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer" id="justok">Tab 3</a></li>
<li><a href="external4.htm" rel="countrycontainer" id="notsogood">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>

As I would like to use them, the number of tabs are dynamic based on the content available. While I know I always want to link to "myfavorite" from pages outside the tabbed area, I will never know ahead of time what postion it is in. Does that explain it? Thanks again.

ddadmin
07-26-2008, 09:46 PM
marcdet, please start a new thread when asking a new question on a script.