Results 1 to 4 of 4

Thread: 2 ajax tabs on one page

  1. #1
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 ajax tabs on one page

    Ajax Tabs Content Script

    http://www.dynamicdrive.com/dynamici...axtabscontent/

    Hi

    I followed you tutorial for the ajax tabs and it's working fine. But i'm trying to have a secondary set of tabs to replace to first set of tabs. But i can only get one two work at a time - the secondary tabs replace the first ones, but when you click the new tabs to view their content it just opens up in a new page, instead of loading it into the content box. I tried renaming the countries variable but that didn't seem to help...

    Heres my code:
    Code:
    <div id="contentdivcontainer">
    
    	<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>
    
    	<div id="contenttabs2">
    		<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
    		<a href="photography/photo15.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>
    		<a href="photography/photo14.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
    		<a href="photography/photo13.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
    		<a href="photography/photo12.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
    		<a href="photography/photo11.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
    		<a href="photography/photo10.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
    		<a href="photography/photo9.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
    		<a href="photography/photo8.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_paint.jpg"></a>
    
    		
    	</div>
    	
    	<div id="contenttabs3">
    	<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<a href="photography/morelinks.html" rel="contentcontainer">Page2</a></center>
    	</div>
    	
    </div>
    
    
    
    
    
    
    
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddajaxtabs("contenttabs2", "contentdivcontainer2")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    <script type="text/javascript">
    
    var countries=new ddajaxtabs("contenttabs3", "contenttabs2")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    The variable assigned to the initialization code for each Ajax Tabs instance needs to be unique, so instead of "coutnries", give the 2nd instance a unique variable name, ie:

    Code:
    var mycontent=new ddajaxtabs("contenttabs3", "contenttabs2")
    mycontent.setpersist(true)
    mycontent.setselectedClassTarget("link") //"link" or "linkparent"
    mycontent.init()
    DD Admin

  3. #3
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi

    I tried renaming the variable, but it's still doing the same thing.

    Heres a link to my site if you need to check it out.

    http://designperhaps.com/newsite/photography.html

    Cheers

  4. #4
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    You also need to have separate, duplicate HTML markup for each instance of Ajax tabs on your site. Right now it's a strange semi combination, where there is only one content DIV container (#contentdivcontainer2) for both instances.

    Instead of:
    Code:
    <div id="contentdivcontainer">
    
    	<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>
    
    	<div id="contenttabs2">
    		<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
    		<a href="photography/photo15.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>
    
    		<a href="photography/photo14.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
    		<a href="photography/photo13.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
    		<a href="photography/photo12.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
    		<a href="photography/photo11.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
    		<a href="photography/photo10.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
    		<a href="photography/photo9.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
    		<a href="photography/photo8.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_paint.jpg"></a>
    
    		
    	</div>
    
    	
    	<div id="contenttabs3">
    	<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<a href="photography/morelinks.html" rel="contentcontainer">Page2</a></center>
    	</div>
    	
    </div>
    Try replacing that with:

    Code:
    	<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>
    
    	<div id="contenttabs2">
    		<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
    		<a href="photography/photo15.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>
    		<a href="photography/photo14.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
    		<a href="photography/photo13.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
    		<a href="photography/photo12.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
    		<a href="photography/photo11.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
    		<a href="photography/photo10.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
    		<a href="photography/photo9.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
    		<a href="photography/photo8.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_paint.jpg"></a>
    
    		
    	</div>
    
    
    	<div id="contentdivcontainer3"><img src="images/photos/photo16.jpg"></div>
    
    	<div id="contenttabs3">
    	<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<a href="photography/morelinks.html" rel="contentdivcontainer3">Page2</a></center>
    	</div>
    	
    
    <script type="text/javascript">
    
    var countries=new ddajaxtabs("contenttabs2", "contentdivcontainer2")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    <script type="text/javascript">
    
    var mycontent=new ddajaxtabs("contenttabs3", "contentdivcontainer3")
    mycontent.setpersist(true)
    mycontent.setselectedClassTarget("link") //"link" or "linkparent"
    mycontent.init()
    
    </script>
    Try and notice the differences in the markup that properly defines two instances of Ajax Tabs HTML markup wise.
    Last edited by ddadmin; 04-24-2010 at 09:28 AM.
    DD Admin

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
  •