Ajax Tabs Content Script, help with static content

[frank95a]

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:

<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

<li><a href="js/external1.htm" rel="flowerdivcontainer"  class="selected" rev="flowernote1" >Description</a></li>

with say

<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

[ddadmin]

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.

[frank95a]

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

[ddadmin]

Well, with the link:

<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

[anoop31]

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

[ddadmin]

anoop31, please start a new thread when asking a question.