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/dynamicindex17/ajaxtabscontent/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 (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm).

[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/showthread.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 (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2) when asking a question.