Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Ajax Tabs: Link to a Specific Tab

  1. #1
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ajax Tabs: Link to a Specific Tab

    1) Script Title: Ajax Tabs Content script
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

    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?

  2. #2
    Join Date
    Aug 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I need to do the exact same thing.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, where you have this or something like it:

    Code:
    <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:

    Code:
    <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:

    HTML Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can this work with the regular Tab Content script?

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

    Thanks

    Thomas

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Wildfire563
    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:

    Quote Originally Posted by myself
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Aug 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I assume it's probably not possible to link to a specific anchor name in the html doc that you're targeting eh?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •