PDA

View Full Version : Highlighting a Tab from an external link



mziul
02-21-2007, 05:43 PM
1) Script Title: Tabbed Document Viewer

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

jscheuer1
02-22-2007, 04:52 AM
You might want things a little different but, here is a basic mod as per your request:


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