Forum Moderators: open

Message Too Old, No Replies

Tabbed window wont activate

         

whizkiddo

10:14 am on Dec 14, 2007 (gmt 0)

10+ Year Member



The stupid thing wont activate the tab that it is supposed to ; so the visitor does not know which tab he clicked last (the one on which he is currently on). Its a fairly simple problem , I have used CSS along with javascript of course, anyone please let me know , I would like to PM the url and it should just take you a minute to find out where I made the mistake. As for me, its just cottage cheese betn the ears for now.

<script type="text/javascript">

function synchTab(frameName) {

var elList, i;

// Exit if no frame name was given.

if (frameName == null)
return;

// Check all links.

elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)

// Check if the link's target matches the frame being loaded.

if (elList[i].target == frameName) {

// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.

if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += "activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}

function removeName(el, name) {

var i, curList, newList;

if (el.className == null)
return;

// Remove the given class name from the element's className property.

newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i]!= name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

//]]></script>

whizkiddo

10:16 am on Dec 14, 2007 (gmt 0)

10+ Year Member



I am adding the relevant CSS here

div.tabBox {}

div.tabArea {
font-size: 80%;
font-style: georgia; font-color:#000000;
padding: 0px 0px 3px 0px;
}

a.tab {
background-color: #f0f4f5;
border: 2px solid #CBCBCB;
border-bottom-width: 0px;
border-color: #CBCBCB #CBCBCB #CBCBCB #CBCBCB;
-moz-border-radius: .75em .75em 0em 0em;
border-radius-topleft: .75em;
border-radius-topright: .75em;
padding: 2px 1em 2px 1em;
position: relative;
text-decoration: none;
top: 3px;
z-index: 100;
}

a.tab, a.tab:visited {
color: #004276;
}

a.tab:hover {
background-color: #004276;
border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
color: #ffe0ff;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
background-color: #004276;
border-color: #b090e0 #7050a0 #7050a0 #b090e0;
color: #004276;
}

a.tab.activeTab {
background-color: #004276;
padding-bottom: 4px;
top: 1px;
z-index: 102;
}

div.tabMain {
background-color: #f0f4f5;
border: 2px solid #000000;
border-color: #CBCBCB #CBCBCB #CBCBCB #CBCBCB;
-moz-border-radius: 0em .5em .5em 0em;
border-radius-topright: .5em;
border-radius-bottomright: .5em;
padding: .5em;
position: relative;
z-index: 101;
}

div.tabIframeWrapper {
width: 100%;
}

iframe.tabContent {
background-color: #9070c0;
border: 1px solid #000000;
border-color: #7050a0 #b090e0 #b090e0 #7050a0;
width: 100%;
height: 36ex;
}