SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript menu in Firefox

    I created a common menu for my school's website using javascript.

    In the <head> section the following information is included
    <script language="javascript">
    <!--
    home_tab = "";
    root_path = "";

    -->
    </script>

    The home_tab varible which tab in the menu changes to Home when the page is selected. The root_path contains the appropiate number of "../" entries.

    In the body I use a <script> tag and the src statement to display my menu. Listed below is a snippet of the menu code. All of the menu tabs are identical to the second it statement.

    // JavaScript Document
    // This document contains the coding for the common menu
    home_path = root_path + "home.htm";
    btn_path = root_path + "graphics/backgroundButton.gif";
    btnHL_path = root_path + "graphics/backgroundButtonHL.gif";

    if (home_tab != ""){
    document.write('<p align=left><span style="font-weight:bold;font-size:36px">Blankner School</span></p>');
    }
    document.write('<div align="center"><table cellpadding="2" cellspacing="2" align="center"><tr>');
    if (home_tab == "awards"){
    document.write('<a href="'+ home_path +'" target="_self" style="text-decoration:none"><td width="110" height="40" background="'+btnHL_path+'" '+
    'align="center" valign="middle" style="color:#000000;font-weight:bold;cursorointer"> '+
    '<center>Home</center></td></a>');
    }else{
    document.write('<a href="'+root_path+'Awards/awards.htm" target="_self" style="text-decoration:none"><td width="110" height="40" background="'+btn_path+'" onMouseOver="this.background=\''+btnHL_path+'\';this.style.color=\'#000000\'" '+
    'onMouseOut="this.background=\''+btn_path+'\';this.style.color=\'#FFFFFF\'" align="center" valign="middle" style="color:#FFFFFF;font-weight:bold;cursorointer"> '+
    '<center>Awards</center></td></a>');
    }

    The puzzling part of the problem is the if statements partially work. The proper menu tab's text is changing to "Home" when I use the url to access the page, but the image rollover and <a href> are not working. I do get the text color mouseover/mouseout change.

    The menu works fine in IE. I had had problems in the past using onClick within a TD tag not working outside of IE so I thought I would be safe using <a href> tag.

  2. #2
    SitePoint Addict markchivs's Avatar
    Join Date
    Oct 2004
    Location
    Malvern Hills, UK
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    man this code looks well over complicated.

    I think you should make sure your outputting valid html here anyway. According to your script you will always create the table element with a tr tag following
    Code:
    document.write('<div align="center"><table cellpadding="2" cellspacing="2" align="center"><tr>');
    but then in your if statement below that the nest element you create is an <a> tag. Thats not right.

    I'd also consider doing all these "this.style...." statments as css classes instead:
    Code:
    onMouseOver="this.background=\''+btnHL_path+'\';this.style.color=\'#000000\'" '+ 
    'onMouseOut="this.background=\''+btn_path+'\';this.style.color=\'#FFFFFF\'"
    then you can just write onMouseover="this.className='style2'". Much easier to read and maintain.

    Hope this points you in the right direction.



  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem Update

    I removed the <a href> tags from around the <td> tags and added an onClick event to the <td> tags and the menu now works in Firefox. The image rollover effect still does not work, but the text color change does and I can live with that.

    I still don't understand why it will not change the background in Firefox. I did try the css option but I did not have any success with that either.


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
  •