Rob82
02-01-2006, 11:54 PM
hey guys
any help would be much appreciated :) and go easy as i am new to javascript.
i am trying to make my online directory of the web dynamic http://directory.rieder.co.uk/ (ignore the content - desperately needs updating). i am thinking a list of categories which i can expand and collapse indendently and have sub categories that expand and collapse.
i looked at collapsable menus on dynamic drive and tried to modify some of them....
get an idea of what i mean - here is as far as i got:
http://www.rieder.co.uk/dynamicforum/testmenu.html
here is the code for that page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
margin: 0px;
FONT-FAMILY: verdana, arial, serif;
}
H1 {
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
color: #FF9999;
MARGIN-TOP: 0px;
MARGIN-bottom: 0px;
PADDING-TOP: 4px;
PADDING-TOP: 1px;
}
.menutitle{
cursor:pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:950px;
padding:2px;
FONT-SIZE: 17px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}
.submenutitle{
cursor:pointer;
margin-left: 20px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:750px;
padding:2px;
FONT-SIZE: 12px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
/*display: none;*/
}
A:link {
COLOR: black;
TEXT-DECORATION: none;
FONT-SIZE: 12px;
margin-left: 15px;
}
A:visited {
COLOR: black;
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
UL {
MARGIN-LEFT: 15px;
LIST-STYLE-TYPE: square;
MARGIN-TOP: 0px;
MARGIN-bottom: 10px;
FONT-SIZE: 12px;
}
TD {
vertical-align:top;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
color: #787878;
FONT-SIZE: 12px;
MARGIN-BOTTOM: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
}
</style>
<script type="text/javascript">
/*
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}*/
/*
function ExpandCollapse(obj){
var element = document.getElementById(obj);
if(element.style.display = "block"){
element.style.display = "none";
}else{
element.style.display = "block";
}
}*/
function ExpandCollapse(obj){
var element = document.getElementById(obj);
if(element.style.display = "block"){
element.style.display = "none";
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="main" width="950" align="center">
<tr><td>
<div class="menutitle" onclick="ExpandCollapse('sub1')">Structural Engineering</div>
<span class="submenu" id="sub1">
<a href="new.htm">What's New</a><br>
<a href="hot.htm">What's hot</a><br>
<a href="revised.htm">Revised Scripts</a><br>
<a href="morezone/">More Zone</a>
<div class="submenutitle" onclick="ExpandCollapse('sub2')">Consultancy Firms</div>
<span class="submenu" id="sub2">
<a href="new.htm">What's New</a><br>
<a href="hot.htm">What's hot</a><br>
<a href="revised.htm">Revised Scripts</a><br>
<a href="morezone/">More Zone</a>
</span>
</span>
</td></tr>
</table>
<br /><br />
<br /><br />
<table align="center" width="750" border="0" bordercolor="black" cellpadding="0" cellspacing="0"><tr>
<!-- ********************************************column 1************************************************** -->
<td width="250">
<h1>My Sites</h1>
<UL>
<LI><A class=m href="http://www.rieder.co.uk" target="_blank" >rieder.co.uk</A></li>
<LI><A class=m href="http://www.rieder.co.uk/cpanel" target="_blank" >rieder.co.uk</A> control panel</li>
<LI><A class=m href="http://people.bath.ac.uk/ab3raar/" target="_blank">Uni home page</A></li>
<LI><A class=m href="http://www.bath.ac.uk/ace/cplusplus" target="_blank">An Introduction to C++ for Engineers</A></li>
</UL>
</td>
<td width="15"> </td>
<!-- *******************************************column 2*************************************************** -->
<td width="250">
<h1>Banking</h1>
<UL>
<LI><A class=m href="http://www.ibank.barclays.co.uk" target="_blank">Barclay's</A></li>
<LI><A class=m href="http://www.barclaycard.co.uk/" target="_blank">Barclaycard</A></li>
</UL>
<h1>Email</h1>
<UL>
<LI><A class=m href="https://webmail.bath.ac.uk" target="_blank">Bath Uni Webmail</A></li>
</UL>
</td>
<td width="15"> </td>
<!-- *******************************************column 3*************************************************** -->
<td width="250">
<h1>?</h1>
<UL>
<LI><A class=m href="http://www.dynamicdrive.com/" target="_blank">Dynamic Drive</A></li>
<LI><A class=m href="http://www.acenet.co.uk/default.cfm" target="_blank">ACE net?</A></li>
</UL>
</td>
</tr>
</table>
</body>
</html>
NOTICE - that the menu items collapse but do not expand again. am i half way or what?!
Rob
any help would be much appreciated :) and go easy as i am new to javascript.
i am trying to make my online directory of the web dynamic http://directory.rieder.co.uk/ (ignore the content - desperately needs updating). i am thinking a list of categories which i can expand and collapse indendently and have sub categories that expand and collapse.
i looked at collapsable menus on dynamic drive and tried to modify some of them....
get an idea of what i mean - here is as far as i got:
http://www.rieder.co.uk/dynamicforum/testmenu.html
here is the code for that page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
margin: 0px;
FONT-FAMILY: verdana, arial, serif;
}
H1 {
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
color: #FF9999;
MARGIN-TOP: 0px;
MARGIN-bottom: 0px;
PADDING-TOP: 4px;
PADDING-TOP: 1px;
}
.menutitle{
cursor:pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:950px;
padding:2px;
FONT-SIZE: 17px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}
.submenutitle{
cursor:pointer;
margin-left: 20px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:750px;
padding:2px;
FONT-SIZE: 12px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
/*display: none;*/
}
A:link {
COLOR: black;
TEXT-DECORATION: none;
FONT-SIZE: 12px;
margin-left: 15px;
}
A:visited {
COLOR: black;
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
UL {
MARGIN-LEFT: 15px;
LIST-STYLE-TYPE: square;
MARGIN-TOP: 0px;
MARGIN-bottom: 10px;
FONT-SIZE: 12px;
}
TD {
vertical-align:top;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
color: #787878;
FONT-SIZE: 12px;
MARGIN-BOTTOM: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
}
</style>
<script type="text/javascript">
/*
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}*/
/*
function ExpandCollapse(obj){
var element = document.getElementById(obj);
if(element.style.display = "block"){
element.style.display = "none";
}else{
element.style.display = "block";
}
}*/
function ExpandCollapse(obj){
var element = document.getElementById(obj);
if(element.style.display = "block"){
element.style.display = "none";
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="main" width="950" align="center">
<tr><td>
<div class="menutitle" onclick="ExpandCollapse('sub1')">Structural Engineering</div>
<span class="submenu" id="sub1">
<a href="new.htm">What's New</a><br>
<a href="hot.htm">What's hot</a><br>
<a href="revised.htm">Revised Scripts</a><br>
<a href="morezone/">More Zone</a>
<div class="submenutitle" onclick="ExpandCollapse('sub2')">Consultancy Firms</div>
<span class="submenu" id="sub2">
<a href="new.htm">What's New</a><br>
<a href="hot.htm">What's hot</a><br>
<a href="revised.htm">Revised Scripts</a><br>
<a href="morezone/">More Zone</a>
</span>
</span>
</td></tr>
</table>
<br /><br />
<br /><br />
<table align="center" width="750" border="0" bordercolor="black" cellpadding="0" cellspacing="0"><tr>
<!-- ********************************************column 1************************************************** -->
<td width="250">
<h1>My Sites</h1>
<UL>
<LI><A class=m href="http://www.rieder.co.uk" target="_blank" >rieder.co.uk</A></li>
<LI><A class=m href="http://www.rieder.co.uk/cpanel" target="_blank" >rieder.co.uk</A> control panel</li>
<LI><A class=m href="http://people.bath.ac.uk/ab3raar/" target="_blank">Uni home page</A></li>
<LI><A class=m href="http://www.bath.ac.uk/ace/cplusplus" target="_blank">An Introduction to C++ for Engineers</A></li>
</UL>
</td>
<td width="15"> </td>
<!-- *******************************************column 2*************************************************** -->
<td width="250">
<h1>Banking</h1>
<UL>
<LI><A class=m href="http://www.ibank.barclays.co.uk" target="_blank">Barclay's</A></li>
<LI><A class=m href="http://www.barclaycard.co.uk/" target="_blank">Barclaycard</A></li>
</UL>
<h1>Email</h1>
<UL>
<LI><A class=m href="https://webmail.bath.ac.uk" target="_blank">Bath Uni Webmail</A></li>
</UL>
</td>
<td width="15"> </td>
<!-- *******************************************column 3*************************************************** -->
<td width="250">
<h1>?</h1>
<UL>
<LI><A class=m href="http://www.dynamicdrive.com/" target="_blank">Dynamic Drive</A></li>
<LI><A class=m href="http://www.acenet.co.uk/default.cfm" target="_blank">ACE net?</A></li>
</UL>
</td>
</tr>
</table>
</body>
</html>
NOTICE - that the menu items collapse but do not expand again. am i half way or what?!
Rob