Results 1 to 2 of 2

Thread: functionality inside nested ajaxtabs

  1. #1
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default functionality inside nested ajaxtabs

    1) Script Title:
    Ajax Tabs Content Script (v 2.2)

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

    3) Describe problem:
    Hi! In a nested ajaxtabs, how can I cycle through the nested tabs? I copied the example on the website and inserted
    a
    Code:
    <a href="javascript:provinces.cycleit('next')" style="text-decoration:none">Forward</a>
    line, because the nested tab is called provinces. I thought that would be enough, but the button is not doing anything! What am I doing wrong?
    The main tab is called countries and the cycle forward button for this tab is working when I call it with
    Code:
    javascript:countries.cycleit('next').
    Thanks!

  2. #2
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi!
    just to elaborate a little bit: I copied the nested tabs example
    from the website and the final code is like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
    <script type="text/javascript" src="ajaxtabs/ajaxtabs.js"> </script>
    </head>
    
    <body>
    <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">Tab 2</a></li>
    <li><a href="externalnested.htm" rel="countrycontainer">Tab 3</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()
    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()
    }
    }
    
    </script>
    </body>
    </html>
    and the externalnested.htm is like this:

    Code:
    <div>
    <ul id="provincetabs" class="shadetabs">
    <li><a href="tutorial1.htm" rel="provincedivcontainer">Tut1</a></li>
    <li><a href="tutorial2.htm" rel="provincedivcontainer">Tut2</a></li>
    <li><a href="tutorial3.htm" rel="provincedivcontainer">Tut3</a></li>
    <li><a href="external4.htm" rel="provincedivcontainer">Tab 4</a></li>
    </ul>
    <a href="javascript:countries.cycleit('next')" style="text-decoration:none">Forward</a>
    <a href="javascript:provinces.cycleit('next')" style="text-decoration:none">Forward</a>
    <div id="provincedivcontainer" style="padding: 10px; border-top: 1px solid gray;">
    </div>
    There are two "next" buttons in externalnested.htm. The one refering to countries is working and is cycling over the main tabs. But the second forward button refering to provinces is not working. I want it to cycle over the nested tabs (the tutorials).
    Thanks! Sam

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
  •