AJAX Tabs - How to make an extra link to another internal div (content) ?

1) Script Title:
Ajax Tabs Content Script (v 2.2)

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

3) Describe problem:
Hi, I want to use the ajax tabs script stated above but with the possibility to add extra tabs which refer to internal content and not an extra iframe or external page. I have tried to combine this script with the "Tab Content Script"(http://www.dynamicdrive.com/dynamici...tabcontent.htm), which is a script to add more tabs only with internal content. I downloaded the other files and referred to it, but it just became a mess with tabs inside tabs and not working properly. I guess I am overseeing something or it is not possible.

Thus the simple question is, how can I make extra tabs that link to an internal div (content) in the Ajax Tabs Content script v2.2? (I also want to keep using the ability to link to external files so just switching to the "Tab Content Script" is not an option)

Thanks for your time.

Kind regards,
Walter

There's no easy way to do this at the moment unfortunately. This is something I hope to add to the script the next time it's updated.

Hm to bad. It's a great script and I hope you are able to add that feature soon (: Any idea's on when that would be (more or less)?

It will be very usefull, with external and internal link we would'nt need no other tabs content script then this one

Do you have any idear when you will release with this feature ? we also would very much like to see this implemented. and as of now have found no other script that can both load external and internal content via ajax.

This is actually (I think) easier than it might appear. Edit ajaxtabs.js here (add highlighted):

Code:

---

//** Ajax Tabs Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 21st, 07 to version 2.0. Contains numerous improvements
//** Updated Feb 18th, 08 to version 2.1: Adds a public "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically. Only .js file changed from v2.0.
//** Updated April 8th, 08 to version 2.2:
//  -Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)
//  -Modified Ajax routine so testing the script out locally in IE7 now works

var ddajaxtabssettings={}
ddajaxtabssettings.bustcachevar=1  //bust potential caching of external pages after initial request? (1=yes, 0=no)
ddajaxtabssettings.loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."


////NO NEED TO EDIT BELOW////////////////////////

document.write('<style type="text/css">.divcontent {display: none;}<\/style>');

function ddajaxtabs(tabinterfaceid, contentdivid){
        this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
        this.tabs=document.getElementById(tabinter . . .

---

and here:

Code:

---

        expandtab:function(tabref){
                var relattrvalue=tabref.getAttribute("rel")
                //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easy searching through
                var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
                if (relattrvalue=="#default")
                        document.getElementById(this.contentdivid).innerHTML=this.defaultHTML
                else if (relattrvalue=="#iframe")
                        this.iframedisplay(tabref.getAttribute("href"), this.contentdivid)
                else if (relattrvalue === "#div" && /^#(.+)$/.test(tabref.hash)){
                        document.getElementById(this.contentdivid).innerHTML=document.getElementById(RegExp.$1).innerHTML;
                }
                else
                        ddajaxtabs.connect(tabref.getAttribute("href"), this)
                this.expandrevcontent(associatedrevids)
                for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
                        this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("href")==tabref.getAttribute("href"))? "selected" : ""
                }
                if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
                        ddajaxtabs.setCookie(this.tabinterfaceid, tabref.tabposition)
                this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
        },

---

Now, if you want a division on the page to show up in the tab, do like so (place this outside other content on the page):

Code:

---

<div id="test" class="divcontent">
It worked!
</div>

---

and call it like:

Code:

---

<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="#test" rel="#div">Tab 5</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

---

Quote:

---

Originally Posted by jscheuer1

This is actually (I think) easier than it might appear. Edit ajaxtabs.js here (add highlighted):......

---

I tried this just recently and it works perfectly in IE6,IE7,IE8, Chrome 4.1 and FF 3.6.3!!!!!

thsi should be added to the script permanently!

* one note - I didn't like the idea of using document.write to add the .divcontent class, perhaps it could just be included as an aside in the documentation to set display:none to any containers users want to hide.

It could just be part of the configuration. Something like:

Quote:

---

Step 1: Put this in the head of your page:

Code:

---

<style type="text/css">
.divcontent {
display: none;
}
</style>

---

---

But then, with javascript disabled/unavailable, the content would be inaccessible. It's been some time since my post outlining this approach. Looking over it I think my reasoning was that, since the link would be:

Code:

---

<a href="#test" rel="#div">Tab 5</a>

---

One could add here (addition highlighted):

Code:

---

<div id="test" class="divcontent"><a name="test"></a>
It worked!
</div>

---

And it would then work like a normal named anchor/anchor link pair for navigating within the document. At the very least, even without the named anchor, the content would be accessible without javascript. Which, BTW, is how the external pages are. Without javascript, they become ordinary links.

Ahhhh! Now I understand the reason for putting the document.write in the javascript.
I understand your idea about using anchors as well. I hate anchors but its better than nothing if there is no javascript on the users browser.

I understand now thank you :). This is even better!

I have been having some pretty serious problems getting anything javascript related to work properly when using rel="#div" .

For example: One tab I have setup displays a div that includes a iframe with an id of "bottom". I have a simple javascript that opens a new email telling the user what the document title and document location of the file currently loaded into the iframe with an id of "bottom".


I also use the exact same script on another page ( I'm trying to condense) and it works fine and the only thing different is that I am displaying the div as a one of my tabs.

My tabs code is

Quote:

---

<script type="text/javascript">
var countries=new ddajaxtabs("tabs1","tabs1divcontainer")
countries.setpersist(false)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("oc.htm")!=-1){
var oc=new ddajaxtabs("octabs", "ocdivcontainer")
oc.setpersist(false)
oc.setselectedClassTarget("link") //"link" or "linkparent"
oc.init()
}

}

</script>

---

The code I cannot get to work is

Quote:

---

<script language="javascript" type="text/javascript">

function mailpage()
{
var hd="http://OMMITTED";
mail_str = "mailto:?subject= Helpdesk Article: " + bottom.document.title;
mail_str += "&body=You may want to look at this Help Desk article -- " + bottom.document.title ;
mail_str += " . %0D%0A%0D%0AYou can see this on the OMMITTED at: " + encodeURIComponent(bottom.location.href);
mail_str += ". %0D%0A%0D%0AI found it on the OMMITTED which is located " + encodeURIComponent(hd) + ".";
location.href = mail_str;
}
</script>

---

At this point the code only reads the information of the primary file/source of the iframe and doesnt read the information from any subsequent pages clicked inside of the iframe.

- Edit- I was thinking abou this and I was wondering if it is possible the code is reading the information from the original iframe that is hidden until it is put into #tabs1divcontainer

If this is the case does anyone have thoughts for a solution?