Results 1 to 7 of 7

Thread: AJAX TABS Multiple sets of tabed windows

  1. #1
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AJAX TABS Multiple sets of tabed windows

    1) Script Title:
    AJAX TABS

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

    3) Describe problem:

    Hi Forum,
    I'm using the Ajax Tabs script to showcase a portfolio, so you see an image, and then there are 3 tabs next to the image that give different information.

    My problem is, I'd like to repeat the process for additional portfolio pieces further down on the page.

    The first usage of the AJAX TABS works fine... but then the second one is broken...

    Anyone do this before? Any help?
    thanks

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    So basically you're asking how to have more than 1 Ajax Tabs instances running on the same page right? This is certainly supported. If you look at the demo page for example, you see 3 instances running. The important thing to note is just that when you call init() for each instance, that the variable and ID values entered are all unique for each instance. For example:

    Code:
    var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    
    var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
    myflowers.setpersist(true)
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    A common mistake is to assign the two instances the same variable name when they should be different (ie: countries and countries instead of countries and flowers).
    DD Admin

  3. #3
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Still not working

    Thanks for the quick response,
    As a test I duplicated the first TABS instance but changed the points you mention... it does not work with your demo code either;
    see below

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" 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">
    
    /***********************************************
    * Ajax Tabs Content script v2.2-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    </head>
    
    <body>
    
    <h3><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs Content script Instructions</a></h3>
    
    <h3>Demo #1- Basic implementation</h3>
    
    <p>
    - First tab shows default, inline content directly added inside container DIV<br />
    - 2nd and 3rd tabs show external pages fetched via <b>Ajax</b><br />
    - 4th tab shows an external page fetched via <b>IFRAME</b><br />
    </p>
    
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="#default" class="selected">Tab 1</a></li>
    <li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
    <li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
    <li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    
    <div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    <p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    <p><a href="javascript: countries.expandit(3)">Dynamically select last Tab</a> | <a href="demo.htm?countrytabs=1">Reload page and select 2nd tab using URL parameter</a></p>
    
    <hr />
    
    
    
    <h3><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs Content script Instructions</a></h3>
    
    <h3>Demo #1- Basic implementation</h3>
    
    <p>
    - First tab shows default, inline content directly added inside container DIV<br />
    - 2nd and 3rd tabs show external pages fetched via <b>Ajax</b><br />
    - 4th tab shows an external page fetched via <b>IFRAME</b><br />
    </p>
    
    <ul id="citytabs" class="shadetabs">
    <li><a href="#" rel="#default" class="selected">Tab 1</a></li>
    <li><a href="external2.htm" rel="citycontainer">Tab 2</a></li>
    <li><a href="external3.htm" rel="citycontainer">Tab 3</a></li>
    <li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    
    <div id="citydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    <p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
    </div>
    
    <script type="text/javascript">
    
    var cities=new ddajaxtabs("citytabs", "citydivcontainer")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    <p><a href="javascript: countries.expandit(3)">Dynamically select last Tab</a> | <a href="demo.htm?countrytabs=1">Reload page and select 2nd tab using URL parameter</a></p>
    
    <hr />
    
    
    
    
    
    <h3>Demo #2- Expanding of arbitrary DIVs on the page enabled</h3>
    
    <p>
    - All tabs fetched via <b>Ajax</b><br />
    - 2nd and 4th tabs also show/hide arbitrary DIVs when clicked on<br />
    </p>
    
    <div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
    Arbitrary DIV 1
    </div>
    
    <div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
    Arbitrary DIV 2
    </div>
    
    <div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
    Arbitrary DIV 3
    </div>
    
    
    <div id="flowerdivcontainer" style="border:1px solid gray; width:350px; height: 200px; background-color: lightyellow; padding: 5px">
    </div>
    
    <div id="flowertabs" class="modernbricksmenu2">
    <ul>
    <li><a href="external1.htm" rel="flowerdivcontainer" class="selected">Tab 1</a></li>
    <li><a href="external2.htm" rel="flowerdivcontainer" rev="flowernote,flowernote2">Tab 2</a></li>
    <li><a href="external3.htm" rel="flowerdivcontainer">Tab 3</a></li>
    <li><a href="external5.htm" rel="flowerdivcontainer" rev="flowernote3">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs script</a></li>
    </ul>
    </div>
    <br style="clear: left" />
    
    <script type="text/javascript">
    
    var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
    myflowers.setpersist(true)
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    
    </script>
    
    <p><a href="javascript:myflowers.cycleit('prev')" style="margin-right: 250px; text-decoration:none">Back</a>  <a href="javascript:myflowers.cycleit('next')" style="text-decoration:none">Forward</a></p>
    
    <p><a href="javascript: myflowers.loadajaxpage('external2.htm')">Load "external2.htm" into content container via Ajax</a></p>
    
    <hr />
    
    
    
    
    
    
    
    
    
    
    
    
    <h3>Demo #3- All contents fetched via "IFRAME"</h3>
    
    <div id="pettabs" class="indentmenu">
    <ul>
    <li><a href="external1.htm" rel="#iframe" class="selected">Tab 1</a></li>
    <li><a href="external2.htm" rel="#iframe">Tab 2</a></li>
    <li><a href="external3.htm" rel="#iframe">Tab 3</a></li>
    <li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    
    <div id="petsdivcontainer" style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
    </div>
    
    
    <script type="text/javascript">
    
    var mypets=new ddajaxtabs("pettabs", "petsdivcontainer")
    mypets.setpersist(false)
    mypets.setselectedClassTarget("link")
    mypets.init()
    
    </script>
    
    <p><a href="javascript: mypets.loadiframepage('http://www.google.com')">Load "Google Homepage" into content container via IFRAME</a></p>
    
    
    
    </body>
    </html>
    Last edited by ddadmin; 03-09-2010 at 06:18 AM.

  4. #4
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    Looking at the code you posted, it contains two demo1`s that both share the same variable names. That`s likely the issue, though to be sure, please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  5. #5
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 Different Variable Names

    DDADMIN,
    I just copy and pasted your demo code quickly...

    I was only concerned with the DEMO #1 code which I duplicated in my post, BUT CHANGED the variables... as you'll see if you look at the 2 demo code #1's.

    The other demo codes are not relevant, and I just left them there because they were in the demo code, and I was rushing to post it in the forum. So you can ignore everything but the 2 demo code 1's.

    I know I'm probably leaving something out, or not doing something correct, but I can't get this to work.

    thanks for the help

  6. #6
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Also, I do not see the same variable for both demo #1's as you noted - can you point out where that duplicate usage is?

  7. #7
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tab fixed!!!

    Thank you DDADMIN.
    by going back over the code looking for a repeat of the variable, I figured out and found what you were talking about...

    Once fixing this, multiple instances of the tab function works.

    Thanks very much!

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
  •