Menu
What i want to do is,
divide the webpage in 2 frames. The one of the left hand side should have a collapsible folder tree menu with its own scrollbar for when the folder menu collapses and expands. And when some clicks on one of the link on the Left hand side, i want the link to open on the right hand side frame.
And, i want the data in both the frames to be seen at all point in time.
what i have right now, is a folder tree, on the left hand side frame, but when i click on one of the links it opens the link in a different window.. what do i have to do, so that it opens in the frame on the Right hand side. Also, i want a individual scroll bars for both the frames.
You can find the code that i have below.
FYI, i am a very beginner level javascript programmer!
Thank you!
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
<!–
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//–>
</style>
<script language=”JavaScript1.2″>
var head=”display:””
img1=new Image()
img1.src=”fold.gif”
img2=new Image()
img2.src=”open.gif”
function change(){
if(!document.all)
return
if (event.srcElement.id==”foldheader”) {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display==”none”) {
nested.style.display=”
event.srcElement.style.listStyleImage=”url(open.gif)”
}
else {
nested.style.display=”none”
event.srcElement.style.listStyleImage=”url(fold.gif)”
}
}
}
document.onclick=change
//–>
</script>
</HEAD>
<BODY>
<TABLE WIDTH=”95%” BORDER=”0″ CELLSPACING=”0″ CELLPADDING=”0″ HEIGHT=”100%”>
<TR>
<TD WIDTH=”160″ STYLE=”BORDER-RIGHT: solid 3px” BORDERCOLOR=”#8f8fc9″ VALIGN=”TOP”>
<table width=”250″ border=”0″ cellspacing=”0″ cellpadding=”0″ class=”bodytext”>
<tr>
<td><img src=”/images/spacer.gif” width=”250″ height=”8″ align=”bottom”></td>
</tr>
<tr>
<td>
<font color=”#013894″ size=”2″ face=”Verdana, Arial, Helvetica, sans-serif”><b>Archives</b></font></div>
</td>
</tr>
<tr>
<td><img src=”/images/line_horz2.gif” width=”250″ height=”4″></td>
</tr>
<tr>
<td> </td>
</tr>
<tr valign=”top”>
<td style=”padding-left:5; padding-top:5;”>
<ul>
<li id=”foldheader”>2001</li>
<ul id=”foldinglist” style=”display:none” style=&{head};>
<li><a href=”_blank”>January ’01</a></li>
<li><a href=”
<li><a href=”_blank”>March ’01</a></li>
<li><a href=”
<li><a href=”_blank”>May ’01</a></li>
<li><a href=”
<li><a href=”_blank”>July ’01</a></li>
<li><a href=”
<li><a href=”_blank”>September ’01</a></li>
<li><a href=”
<li><a href=”_blank”>November ’01</a></li>
<li><a href=”
</ul>
<li id=”foldheader”>2002</li>
<ul id=”foldinglist” style=”display:none” style=&{head};>
<li><a href=”_blank”>January ’01</a></li>
<li><a href=”
<li><a href=”_blank”>March ’01</a></li>
<li><a href=”
<li><a href=”_blank”>May ’01</a></li>
<li><a href=”
<li><a href=”_blank”>July ’01</a></li>
<li><a href=”
<li><a href=”_blank”>September ’01</a></li>
<li><a href=”
<li><a href=”_blank”>November ’01</a></li>
<li><a href=”
</ul>
</td>
</tr>
</table>
</TD>
<TD WIDTH=”30″><IMG SRC=”/products/images/spacer.gif” WIDTH=”30″ HEIGHT=”5″></TD>
<TD VALIGN=”TOP”>
<TABLE WIDTH=”100%” BORDER=”0″ CELLSPACING=”0″ CELLPADDING=”0″>
<TR>
<TD COLSPAN=”3″> </TD>
</TR>
<TR>
<TD COLSPAN=”3″>
<div align=”left”>
</div>
</TD>
</TR>
<TR>
<TD COLSPAN=”3″ valign=”top”><span class=”requiremetssm”>Hello!?
</span><br>
<span class=”bodytext”>Good Morning!</span></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>