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

Thread: Ajax tabs: Loading external links into tabs div

  1. #1
    Join Date
    Sep 2006
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ajax tabs: Loading external links into tabs div

    1) Script Title:
    Ajax Tabs Content

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

    3)Site URL
    http://www.artisanculturedstone.com/new/

    4) Describe problem:
    This is a fantastic script! What I am trying to do is get the links that are contained in the external pages (i.e. external.htm) to load in the div that the tabs load into. For instance, I want the PRODUCT PAGE link in the sidebar on my site to load into the ajaxcontentarea div and preferrably load with that tab selected. I also want, for instance, the contact us link on the default tab to load contact.html in the ajaxcontentarea div. I hope this makes sense. I searched for quite a while to find a post addressing this but couldn't find anything. Let me know what you guys think would be a good solution for this.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Sep 2006
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks. I already read this post but I guess I was unclear about it. I'll try this then.

  4. #4
    Join Date
    Sep 2006
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    This isn't really what I want to do. If I understand this right...you would be on a non-tabbed page (index.htm) and want to link to a specific tab on tabs.htm.

    What I want is when I already have a tab loaded in the ajaxconentarea div I will have a link or links within that file that I want to load into the same div.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I see what you mean. OK, the tabs are numbered from 0 to however many you have, and the function ajaxpage() is what really does the switching. So, if you put this function in the head of your Ajax page, the top page, the one with the tabs on it, like so:

    Code:
    <script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
    
    /***********************************************
    * Ajax Tabs Content script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    <script type="text/javascript">
    function linkjax(h, a, n){
    ajaxpage(h,a,document.getElementById('maintab').getElementsByTagName('li')[n].firstChild);
    }
    </script>
    Making sure that maintab in the above is the id of the <ul> element (from the demo):

    Code:
    <ul id="maintab" class="shadetabs">
    <li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
    <li><a href="externa . . .
    You can now use a link anywhere on the page or within any added tab content (the external#.htm pages in the demo) like so:

    Code:
    <a href="javascript:linkjax('external14.htm', 'ajaxcontentarea', 2)">Link Text</a>
    The red 2 is the number of the tab you are targeting, it can be the same tab currently displaying or any tab available on the top page.

    Remember the tabs are numbered starting with 0, not 1.
    - John
    ________________________

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

  6. #6
    Join Date
    Sep 2006
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    B-e-a-utiful! Thanks much. That works great! I had to modify it just a hair so I could load links from my second set of tabs too.
    Code:
    <script type="text/javascript">
    function linkjax(h, a, n){
    ajaxpage(h,a,document.getElementById('maintab', 'facts').getElementsByTagName('li')[n].firstChild);
    }
    </script>
    Thanks again
    Last edited by synergy; 09-14-2006 at 08:49 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I really don't think that will work in most browsers. Try this for the linkjax function:

    Code:
    function linkjax(h, a, n, tid){
    ajaxpage(h,a,document.getElementById(tid).getElementsByTagName('li')[n].firstChild);
    }
    and this for the link:

    Code:
    <a href="javascript:linkjax('external14.htm', 'ajaxcontentarea2', 2, 'facts')">Link Text</a>
    The part added in red tells the new linkjax() function which tab set to use.
    - John
    ________________________

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

  8. #8
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks jscheuer1! All works!
    But how about "BACK" button?

    Example:
    My 2 tab named "News" and contents a list of links to news. When I click on some link I scream "B-e-a-utiful! Thanks jscheuer1! All works!" but when I want to go back to news list and click BACK in browser.....

    I believe it possible. ))

  9. #9
    Join Date
    Jan 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    When the links within that div are clicked, write a cookie with the current tab info. When the page loads after clicking the back button, it will read from the cookie and go to the specified tab upon page load.

  10. #10
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you.
    Where can I get an example of how to write this to the cookie? I'm a total newbie.
    Last edited by yurican; 02-12-2007 at 04:50 AM.

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
  •