My website has a members area with some nested framesets like this:
A webpage (toolbar.html) creates a header frame across the top (headerFr), and then the bottom frame (mainFr)
The source of mainFr is another frameset: a left panel (panelFr) and a main content window (botFr).
I can include the frameset HTML if it is necessary... but I dont think that this is the problem.
The links in the headerFr call javascript code to change both of the other frames. Further, there is some javascript code in the panel frame that actually changes the color of some pieces in the header frame. I tested and re-tested all of this and it works great.
Just in the last few weeks, I am getting complaints from some that the javascript links in the headerFr are not working. The common thread is that the users are using Windows XP with IE6.
--------------------------
----------
----------
-
HTML from headerFr:
<HTML>
<HEAD>
<META Http-Equiv="Cache-Control"
Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<!--
-->
<script type="text/javascript" language="JavaScript">
<!--
if (top.location == self.location) { top.location.href="toolbar
.html" }
//-->
function selectNavTab(name) {
var element,i,classNm;
navElement = new Array("NAV1","NAV2","NAV3"
,"NAVlogou
t")
for (i=0;i<navElement.length;i
++) {
if (document.getElementById(n
avElement[
i])) {
element = document.getElementById(na
vElement[i
]);
classNm = (name == navElement[i]) ? "select" : "";
element.className=classNm;
}
}
}
</script>
<SCRIPT type="text/javascript" language = "JavaScript">
<!--
function changeNAV(whichPage) {
switch (whichPage) {
case "NAV1" :
selectNavTab("NAV1");
parent.mainFr.panelFr.loca
tion.href=
"**loc**";
parent.mainFr.botFr.locati
on.href="*
*loc**";
break;
case "NAV2" :
selectNavTab("NAV2");
parent.mainFr.panelFr.loca
tion.href=
"**loc**";
parent.mainFr.botFr.locati
on.href="*
*loc**";
break;
case "NAV3" :
selectNavTab("NAV3");
parent.mainFr.panelFr.loca
tion.href=
"**loc**";
parent.mainFr.botFr.locati
on.href="*
*loc**";
break;
case "NAVlogout" :
selectNavTab("NAVlogout");
parent.mainFr.botFr.locati
on.href="l
ogout.cgi"
;
break;
}
}
//-->
</SCRIPT>
</HEAD>
<STYLE>
BODY {margin-left:0px;}
#navigation {
font-family:verdana;
font-size: 11px;
font-weight: bold;
}
#navigation A {
color: #000;
background: #fc0 url("/images/members/tab-F
FCC00-left
.gif") left top no-repeat;
text-decoration: none;
padding-left:10px;
}
#navigation A span {
background: url("/images/members/tab-F
FCC00-righ
t.gif") right top no-repeat;
padding-right: 10px;
}
#navigation A:hover {
color: #fff;
background: #000040 url("/images/members/tab-0
00040-left
.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation A:hover span {
background: url("/images/members/tab-0
00040-righ
t.gif") right top no-repeat;
padding-right: 10px
}
#navigation A.select {
color: #fff;
background: #000040 url("/images/members/tab-0
00040-left
.gif") left top no-repeat;
text-decoration: none;
padding-left:10px;
}
#navigation A.select span {
background: url("/images/members/tab-0
00040-righ
t.gif") right top no-repeat;
padding-right: 10px;
}
#navigation A.select:hover {
color: #fff;
background: #000040 url("/images/members/tab-0
00040-left
.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
display: block;
margin: 0;
padding: 0;
}
.headline {
font-family:Tahoma,verdana
;
font-size:16px;
color: #000040;
font-weight:bold;
}
</STYLE>
<BODY>
<table bgcolor="#FFFFFF" width="100%" height="60" border="0" cellspacing="0" cellpadding="0">
<TR valign=top><TD align="left">
<TABLE border=0 cellpadding=0 cellspacing=0>
<tr valign=top><td style='padding-left:15px;p
adding-bot
tom:3px;'>
<img src="/images/logo/logo_sma
ll.gif"></
TD>
<TD style='padding-left:5px;pa
dding-bott
om:3px;' nowrap><span class='headline'>Members Area</span></TD>
</TR>
</TABLE>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<TR>
<TD>
<ul id="navigation">
<li><a href="javascript:changeNAV
('NAV1');"
id="NAV1" class="select"><span>Home<
/span></a>
</li>
<li><a href="javascript:changeNAV
('NAV2');"
id="NAV2" ><span>Area1</span></a></l
i>
<li><a href="javascript:changeNAV
('NAV3');"
id="NAV3" ><span>Area2</span></a></l
i>
<li><a href="javascript:changeNAV
('NAVlogou
t');" id="NAVlogout" ><span>Log Out</span></a></li>
<li><a href="**loc**" target="_top"><span>Having
Trouble?</span></a></li>
</ul>
</TD>
</TR>
<TR><TD bgcolor="#000040"> </
TD></TR>
</table>
</TD>
</TR>
</table>
</BODY>
</HTML>
--------------------------
----------
----------
--
--------------------------
----------
----------
--
sample HTML from panelFr:
<HTML>
<HEAD>
<META Http-Equiv="Cache-Control"
Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<link href="/stylesht/members_on
ly/NEWmenu
.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT" SRC="/javascript/members_o
nly.js">
</SCRIPT>
<TITLE>Nav Bar</TITLE>
<!-- CHANGE Select Tab in Header Frame -->
<script type="text/javascript" language="JavaScript">
if (top.location == self.location) { top.location.href="toolbar
.html" }
parent.parent.headerFr.sel
ectNavTab(
"NAV1");
</script>
</HEAD>
<BODY BGCOLOR="#000040" topmargin="0" leftmargin="0">
<table border=0 width="130" cellpadding="0" cellspacing="0">
<TR><TD></TD><TD><HR color="darkblue"></TD></TR
>
<!-- HOME -->
<TR valign="top"><td valign=top nowrap height="14"><img src="/images/folder.gif" width=14 height=11 border=0></td><td valign=top nowrap><span class="heading"> Home
</span></t
d></tr>
<TR valign="top"><TD></TD><td valign=top nowrap> <a class="subhead" href="member_intropage.htm
l" target="botFr" onMouseover="window.status
='Return To Members Area Home';return true" onMouseout="window.status=
'';return true">Home <span style="font-size:10px;font
-family:Ar
ial;">(acc
t. overview)</span></a></td><
/tr>
<TR><TD></TD><TD><HR color="darkblue"></TD></TR
>
<!-- ADMIN -->
<TR valign="top"><td valign=top nowrap height="14"><img src="/images/wsr/folder.gi
f" width=14 height=11 border=0></td><td><span class="heading"> Admi
n</span></
td></tr>
<TR valign="top"><TD></td><td valign=top nowrap><a class="subhead" href="**ACTION**" target="botFr" onMouseover="window.status
='Do this action...';return true" onMouseout="window.status=
'';return true">Action 1</a></td></tr>
<TR valign="top"><TD></td><td valign=top nowrap><a class="subhead" href=**ACTION**" target="botFr" onMouseover="window.status
='Do this action...';return true" onMouseout="window.status=
'';return true">Action 2</a></td></tr>
<TR><TD></TD><TD><HR color="darkblue"></TD></TR
>
</table>
</BODY>
</HTML>
==========================
==========
==
From those that are complaining, links from the panelFr DO change the content of botFr, but nothing happens when clicking the links in the headerFr.
I cannot duplicate this problem, and have tried using several different browsers on Mac and PC. Very frustrating.
"toolbar.html" calls the opening frameset (headerFr and mainFr), just in case someone tries to open a subframe in a new window.
I have been researching the popup blocker angle, and asking someone with problems to <control>click the links does not help.
Anyone?
Start Free Trial