embedding DHTML with a .js file into an HTML table

DHTML and tables via .js array

[bvinson]

I'm trying to use a dhtml script (folding tree menu) and want to place it in an html table via some kind of include file. My goal in doing this is to edit one file for web navigation changes so I don't have to change each web page. Can you please offer me a suggestion? The dhtml file I'm using came from Dynamic Drive (Folding Tree Menu).

[bvinson]

Is there something else I need to include in this request for help? No one has responded yet and I really need the help. Thanks

[Purple Martin]

Hi bvinson, welcome to Webmaster World!

Put the JavaScript for the menu in a .js file. You don't need <script> tags in that file, just the JavaScript code.

Now put this tag where you want the menu inside your table:
<script type="text/javascript" src="menucode.js"></script>

You can put this in as many pages as you like, so that they all use the same .js file for their menu.

[bvinson]

Thank you for answering and for the welcome.

I fixed my errors based on your advice, but I'm still doing something wrong. I'm going to insert a small piece of the code so that maybe you can tell me what I'm doing in error if you have time. The code is DHTML, inserted into a table tag. I copied the DHTML and saved it as a .js file, then inserted the code as stated. I'm not very good at this, so any help is appreciated. Here is what I did:

partial dhtml code:

//placed in head tags...

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit [dynamicdrive.com...]
//This credit MUST stay intact for use

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode¦¦(ie4&&cur.parentElement)){
if (cur.id=="foldheader"¦¦cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4¦¦ns6)
document.onclick=checkcontained

//-->
</script>

//the following code was placed in "tree-menu.js" file then inserted as..

<script type="text/javascript" src="tree-menu.js">
</script>

//DHTML code saved as "tree-menu.js" file:

<font face="Arial">

<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
</ul>

<li id="foldheader">Webmaster</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>

<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer 1</a></li>
<li><a href="http://www.dynamicdrive.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer 3</a></li>
<li><a href="http://www.dynamicdrive.com">outer 4</a></li>
</ul>
</ul>

</font>

//end of .js file

//this is how/where I inserted the code.

<tr>
<td width="23%" height="1" valign="top" style="margin-top: 5" rowspan="2" bgcolor="#D3D0E3">

<script type="text/javascript" src="tree-menu.js">
</script>

<img border="0" src="images/3-starsSml.gif" width="158" height="33"><table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%">
<font size="2"><b>How does all this affect the Navy?</b></font><p>
<font size="2"><b>If I have a Best Practice, what do I do and who do I contact?</b></font></td>
</tr>
</table>

//end of partial code........

Hopefully you can make sense of this and tell me what I should do. I truly appreciate the help!