PDA

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



TheSailor
10-26-2009, 04:56 PM
1) Script Title:
Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/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/dynamicindex17/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

ddadmin
10-27-2009, 09:09 AM
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.

TheSailor
10-27-2009, 08:07 PM
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)?

onigetoc
11-04-2009, 02:26 AM
It will be very usefull, with external and internal link we would'nt need no other tabs content script then this one

mortal
12-15-2009, 08:40 AM
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.

jscheuer1
12-15-2009, 01:19 PM
This is actually (I think) easier than it might appear. Edit ajaxtabs.js here (add highlighted):


//** 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:


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):


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

and call it like:


<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>

daninma
05-26-2010, 08:13 PM
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.

jscheuer1
05-27-2010, 05:24 AM
It could just be part of the configuration. Something like:


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


<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:


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

One could add here (addition highlighted):


<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.

daninma
05-28-2010, 02:08 PM
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!

daninma
06-07-2010, 08:59 PM
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



<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



<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?

daninma
06-16-2010, 05:00 PM
I am also having trouble when I load pages using ajax, not iframe. If the page being loaded has any javascript, the javascript doesnt work. I was told by someone that some functions need to be rebinded when you are dealing with loading pages via ajax.

If anyone already knows how solve this please let me know as it is a bit beyond my current level of understanding

ddadmin
06-16-2010, 11:07 PM
This is just a pesky limitation of Ajax. Pages fetched via Ajax should they contain JavaScripts within it in many cases won't run correctly when brought over this way. Ajax basically copies the contents of the external file similar to copying plain text and just dumps it onto the main page. Browsers don't know to interpret scripts or even CSS (in IE) within that copied content.

There are a few workarounds to this limitation in general, but as far as this script is concerned, the easiest way is just to load those pages using the IFRAME option...