JavaScript - why is this not Mozilla compatible?

**Acidic** · Nov 16th, 2003, 07:50 AM

I have a fairly long script which basically makes a menu. I wanted it like this as it is really easy for me to add more items to it. you can see it at:
http://acid.freewebpage.org

Now, why does it only work on IE?
Here's the code:

Code:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Acidic Library - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="menu.js"></script>
<script language="JavaScript">
if (navigator.appName != "Microsoft Internet Explorer")
	{
	alert("sorry, but so far this site is only Internet Explorer compatible. I'm trying to fix this.")
	}
function make_menu() {
var gmenu = document.getElementById('linksmenu')
gmenu.innerHTML = "<table><tr>"
for (i=0; i<main_list.length; i++)
	{
	gmenu.innerHTML += "<td><br><br><span id='" + main_list[i][0] + "' onClick='sub_menu(this.id)' STYLE='cursor: pointer'>" + main_list[i][0] + "</span></td>"
	}
gmenu.innerHTML += "</tr></table>"
}

function sub_menu(id) {
for (i=0; i<main_list.length; i++)
	{
	if (id == main_list[i][0])
		{
		if (main_list[i][0] != document.getElementById(id).innerHTML) //Submenu is already open
			{
			document.getElementById(id).innerHTML = main_list[i][0]
			}
		else
			{
			if (main_list[i][1] == 0) //If menu item goes to URL, not opens submenu
				{
				document.location = main_list[i][2]
				}
			else //If menu item opens submenu
				{
				var mmenu = document.getElementById(id)
				mmenu.innerHTML = "<td><i><span id='" + main_list[i][0] + "' onClick='sub_menu(this.id)' STYLE='cursor: pointer'><br>" + main_list[i][0] + "</i></span></b><br><br></td>"
				for (j=0; j<eval(id).length; j++)
					{
					mmenu.innerHTML += "<a href='" + main_list[i][2] + "" + eval(id)[j][1] + "'>" + eval(id)[j][0] + "</a><br>"
					}
				}
			}
		}
	}
}
</script>
</head>

<body background="background.jpg" bgproperties="fixed" onLoad="make_menu()">
<table width="80%" border="5" align="center" cellpadding="0" cellspacing="20" bordercolor="#7979FF" bgcolor="#E6E6FF">
  <tr>
    <td width="28%"> 
<p><b><b></b><span id="linksmenu">Generating List...</span></b></p></td>
    <td width="72%"> <p>Hi and welcome to the most boring part of the site. On 
        the left you have the list of all my script. If you have any construcive 
        comments or want to contribute to this website, please feel free to contact 
        me.
<hr>
      <p><br>
        <strong>News:<br>
        </strong>15/11/03<br>
        Made the pointer cursor show on the menu. Started making VB application 
        that you can download and browse through the scripts. Realised that this 
        will take time.</p>
      <p>12/11/03<br>
        Adding JavaScripts to the list, getting very bored of it. Made the JScript.html 
        page. Put page on-line</p>
      <p><Br>
        10/11/03<br>
        Started making the site.<br>
        Got the menu sorted, adding things to it.</p>
      </td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

here's the menu.js file:

Code:

//List to go into the menu
main_list = new Array()
main_list[0] = ["Home","0","index.html"]
main_list[1] = ["JavaScript","1","http://acid.freewebpage.org/JScript.html?"]
main_list[2] = ["Contact","0","contact.html"]
main_list[3] = ["Links","1","http://"]

JavaScript = new Array()
JavaScript[0] = ["Bubble Sort","0001"]
JavaScript[1] = ["Temperature Conversion","0002"]
JavaScript[2] = ["Matrix","0003"]
JavaScript[3] = ["BBC news","0004"]
JavaScript[4] = ["Changing cell data","0005"]
JavaScript[5] = ["Opacity","0006"]
JavaScript[6] = ["Cookies","0007"]
JavaScript[7] = ["Scrolling news","0008"]

Links = new Array()
Links[0] = ["JS-World","www.js-x.com"]
Links[1] = ["HTML Goodies","www.htmlgoodies.com"]

P.S. can I specify the code type for HTML/JavaScript as you can with VB?

**CornedBee** · Nov 16th, 2003, 08:17 AM

The alert box is extremly annoying.

Except that a clicked menu jumps down somewhat, it works in Mozilla. Why it jumps down I don't know, and the innerHTML stuff is too tiresome for me sort out.

**Acidic** · Nov 16th, 2003, 08:19 AM

the alert box is only temporary, I use Mozilla FireBird, this makes the sub-menus not appear at all. Submenus should appesr when you click on Links or JavaScript.

edit: Actuall the submenu does appear when you click JavaScript, but not Links.

Also the table layout goes wierd, in IE the menu is vertical in Firebird it is horizontal.

**CornedBee** · Nov 16th, 2003, 08:20 AM

And what do you mean by that last question? The <%@ stuff at the top shows up if you mean that. It's only for ASP, you must remove it in static pages.

**Acidic** · Nov 16th, 2003, 08:23 AM

<%@ stuff at the top shows up if you mean that. It's only for ASP, you must remove it in static pages.

Sorry, will get rid of it, Dreamweaver auto inserts it.

with my last question I meant, in these forums, can you specify the code type so it colour codes JS or HTML correctly?

**CornedBee** · Nov 16th, 2003, 08:25 AM

This stuff is seriously messed up...

**CornedBee** · Nov 16th, 2003, 08:26 AM

No, you can't. You can use [php] for code that uses C-like syntax, but it doesn't work too well.

**Acidic** · Nov 16th, 2003, 08:27 AM

i think I can get it working if you can help sort out why the tables don't work. Why in Firebird are the tables horizontal, it must be to do with the function "make_menu()"

The menu should be vertical.

**CornedBee** · Nov 16th, 2003, 08:28 AM

Maybe Firebird doesn't like your habit of not finishing statements with semicolons. You should put ; after every statement in JavaScript. You don't need to, but it is a good idea.

**Acidic** · Nov 16th, 2003, 08:28 AM

This stuff is seriously messed up...

But if I get this working, then It'll be great as it is sooo easy to add more menu items .

**CornedBee** · Nov 16th, 2003, 08:28 AM

I also noticed that the DOM inspector shows an incorrect tree, and I think I know why.

**Acidic** · Nov 16th, 2003, 08:30 AM

the ; did nothing. where is the tree structure wrong? Plz note that most of it is build dynamically though, DOM inspectors might not see that.

**CornedBee** · Nov 16th, 2003, 08:32 AM

eval(id) also is likely not to work cross-browser.

**Acidic** · Nov 16th, 2003, 08:35 AM

eval(id) also is likely not to work cross-browser.

well it seem to be working.

Its only the table thing doesn't

And the JScript.html page:
it doesn't load up only thing into the Iframe.

**CornedBee** · Nov 16th, 2003, 08:35 AM

The DOM inspector sees dynamic changes.

I have no idea why I'm helping you with this, I hate pages where the menu is generated onload with JavaScript.

Anyway, I've cleaned your code somewhat, that should fix the DOM issue.

Code:

function make_menu()
{
	var gmenu = document.getElementById('linksmenu');
	var newHTML = "<table><tr>";
	for (i=0; i<main_list.length; i++) {
		newHTML += "<td><br><br><span id='" + main_list[i][0] + "' onClick='sub_menu(this.id)' STYLE='cursor: pointer'>" + main_list[i][0] + "</span></td>";
	}
	newHTML += "</tr></table>";
	gmenu.innerHTML = newHTML;
}

function sub_menu(id)
{
	for (i=0; i<main_list.length; i++) {
		if (id == main_list[i][0]) {
			if (main_list[i][0] != document.getElementById(id).innerHTML) { //Submenu is already open
				document.getElementById(id).innerHTML = main_list[i][0];
			} else if (main_list[i][1] == 0) { //If menu item goes to URL, not opens submenu
					document.location = main_list[i][2];
			} else { //If menu item opens submenu
				var mmenu = document.getElementById(id);
				var newHTML = "<td><i><span id='" + main_list[i][0] + "' onClick='sub_menu(this.id)' STYLE='cursor: pointer'><br>" + main_list[i][0] + "</i></span></b><br><br></td>";
				for (j=0; j<eval(id).length; j++) {
					newHTML += "<a href='" + main_list[i][2] + "" + eval(id)[j][1] + "'>" + eval(id)[j][0] + "</a><br>";
				}
				mmenu.innerHTML = newHTML;
			}
		}
	}
}

Of course, your DOM tree is already messed up by your provider with its useless anti-hide-banner end tags.

**Acidic** · Nov 16th, 2003, 08:37 AM

is document.location not supported in FireBird???

thats what must be wrong with JScript.html

**CornedBee** · Nov 16th, 2003, 08:38 AM

I think it should be location.href

**CornedBee** · Nov 16th, 2003, 08:43 AM

Another thing is this: getElementById is incorrectly implemented in IE to retrieve elements that have only the name attribute set. For Mozilla/Firebird to work you must set the id attribute, preferably to the same value.

**Acidic** · Nov 16th, 2003, 08:46 AM

I got the tables sorted, I didn't even need span, just <br> and <span>

**Acidic** · Nov 16th, 2003, 08:54 AM

got it all sorted now, thx

**vbNeo** · Nov 17th, 2003, 11:53 AM

As a followup - you should do some CSS on your page, for textformatting etc., would really spice it up. And make spaces between the text and the borders - gives it a better touch.

Thread: JavaScript - why is this not Mozilla compatible?

Thread Tools

Display

JavaScript - why is this not Mozilla compatible?

Hmm

Posting Permissions