Tree Menu

**sharmin** · 08-04-2006, 04:57 PM

1) Script Title: Simple Tree Menu
Author: Dynamic Drive

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem: Getting Javascript errors or browser errors
..........................................................

Hello,

I have some questions, please help.

Problem 1 (Javascript syntax problem):
.........................................................

If you execute my webpage named page1, page2, page3, page4.htm, you will see that there is an browser error sign at internet explorer and at fire fox explorer bar. If I open the java script console of web development ( of tool menu ) at firefox, I get the following errors:

Warning: Non-standard Global Element reference was used. Use W3C standard document.getElementById() instead.
Source File: file:///C:/Documents%20and%20Settings/snajreen/Desktop/template/Templates/page4.htm
Line: 87

Warning: Non-standard Global Element reference was used. Use W3C standard document.getElementById() instead.
Source File: file:///C:/Documents%20and%20Settings/snajreen/Desktop/template/Templates/page4.htm
Line: 88
............etc..all complains are about these lines.

These are complaints about these following lines at the htm file:

if (full=="page4.htm")
{
page4.style.color="red"
page4.style.border="1px solid #eeeeee"
page4.style.fontWeight="bold"
page4.style.fontSize="15pt"

}, here the browser checks whether the current page is active, and if it were active, it makes the link to be appeared as red.

What is wrong in these lines? The page displays properly, but there is a browser error sign.

Problem 2( browser DOCTYPE Declaration Problem?):
...............................................................................

Another very important question about DOCTYPE.

I think my DOC type declaration at the very beginning of the htm file is wrong.

What it should be?

Should it be--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or

no DOCTYPE declaration

or

should it be

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

but if I declare my doctype, I cannot get the affect of the red active link at mozilla.

I am giving the zip folder so that you can unzip and see the codes and error signs.

Please help me to fix these browser error problems and the java error problems. Please respond.

Thank you.

**sharmin** · 08-04-2006, 05:19 PM

Originally Posted by sharmin

1) Script Title: Simple Tree Menu
Author: Dynamic Drive

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem: Getting Javascript errors or browser errors
..........................................................

Hello,

I have some questions, please help.

Problem 1 (Javascript syntax problem):
.........................................................

If you execute my webpage named page1, page2, page3, page4.htm, you will see that there is an browser error sign at internet explorer and at fire fox explorer bar. If I open the java script console of web development ( of tool menu ) at firefox, I get the following errors:

Warning: Non-standard Global Element reference was used. Use W3C standard document.getElementById() instead.
Source File: file:///C:/Documents%20and%20Settings/snajreen/Desktop/template/Templates/page4.htm
Line: 87

Warning: Non-standard Global Element reference was used. Use W3C standard document.getElementById() instead.
Source File: file:///C:/Documents%20and%20Settings/snajreen/Desktop/template/Templates/page4.htm
Line: 88
............etc..all complains are about these lines.

These are complaints about these following lines at the htm file:

if (full=="page4.htm")
{
page4.style.color="red"
page4.style.border="1px solid #eeeeee"
page4.style.fontWeight="bold"
page4.style.fontSize="15pt"

}, here the browser checks whether the current page is active, and if it were active, it makes the link to be appeared as red.

What is wrong in these lines? The page displays properly, but there is a browser error sign.

Problem 2( browser DOCTYPE Declaration Problem?):
...............................................................................

Another very important question about DOCTYPE.

I think my DOC type declaration at the very beginning of the htm file is wrong.

What it should be?

Should it be--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or

no DOCTYPE declaration

or

should it be

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

but if I declare my doctype, I cannot get the affect of the red active link at mozilla.

I am giving the zip folder so that you can unzip and see the codes and error signs.

Please help me to fix these browser error problems and the java error problems. Please respond.

Thank you.

Hello,

I just want to mention that I have changed my DOCTYPE to

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css">
<script type="text/javascript" src="simpletreemenu.js">

but i still get the errors, where one of the error is about ul rel attribute.

Please help.

**mburt** · 08-04-2006, 07:18 PM

Problem 1: What happened to the other lines of code? If I can recall there was a for-loop searching for the character "/" in the url. Displaying the filename. If that isn't there it won't work.

Problem 2: Not sure.

**sharmin** · 08-04-2006, 07:57 PM

Originally Posted by mburt

Problem 1: What happened to the other lines of code? If I can recall there was a for-loop searching for the character "/" in the url. Displaying the filename. If that isn't there it won't work.

Problem 2: Not sure.

The for loop is still there. I am still trying, but i need help.

thanks.

**mburt** · 08-04-2006, 08:01 PM

Can you post the whole code here?

**sharmin** · 08-05-2006, 08:24 PM

Hello, thank you for replying. I was very busy so I was not able to put the source here.

The test site is:http://userwww.sfsu.edu/~iamhappy/Te...ates/page1.htm

The source code is:

<!DOCTYPE html transitional>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css">
<script type="text/javascript" src="simpletreemenu.js">

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<link rel="stylesheet" href="simpletree.css" type="text/css">
<style type="text/css">

</style>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
<h1 id="siteName">Site Name</h1>

<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">



</div>


</div>

<div id="pagecell1">

<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr">
<div id="breadCrumb">
<a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> /
</div>

<div id="pageName">
<h2>Page Name</h2>
</div>

<div id="pageNav">
<div id="sectionLinks">
<script type="text/javascript">
onload=function() {
var url = document.location.href
var theChar
for (i = 0;i <= url.length;i++) {
if (url.charAt(i) == "/") {theChar = i}
}
var full = url.substring(theChar + 1,url.length)
if (url.charAt(url.length - 1) == "/") {full = url + "(unknown filetype)"}
if (full=="page1.htm")
{
page1.style.color="red"
page1.style.border="1px solid #eeeeee"
page1.style.fontWeight="bold"
page1.style.fontSize="15pt"

}
if (full=="page2.htm")
{
page2.style.color="red"
page2.style.border="1px solid #eeeeee"
page2.style.fontWeight="bold"
page2.style.fontSize="15pt"

}
if (full=="page3.htm")
{
page3.style.color="red"
page3.style.border="1px solid #eeeeee"
page3.style.fontWeight="bold"
page3.style.fontSize="15pt"

}
if (full=="page4.htm")
{
page4.style.color="red"
page4.style.border="1px solid #eeeeee"
page4.style.fontWeight="bold"
page4.style.fontSize="15pt"

}
}

</script>

<br>
<h4>Simple Tree Menu #1 (persist enabled):</h4>

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a>

<ul id="treemenu1" class="treeview">

<li><a href="#">Folder 1</a>
<ul>
<li><a href="page2.htm" id="page2">Page 2</a></li>
<li>Sub Item 1.2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="page3.htm" id="page3">Page 3</a></li>
<li><a href="page4.htm" id="page4">Page 4</a></li>
</ul>
</li>
<li><a href="page1.htm" id="page1">Page 1</a></li>
</ul>

<h4>Simple Tree Menu #2 (Folder 1.1 open by default):</h4>

<a href="javascript:ddtreemenu.flatten('treemenu2', 'expand')">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu2', 'contact')">Contact All</a>

<ul id="treemenu2" class="treeview">
<li>Item 1 </li>
<li><a href="#">Folder 1 </a>
<ul>
<li>Sub Item 1.1</li>
<li><a href="#">Folder 1.1</a>
<ul rel="open">
<li>Sub Item 1.1.1</li>
<li>Sub Item 1.1.2</li>
<li><a href="#">Folder 1.1</a>
<ul>
<li>Sub item 1.1.1.1</li>
<li>Sub item 1.1.1.2</li>
<li>Sub item 1.1.1.3</li>
<li>Sub item 1.1.1.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
</ul>
<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a> <a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a> <a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a>
</div>
<div id="advert">
Advertisement copy goes here.
Advertisement copy goes here.
</div>
</div>
<div id="content">

<div class="feature"> <img src="" alt="mainImage" width="280" height="200">
<h3>Feature Title </h3>
<p>Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>


<div class="story">
<h3>Story Title</h3>
<p> kk</p>
<p> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>


<div class="story">
<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">
<IMG src="" width="44" height="22" alt="image"> </IMG> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003
Company Name
</div>
</div>

<br>

</body>
</html>

And the link is, where I am testing it is:
http://userwww.sfsu.edu/~iamhappy/Te...ates/page1.htm

So I am mentioning again, you will see an ie error sign and if you open these pages through mozilla and open web developer java script console, it complains about some things; such as:

<script type="text/javascript">
onload=function() {
var url = document.location.href
var theChar
for (i = 0;i <= url.length;i++) {
if (url.charAt(i) == "/") {theChar = i}
}
var full = url.substring(theChar + 1,url.length)
if (url.charAt(url.length - 1) == "/") {full = url + "(unknown filetype)"}
if (full=="page1.htm")
{
page1.style.color="red"
page1.style.border="1px solid #eeeeee"
page1.style.fontWeight="bold"
page1.style.fontSize="15pt"

}
if (full=="page2.htm")
{
page2.style.color="red"
page2.style.border="1px solid #eeeeee"
page2.style.fontWeight="bold"
page2.style.fontSize="15pt"

}
if (full=="page3.htm")
{
page3.style.color="red"
page3.style.border="1px solid #eeeeee"
page3.style.fontWeight="bold"
page3.style.fontSize="15pt"

}
if (full=="page4.htm")
{
page4.style.color="red"
page4.style.border="1px solid #eeeeee"<------------------These blocks
page4.style.fontWeight="bold"
page4.style.fontSize="15pt"

}
}

</script>

etc.

If I remove the first two lines of the htm files, it works fine in ie but does not show the active link, properly, at mozilla and if I include doctype etc, it shows ie error sign message.

Any suggestion? Why error sign and why sometimes the active links does not appear correctly at mozilla?

Please help if you can...

**mburt** · 08-05-2006, 08:36 PM

This event handler is causing a problem, I removed it, then tested it, and now it works fine:

Code:

<body onmousemove="closesubnav(event);">

Remove the above in red

**sharmin** · 08-06-2006, 08:54 PM

Originally Posted by mburt

This event handler is causing a problem, I removed it, then tested it, and now it works fine:

Code:

<body onmousemove="closesubnav(event);">

Remove the above in red

Thank you so much; it works in ie and ff without an error.

.

Thanks mburt.

Thread: Tree Menu

Thread Tools

Search Thread

Tree Menu

Hello

Bookmarks

Bookmarks

Posting Permissions