PDA

View Full Version : Ajax Tabs: Link to a Specific Tab



Jaxbulls
08-14-2006, 02:24 PM
1) Script Title: Ajax Tabs Content script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem: Does anyone know if it is possible to create a URL that would link directly to lets say the 2nd tab.
For example, I have two pages, index.htm and tabs.htm. In tabs.htm is where this script is obviously.
Can I be on index.htm and have a link that goes to tabs.htm and then opens the second tab instead of the first one?

LifeIsBeta
08-15-2006, 12:13 AM
I need to do the exact same thing.

jscheuer1
08-15-2006, 01:18 AM
Well, where you have this or something like it:


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

The one with the class="selected" is the default tab for the page. This condition is evaluated (among other things) a little farther down the page here:


<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

We could evaluate something else and change this situation before we invoke startajaxtabs(). For instance, your link to the page could be:


<a href="tabs.htm?sel=1">Link Text</a>

This will pass the parameter sel=1 to the tabs.htm which we can retrieve like so:


<script type="text/javascript">
if(location.search!=''){
document.getElementById('maintab').getElementsByTagName('li')[0].className=''
document.getElementById('maintab').getElementsByTagName('li')[parseInt(unescape(location.search).replace(/\D/g, ''))].className="selected"
}
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

In the case of the example sel=1, this will select the second tab (things are usually numbered starting from 0 not from 1 in javascript).

This will only work if no other numbers are being passed in the query string, normally there isn't with regular pages. If you are using server side programming and/or forms with your pages, this may not be the case.

Jaxbulls
08-15-2006, 06:22 PM
Thanks that worked great!
I think it should be considered to put this code along with the original post because it sure seems like it would be helpful to a lot of people.

Wildfire563
08-21-2006, 04:12 AM
Can this work with the regular Tab Content script?

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

Thanks

Thomas

http://www.flyingscool.com/index3.htm See Downloads tab

jscheuer1
08-21-2006, 06:27 AM
Can this work with the regular Tab Content script?

Looking at the code and markup for that script, it appears to be equivalent as far as the hooks I used for the AJAX version so, with the caveat I gave for that script:


This will only work if no other numbers are being passed in the query string, normally there isn't with regular pages. If you are using server side programming and/or forms with your pages, this may not be the case.

I see no reason why not.

Wildfire563
08-21-2006, 06:42 AM
Hi John,
Thanks for replying.

I cut and pasted the code above in, but it didn't seem to work for me. But I can only assume I am missing something.

As you can probably see from several posts I have made today, I'm trying to do 3 things, and I am not sure they are possible:

1. Using method above, pass variable from another page into http://www.flyingscool.com/Downloads.htm and have it open a particular tab.

2. Open a particular tab from a link within the same page, IOW, from the links in the menubar above. One problem I might have is quotes, as the links in the menubar are from the AnyLink Vertical menu, which is in the header and is enclosed in quotes. I tried using one of the .onclick expandcontent suggestions in many permutations, and none of them worked.

3. Use persistence, but have the choice of tab from a link override persistence.

I assume 1 is possible given your discussion above. I assume 2 is also possible, I'm totally lost on the syntax, however. I've tried following a couple of suggestions from various replies around here, but they didn't work. And I'm kind of thinking that 3 won't work. I'm wondering if it might, however, if I copy the tabcontent.js file to another name?

Thanks again,

Thomas

jscheuer1
08-21-2006, 08:20 AM
I had a look at your page and you would need to turn persistence off (the AJAX tabs version doesn't have that to begin with). Or, you could disable it only when this feature is being used:


<script type="text/javascript">
if(location.search!=''){
enabletabpersistence=0;
document.getElementById('downloadtab').getElementsByTagName('li')[0].className=''
document.getElementById('downloadtab').getElementsByTagName('li')[parseInt(unescape(location.search).replace(/\D/g, ''))].className="selected"
}
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("downloadtab")
</script>

This will switch off saving of tabs for that page visit. However, using the back button will retain the query string so, will load the tab indicated in the query string, if the page is navigated to without the query string and there is a previous cookie still saved, it will take over. But, I am not certain that the temporary switching off of enabletabpersistence might not erase any previous cookie.

Wildfire563
08-22-2006, 07:23 PM
Thanks John, I got it working. Your addition turning off persistence in the function works great. It lets me leave persistence on for other pages that use the same script, but turn it off when I need this function. Thank you very much.

LifeIsBeta
09-14-2006, 03:05 PM
I assume it's probably not possible to link to a specific anchor name in the html doc that you're targeting eh?

jscheuer1
09-14-2006, 09:16 PM
I assume it's probably not possible to link to a specific anchor name in the html doc that you're targeting eh?

It depends. If the anchor is on the top page, yes - except not in IE (at least not locally). If the anchor is in the Ajax loaded content, probably not. The query precedes the anchor in the href:


<a href="tabs.htm?sel=1#tabarea">Link Text</a>

guvenck
02-23-2007, 02:01 PM
I came up with a dirty solution but it works. Could be written better but anyway:




echo '<ul id="maintab" class="shadetabs">';
if(isset($_GET['sel']) && ($_GET['sel'] >= 0 && $_GET['sel'] <= 5)) { // sel defined
$sel = $_GET['sel'];
echo '<li';
if($sel == 0) {
echo ' class="selected">';
} else {
echo '>';
}
echo '<a href="#" rel="tcontent1">Tab 1</a></li>';
echo '<li';
if($sel == 1) {
echo ' class="selected">';
} else {
echo '>';
}
echo '<a href="#" rel="tcontent2">Tab 2</a></li>';
echo '<li';
if($sel == 2) {
echo ' class="selected">';
} else {
echo '>';
}
echo '<a href="#" rel="tcontent3">Tab 3</a></li>';
echo '<li';
if($sel == 3) {
echo ' class="selected">';
} else {
echo '>';
}
echo '<a href="#" rel="tcontent4">Tab 4</a></li>';
echo '<li';
if($sel == 4) {
echo ' class="selected">';
} else {
echo '>';
}
echo '<a href="#" rel="tcontent5">Tab 5</a></li>';
} else { // sel not defined
echo '<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>';
echo '<li><a href="#" rel="tcontent2">Tab 2</a></li>';
echo '<li><a href="#" rel="tcontent3">Tab 3</a></li>';
echo '<li><a href="#" rel="tcontent4">Tab 4</a></li>';
echo '<li><a href="#" rel="tcontent5">Tab 5</a></li>';
}
echo '</ul>';

irandoct
03-09-2007, 11:02 AM
hello,
i used two DD great scripts (ajaxtabscontent & lightbox2.02) in my php site. my default page called index.php and both of these scripts work well. But when i try a new tab (page.php?pid=XXX) my ajaxtabscontent script work well and the content of page.php load, but my lightbox2.02 script (photo galley) did NOT!
can i ask you guys take a look on my demo site and help me fix the issue!
http://www.kimiamedia.org
(site is in Farsi language)
Note: my default tab's related photos work well with lightbox2.02. if you click on a link in the right menu the related photos show without loading lightbox2.02 script! I can post my index.php code here!!!
Thank You
Mansour

smu137
08-19-2007, 08:10 PM
Hi, I'm using the Tab Content Script (no Ajax) [1]. I am also trying to link onto the page using the Tab Content Script (TCS) from an external page.

I tried to paste the codes above in this thread into the head section of the TCS page and also into the .js file but none of it worked. I am not that firm in javascript so i definitively need some advice ;)

I am also wondering how the script knows what "sel" in the external link "url.htm?sel=1" means. Since I don't find that anywhere in the code (I do find "selection").

Thanks, I hope one can help me out.
Smu

[1] http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

drecute
07-31-2008, 02:32 PM
Firstly i want to thank DD for this code.
This post is from the ajaxtabcontent example. I have looked at the solutions above but they all did not work for me. I want to link to a specific ajaxtab from the same page. This is an except from the code;

//this code is also from index.htm
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="servicetab/onlinereport.jsp" rel="#iframe" class="selected">Online Law Report</a></li>
<li><a href="external2.htm" rel="#iframe">Moot Court</a></li>
<li><a href="external3.htm" rel="#iframe">Book Galleria</a></li>
<li><a href="external5.htm" rel="#iframe">Chambers Finder</a></li>

</ul>
<br style="clear: left" />
<!--<iframe style="background-color:transparent; visibility:hidden; white-space:pre; overflow:hidden; position:absolute;"-->
</div>
<div id="petsdivcontainer" class="petsdivcontainer">

</div>

Assuming i have another page called index.htm with the following code;

<li style="list-style-image:url(images/icn/lpicn4.gif);"><span style="margin-left:8px"><a href="servicetab/external5.htm?sel=2">Find Chambers Near You</a></span></li>

I have tried this code, but it is opening in another page entirely instead of the specified tab.

ddadmin
07-31-2008, 07:03 PM
drecute, please start your own thread (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2) when asking a question.

jongmr
05-01-2009, 06:48 PM
this thread is kind of old, but i just recently added the ajaxtabs in my project site. i tried using nested ajax tab, so theres basically an ajax tab inside my ajaxtab. now i have a question, is there a way that i can select the nested tab via external link?

heres the project i am working on:
http://www.costaricabr.com

ddadmin
05-02-2009, 06:21 AM
In the future please do not bump an old thread. Start your own thread when asking a question. With regards to it, have you read my response in this thread: http://www.dynamicdrive.com/forums/showthread.php?t=29939&highlight=select+nested ?

jongmr
05-04-2009, 05:15 PM
sorry bout that. thank you for the solution btw.