Results 1 to 6 of 6

Thread: Ajax Tabs Content Script, help with static content

  1. #1
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ajax Tabs Content Script, help with static content

    1) Script Title: Ajax Tabs Content Script

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

    3) Describe problem:

    I have only 1 tab whose content is dynamic and 2 tabs for which the content is static. The following is the script I am using:

    Code:
    <link rel="stylesheet" type="text/css" href="js/ajaxtabs/ajaxtabs.css" />
    <script type="text/javascript" src="js/ajaxtabs/ajaxtabs.js">
    
    
    </script>
    
    
    
    
    <div id="flowertabs" class="modernbricksmenu2" >
    <ul>
    <li><a href="js/external1.htm" rel="flowerdivcontainer"  class="selected" rev="flowernote1" >Description</a></li>
    <li><a href="js/external1.htm" rel="flowerdivcontainer" rev="flowernote2" >Shipping</a></li>
    <li><a href="js/external1.htm" rel="flowerdivcontainer" rev="flowernote3">Guarantees</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    
    
    
    
    <div id="flowerdivcontainer" style="border:1px solid gray; width:550px; height: 400px; background-color: lightyellow; padding: 5px">
    
    </div>
    
    
    <div id="flowernote1" style="display:none; position:relative; left: 12px; top:-398px; width:543px; height:380px; background-color:lightyellow; color:Black; overflow:auto" rel="flowerdivcontainer">
    <b>Description</b>
    content1
    </div>
    
    <div id="flowernote2" style="display:none; position:relative; left: 12px;  top:-398px; width:543px; height:380px; background-color:lightyellow; color:Black; overflow:auto" rel="flowerdivcontainer">
    <b>Shipping</b>
    content2
    </div>
    
    <div id="flowernote3" style="display:none; position:relative; left: 12px; top:-398px; width:543px; height:380px; background-color:lightyellow; color:Black; overflow:auto" rel="flowerdivcontainer">
    <b>Guarantee</b>
    content3
    </div>
    
    
    
    <script type="text/javascript">
    
    var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
    myflowers.setpersist(true)
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    
    </script>
    This works but the problem is that I am loading an external HTML file which is blank 3 times for no reason at all. All I need is for the hidden div to show content1, content2, or content 3 based on the tab clicked. If I change

    Code:
    <li><a href="js/external1.htm" rel="flowerdivcontainer"  class="selected" rev="flowernote1" >Description</a></li>
    with say
    Code:
    <li><a href="#" rel="flowerdivcontainer"  class="selected" rev="flowernote1" >Description</a></li>
    the same page is reloaded (i.e. the referring page where the tabs are)

    I am at my wits ends. Can someone help? Much appreciated

    Frank
    Last edited by ddadmin; 08-12-2008 at 07:00 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    From your HTML it seems you're just tabbing between inline content directly added to the page (and not external files). What you want to use then is Tabs Content script.
    DD Admin

  3. #3
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply... Yes and no though, One of the contents is dynamic (i.e. One of the tabs) however, regardless of that, my question has to do with the <a href="#" rel="flowerdivcontainer" class="selected" rev="flowernote1" >Description</a></li> part

    If I put # in the link location, the tab opens a copy of the page rather than the content I want

    Thanks again

    Frank

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Well, with the link:

    Code:
    <a href="#" rel="flowerdivcontainer" class="selected" rev="flowernote1" >Description</a></li>
    It wouldn't load anything at all, since your href attribute points to "#", instead of a valid path to the external page to show.

    If you're asking how to have more than 1 tab show inline content on the page (so 2 tabs show inline content, 1 external content for example), try the mod discussed here: http://www.dynamicdrive.com/forums/s...ad.php?t=32540
    DD Admin

  5. #5
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    I am using your code as below to show different content under different tabs rather loading external pages. I have very simple question which couldn't solve myself. How can I have tabs with no spacing in between?
    This is more common now where first row(TABS) stretch over complete length of second row(the content part) without any spacing.

    <ul id="flowertabs" class="shadetabs">
    <li><a href="#" rel="tcontent1" class="selected">Tab1</a></li>

    <li><a href="#" rel="tcontent2">Tab2</a></li>

    <li><a href="#" rel="tcontent3">Tab3</a></li>
    </ul>

    <div style="border: 1px solid gray; padding: 5px; margin-bottom: 1em;">
    <div id="tcontent1" class="tabcontent">
    ....some content1...
    </div>

    <div id="tcontent2" class="tabcontent">
    ....some content2...
    </div>

    <div id="tcontent3" class="tabcontent">
    ....some content3...
    </div>
    </div>

    <script type="text/javascript">
    var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
    myflowers.setpersist(true) //toogle persistence of the tabs' state
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    </script>


    Thanks very much,
    Anoop

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    anoop31, please start a new thread when asking a question.
    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
  •