Working in IE, but not FireFox...any ideas???

[ShootingBlanks]

Hello.  The following page I made has a table whose rows are supposed to highlight when you mouse-over them.  This works fine in IE6 & IE7, but not in FireFox.  Here's the page and below it is the JS code I'm using, if anyone can help me out to fix it.  Thanks!...

 

http://www.nirvanatributeband.net/tour.php

 

Here's the code:

<script language="JavaScript" type="text/JavaScript">
<!--
function changeto(highlightcolor,textcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TR")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
//-->
</script>

 

And then for each table's tag I have:

<table onMouseOver="changeto('#5D7DA6')" onMouseOut="changeback('black')" >

 

Thanks!...

 

 

[nogray]

event.srcElement is IE only property. You'll need to pass the "tr" object to the function in your mouseover and out events

<table onMouseOver="changeto(this, '#5D7DA6')" onMouseOut="changeback(this, 'black')" >
....
function changeto(tr, highlightcolor,textcolor){
tr.style.backgroundColor=highlightcolor
}

[bronzemonkey]

You can also do this without putting javascript into your html. Put this code into an external file and link to it in the head of your document:

 

// put this in the head of your document

<script type="text/javascript" src="includes/highlightRows.js"></script>


// put this is the highlightRows.js file

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
	rows[i].onmouseover = function() {
		this.style.backgroundColor = "#5d7da6";
	}
	rows[i].onmouseout = function() {
		this.style.backgroundColor = "#000";
	}
}
}

addLoadEvent(highlightRows);

 

The html code for your tables won't need any javascript within it:

 

<table cellspacing="0" cellpadding="0">
<tr>
  	<td class="leftCell">Friday 15th</td>
    <td class="middleCell">Iowa City Yacht Club</td>
    <td class="rightCell">Iowa City, IA </td>
  </tr>
  <tr>
  	<td class="leftCell">Saturday 16th</td>
  	<td class="middleCell">Abbey Pub</td>
    <td class="rightCell">Chicago, IL</td>
  </tr>
  <tr>
  	<td class="leftCell">Saturday 23rd</td>
  	<td class="middleCell">Dr.Unk's Oasis</td>
  	<td class="rightCell">Greenville, NC</td>
  </tr>
</table>

 

It would be even better to use the javascript to add a class to the table rows and use css to control the styles for that class. That way if you ever wanted to change the styles you wouldn't need to edit the javascript file.

[ShootingBlanks]

Thanks for all the help everyone.  I cleaned up the code based on bronzemonkey's suggestion above, but  there's something else weird going on in FireFox.  I hope I'm not veering too far off my original topic now (maybe I should make a new post?)

 

Anyway, on IE6 & IE7, you can click on any row and it takes you to a more detailed page.  But on FireFox, the rows are not clickable for some reason.  Here's how I've coded each row (this is just one example, but they're all the same):

<a href="tour/2008-02-15.php"><tr onMouseOver="changeto(this,'#5D7DA6')" onMouseOut="changeto(this,'black')">
            <td class="leftCell">Friday 15th</td>
            <td class="middleCell">Iowa City Yacht Club</td>
            <td class="rightCell">Iowa City, IA </td>
          </tr></a>

 

So - it's just a basic <a> tag wrapping around a <tr> tag.  I'm not sure why FireFox isn't recognizing this.  Any ideas???  Thanks!

 

 

[bronzemonkey]

Those are not valid elements to contain within an anchor. Put your code through the W3C validator and you will see the error messages. Put the link within the td for the event title. Do not put tables or table cells within the anchor (link)

[ShootingBlanks]

Put the link within the td for the event title.

 

That will just make the actual text itself clickable, though, right?  I want it so that anywhere at all in the cell is clickable.  Is that possible???  Thanks again for the help!!!

 

[nogray]

use <tr onclick="location.href='.......';" onMouseOver....

 

If it doesn't work, try to put the onclick on all the td tags

[ShootingBlanks]

use <tr onclick="location.href='.......';" onMouseOver....

 

Perfect - THANKS!!! 

[bronzemonkey]

That is not acceptable if you want users without javascript to be able to follow your links. I don't browse with javascript and so I can't follow your links...even if I enable javascript I get no indication that the table rows are links to other content.

 

It is one thing to provide a visual enhancement by making table rows change color on mouseover but quite another to insert links that are only available to users with javascript.

 

If you want the anchor to behave like a block, then set its display property to block in your code, and make sure people can tell it is a link.

[nogray]

For accessibility point of view, bronzemonkey is correct. Personally, if the user's browser doesn't support JS, they should either update their browser or enable JS to browse my site (if I am losing 5% because of JS is not enabled, oh well). Using a simple CSS style to make the tr looks clickable "such as cursor:pointer" will solve any display questions for the user. But the final discussion is for the website owner and how does s/he wants the user to interact with their site.

[ShootingBlanks]

Using a simple CSS style to make the tr looks clickable "such as cursor:pointer" will solve any display questions for the user.

 

I did that and it looks good on the IEs, but it doesn't change the cursor on FireFox (I updated my original link, so you can check it out live)...

 

...is there any way to make the cursor change in FireFox?  If not, no big deal - I'll just leave it.  Thanks!

 

 

[bronzemonkey]

For accessibility point of view, bronzemonkey is correct. Personally, if the user's browser doesn't support JS, they should either update their browser or enable JS to browse my site (if I am losing 5% because of JS is not enabled, oh well).

 

That's a misguided attitude. There should be no reason to prevent non-js users from accessing a link. There is a significant proportion of internet users who browse with js off for security and accessibility reasons (most banks will not have js enabled on their systems), and this is made ever easier with extensions for browsers like Firefox.

 

It is not up to the user to alter their browsing preferences or restrictions in order to cater to your website. It is up to web designers/developers to cater for the various browsing preferences and restrictions of users. In addition, most of the search engine bots (google included) will not follow javascript links.

 

Even if "only" 5% of your audience browse without javascript, no sensible business is going to ignore 5% of potential customers and no government agency is going to alienate millions of disabled citizens who may not be able (or willing) to use js. The whole point of web standards and accessibility (which is a legal and moral obligation) is that it makes web content available to everyone in some form and that means javascript should be unobtrusive, i.e., not embedded in the html or denying core content and navigation to users without js.

 

In this instance there is no need to use js (especially not inline) to link to other pages anyway. It can be done with valid html and be in line with user expectations