Results 1 to 2 of 2

Thread: Highlighting a Tab from an external link

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

    Default Highlighting a Tab from an external link

    1) Script Title: Tabbed Document Viewer

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

    3) Describe problem:
    I have been trying to find a way to create links on the page which are not on the tablist, display content in the iframe and also highlight the corresponding tab.

    So far, I've only come up with:

    <a href="external.htm" onClick="return handlelink(this)">Link title</a>

    I need the Tabbed Document Viewer and not the Tab Content script, nor the Ajax one, since pages with both other scripts will be displayed inside the Doc Viewers iframe.

    Any help will be greatly appreciated.!

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

    Default

    You might want things a little different but, here is a basic mod as per your request:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    /*Eric Meyer's based CSS tab*/
    
    #tablist{
    padding: 3px 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0.1em;
    font: bold 12px Verdana;
    }
    
    #tablist li{
    list-style: none;
    display: inline;
    margin: 0;
    }
    
    #tablist li a{
    text-decoration: none;
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: white;
    }
    
    #tablist li a:link, #tablist li a:visited{
    color: navy;
    }
    
    #tablist li a:hover{
    color: #000000;
    background: #C1C1FF;
    border-color: #227;
    }
    
    #tablist li a.current{
    background: lightyellow;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Tabbed Document Viewer 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
    ***********************************************/
    
    var selectedtablink=""
    var tcischecked=false
    
    function handlelink(aobject, bobj){
    selectedtablink=bobj? bobj.href : aobject.href;
    if(bobj){
    aobject.innerHTML=bobj.innerHTML;
    aobject.href=bobj.href;
    }
    tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
    if (document.getElementById && !tcischecked){
    var tabobj=document.getElementById("tablist")
    var tabobjlinks=tabobj.getElementsByTagName("A")
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].className=""
    aobject.className="current"
    document.getElementById("tabiframe").src=selectedtablink
    return false
    }
    else
    return true
    }
    
    function handleview(){
    tcischecked=document.tabcontrol.tabcheck.checked
    if (document.getElementById && tcischecked){
    if (selectedtablink!="")
    window.location=selectedtablink
    }
    }
    
    </script>
    </head>
    <body>
    <ul id="tablist">
    <li><a id="tab1" class="current" href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
    <li><a id="tab2" href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>
    <li><a id="tab3" href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
    <li><a id="tab4" href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
    <li><a id="tab5" href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
    </ul>
    <iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>
    
    <form name="tabcontrol" style="margin-top:0">
    <input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
    </form>
    <a href="http://www.evolt.org/" onclick="return handlelink(document.getElementById('tab1'), this);">Evolt</a><br>
    <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=91094417" onclick="return handlelink(document.getElementById('tab2'), this);">Maureen</a><br>
    <a href="http://www.quirksmode.org" onclick="return handlelink(document.getElementById('tab3'), this);">Quirksmode</a><br>
    <a href="http://www.twey.co.uk/" onclick="return handlelink(document.getElementById('tab4'), this);">Twey.uk</a><br>
    <a href="http://www.dynamicdrive.com/forums" onclick="return handlelink(document.getElementById('tab5'), this);">DD Forums</a><br>
    </body>
    </html>
    Let me know if you have any questions or additional modifications (within reason) in mind.
    - John
    ________________________

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

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
  •