SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why does mozilla object to this

    This script works okay in IE and in Opera, but mozilla complains and nothing is displayed (the script is called in the body via onLoad)

    function mainMenus(){
    item1="<a href=\"home.htm\" onmouseover = \"showDescription(1)\" onmouseout = \"showDescription(0)\">Home</a>";
    item2="<a href=\"fittslaw.htm\" onmouseover = \"showDescription(2)\" onmouseout = \"showDescription(0)\">Fitts Law</a>";
    item3="<a href=\"expectations.htm\" onmouseover = \"showDescription(3)\" onmouseout = \"showDescription(0)\">Expectations</a>";
    item4="<a href=\"speed.htm\" onmouseover = \"showDescription(4)\" onmouseout = \"showDescription(0)\">Fast Pages</a>";
    item5="<a href=\"resources.htm\" onmouseover = \"showDescription(5)\" onmouseout = \"showDescription(0)\">Resources</a>";

    mainMenu.innerHTML = item1 + " " + item2 + " " + item3 + " " + item4 + " " + item5;
    }

    function showDescription(n){
    with(mainMenuComment){
    if (n==0) innerHTML = "&nbsp; <br> &nbsp;";
    if (n==1) innerHTML = "First menu item <br> &nbsp;";
    if (n==2) innerHTML = "This is the second menu item's description <br> &nbsp;";
    if (n==3) innerHTML = "Here is the third menu item's stunningly informative description <br> &nbsp;";
    if (n==4) innerHTML = "Learn why it really matters to create faster loading pages and how to optimise yours for speed. <br> &nbsp; ";
    if (n==5) innerHTML = "Useful books, websites with articles and even some handy tools for designers <br> ";
    }
    }


    Mozilla says mainMenu is not defined - it is the id of the section on the web page where the script writes the menu items, and the other browsers have no problem with it. (the &nbsp; stops things jerking around, so ignore that)

    dr john

  2. #2
    SitePoint Wizard silver trophy rushiku's Avatar
    Join Date
    Dec 2003
    Location
    A van down by the river
    Posts
    2,056
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    According to your code, mainMenu doesn't exist prior to being used in the last line of the mainMenus function.

    I assume it's declared elsewhere, and initialized improperly, as far as Moz is concerned.

    Let's see that line

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rushiku
    According to your code, mainMenu doesn't exist prior to being used in the last line of the mainMenus function.

    I assume it's declared elsewhere, and initialized improperly, as far as Moz is concerned.

    Let's see that line
    Yes, it is defined in the html that follows.

    <table id="mainTable" width="690" border="0" cellspacing="0" cellpadding="0" align="center" >
    <tr>
    <td id="header" colspan="2">
    <h1>Better by Design</h1>
    </td>
    </tr>
    <tr>
    <td id="mainMenu" colspan="2">&nbsp; </td>
    </tr>
    <tr>
    <td id="mainMenuComment" colspan="2">&nbsp;<br>
    &nbsp; </td>
    </tr> etc. etc.


    and of course in the css file, as #mainMenu and #mainMenuComment, which also works okay.

    The site isn't live, I'm practising on it to learn more about javascript and css, so I can't give an url. And yes I know that many css users say you can forget tables, but it's best to start with small changes. And besides Eric Meyer who helps set the css standard still uses tables, so I'm in good company. ;-) There are only two tables on the page, so I'm getting there.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE puts all HTML element IDs into the global javascript namespace. This is not part of the W3C DOM spec, and leads to gratuitious levels of namespace pollution unless you're very careful. Therefore, Mozilla doesn't do it. You'll need to use the DOM getElementById method instead.

    Try this (some cuts for brevity):
    Code:
       function mainMenus(){
       	item1=[snip];
       	item2=[snip];
       	item3=[snip];
       	item4=[snip];
       	item5=[snip];
        
       	var menu = document.getElementById("mainMenu");
       	menu.innerHTML = item1+" "+item2+[...];
        }
        
        function showDescription(n){
       	var comment = document.getElementById("mainMenuComment");
       	with(comment){
       		if (n==0) innerHTML = [snip];
       		if (n==1) innerHTML = [snip];
       		if (n==2) innerHTML = [snip];
       		if (n==3) innerHTML = [snip];
       		if (n==4) innerHTML = [snip];
       		if (n==5) innerHTML = [snip];
       	}
      }
    [I've not tested this at all, so no guarantees]

    You should also be aware that [element].innerHTML is not part of the W3C DOM specs, either, so browser support is going to be patchy. However, it is supported by recent (<2 years old) versions of Mozilla, and I think by Opera, too, so you're not too badly off.

    BTW: that repeated "if (n==x)" is crying out to be converted into a switch-case, and personally I'd avoid the "with(...)" construct, too - but that's mostly a style thing, I think.

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks blufive - it now works in all three browsers!!!
    I'll start reading up on getElementById as my next lesson.


    I used the "with" construction to experiment with it (found it in a book) and did wonder why they hadn't used a switch-case instead of multiple ifs. I think it might be because it was early on in the book, and they were only introducing a few new things at a time.

    Thanks again,

    john


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •