Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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
    Last edited by TheSailor; 10-27-2009 at 01:35 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

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

  3. #3
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Last edited by daninma; 05-26-2010 at 08:59 PM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

    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.
    Last edited by jscheuer1; 05-28-2010 at 03:18 PM. Reason: sentence structure
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    daninma (05-27-2010)

  10. #9
    Join Date
    May 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  11. #10
    Join Date
    May 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by daninma; 06-07-2010 at 09:04 PM.

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
  •