PDA

View Full Version : Highlight Table Cells script failing W3C validation due to multiple identical ID's



esteban
02-28-2006, 06:03 PM
Script: Highlight Table Cells
http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm

Hi folks :). This script works wonderfully in IE/FF/Opera (mac/windows) ... but it fails W3C validation since it relies on multiple ID="ignore" statements to flag the table rows/cells that you don't want the highlighting effect applied to.

* TEST PAGE 1: Highlight Table Cells (http://magazinearchives.tg-16.com/test4.htm) (original DD script)
* W3C Validation Results for TEST 1 (http://validator.w3.org/check?uri=http%3A%2F%2Fmagazinearchives.tg-16.com%2Ftest.htm)

Basically, I am trying to determine:

1. if there is a way to modify the existing script so that it becomes standards-compliant, or...
2. if there is a standards-compliant script that highlights rows in tables (I have searched this site, but perhaps I missed a similar script?)

Thanks in advance! :)


-----------------------------------------
Additional info -- I don't know if it will be useful or not :)
-----------------------------------------------------
On another forum, a kind, kind soul suggested that the original DD script could be modified as follows:

Step 1: Change all of the ID="ignore" statements in your tables to name="ignore".
Step 2: Update the JS so that instead of looking at ID values it looks at name values, so "source.id" has been replaced with "source.getAttribute("name")")

* TEST PAGE REVISION A: getAttribute("name") (http://magazinearchives.tg-16.com/test.htm). This worked wonderfully across browsers and platforms, but unfortunately, it too failed to validate...
* Validation results for REVISION A (http://validator.w3.org/check?uri=http%3A%2F%2Fmagazinearchives.tg-16.com%2Ftest.htm)

------
Then I, completely ignorant of JS and DHTML, said to myself, "Well, if 'name' doesn't work, why don't I try using 'class' instead of 'name' ?" So, I simply replaced "NAME" with "CLASS", and...

* TEST PAGE REVISION B: I used "CLASS" instead of "NAME" (http://magazinearchives.tg-16.com/test2.htm).
* REVISION B: Yay! It passed W3C validation (http://validator.w3.org/check?uri=http%3A%2F%2Fmagazinearchives.tg-16.com%2Ftest2.htm).

REVISION B appears to work fine in FF/Opera (mac/windows)...

...but unfortunately, it doesn't fully work in IE. With REVISION B, IE doesn't acknowledge the "IGNORE" flags and, as a result, it highlights (and restores) every row in every table.

Sorry for the long post!

Twey
02-28-2006, 06:07 PM
<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.name!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.name=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.name=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>This will use name instead of ID. Multiple identical name attributes are permissable.

jscheuer1
02-28-2006, 06:29 PM
This will use name instead of ID. Multiple identical name attributes are permissable.

For table cells and/or rows? Wouldn't class be a better choice?

esteban
02-28-2006, 07:07 PM
This will use name instead of ID. Multiple identical name attributes are permissable.Thank you for the swift response :). I applied your new code to a test page:

* REVISION C: source.name="ignore" (Twey) (http://magazinearchives.tg-16.com/test9.htm)
* Validation results for REVISION C (http://validator.w3.org/check?uri=http%3A%2F%2Fmagazinearchives.tg-16.com%2Ftest9.htm)

Unfortunately, the highlighting effect of your script fails to work properly, essentially having the same problems as my REVISION B (see prior post).

REVISION A (see prior post), which also uses the name attribute, works properly across platforms and across browsers (it uses getAtrribute instead of source.name).

-----------
As far as W3C validation is concerned, I am beginning to think that there might not be an elegant solution: Basically, all of these revised scripts are failing validation because "NAME is not a supported attribute" in tables/row/cells(?) in my doctype (HTML 4.01 Transitional)? That is my understanding, anyway :).

Now, I am clueless, but it seems that our attempts to flag rows/cells (name="ignore") is what W3C doesn't like.

I love the effect of this script, though, and I am going to use it, dammit! :)

Twey
02-28-2006, 07:11 PM
Yes, but the OP might have other classes in place, and, as we know, some browsers don't handle multiple classes well. I left it as name because hardly anyone names table cells, so there usually shouldn't be a conflict.

esteban
02-28-2006, 07:12 PM
Twey, thanks for explaining the "multiple classes" issue to me... it seems that IE doesn't like multiple classes (as I tried to do in REVISION B, see initial post). Unless, of course, I made an obvious error in the script.

Twey
02-28-2006, 07:22 PM
Try .className instead of .getAttribute("class").

esteban
02-28-2006, 09:06 PM
Try .className instead of .getAttribute("class").Yes, I will try this... can you help me with the syntax?

Building off of REVISION B, do I simply replace .getAttribute with .className, as I did here:

(ns6&&(contains_ns6(source, e.relatedTarget)||source.className=="ignore"))

on Test Page REVISION D: className (http://magazinearchives.tg-16.com/test8.htm)

Note: "NAME=ignore" is used in the table rows on this page.

Sorry if I butchered the code :( .

jscheuer1
03-01-2006, 05:30 AM
Works xbrowser and validates:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Class Based Highlight Table Cells Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TR"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.className!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.className=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.className=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>
</head>
<body>
<table onmouseover="changeto(event, 'lightgreen')" onmouseout="changeback(event, 'white')">
<tr class="ignore">
<td colspan="2">Main Menu</td>
</tr><tr>
<td>Eggs</td>
<td>Ham</td>
</tr><tr class="ignore">
<td>Bread</td>
<td>Circuses</td>
</tr><tr>
<td>Blood</td>
<td>Roses</td>
</tr>
</table>
</body>
</html>

esteban
03-01-2006, 10:21 AM
A huge THANK YOU to both of you for your help. I implemented your most recent suggestions.

Unfortunately, the .className revision (test page revision D (http://magazinearchives.tg-16.com/test8.htm)) is not acknowledging the "ignore" flags. As a result, every row on every table is highlighted on mouseover, and then restored to a light blue on mouseout.

Even more odd, my original REVISION B (getAttribute - class, see my first post) only had problems in IE (win/mac).

REVISION D (className), in contrast, is having problems with most browsers. In the tables on my pages, the top row is "dark blue", followed by a second row that is "medium blue", followed by the rest of the table ("light blue"). In Revision D: On mouseover, every row is highlighted. On mouseout, "light blue" is restored to the row, thus destroying the original format of the tables.

This is a tough nut to crack! :)

jscheuer1
03-01-2006, 02:39 PM
My demo works. I found this error on your page:


Error: MM_preloadImages is not defined
Source File: http://magazinearchives.tg-16.com/test8.htm

Fixing that may or may not help matters. One easy way to test it would be to remove the reference(s) to it from the page and its linked files.

jscheuer1
03-01-2006, 02:43 PM
The main reason your ignores are not working is that you forgot to change:

name="ignore"

in the markup to:

class="ignore"

mwinter
03-01-2006, 02:57 PM
Yes, but the OP might have other classes in place, and, as we know, some browsers don't handle multiple classes well.When trying to apply CSS rules that use class selectors to those elements, yes. That is:



.class1 {
background: transparent;
color: blue;
}


<p class="class1 class2">Some text.</p>
the text in the paragraph above may not be rendered blue in all browsers. However, this doesn't affect the ability to obtain this list of class names, nor the ability to alter the in-line style declarations for that element using the DOM.

That said, the only browsers that suffer from this limitation are obsolete (IE4 and the like). The only persistent failure regarding classes and IE occur when multiple classes are used in a simple selector:



.class1.class2 {
background: transparent;
color: red;
}


<p class="class1 class2">Some more text.</p>
In IE6, the rule above is considered to be only:



.class2 {
background: transparent;
color: red;
}
Note the difference in the selector.


I left it as name because hardly anyone names table cells [...]That's because table cells cannot have name attributes.

Mike

Twey
03-01-2006, 03:58 PM
Unfortunately, the .className revision (test page revision D) is not acknowledging the "ignore" flags..className requires that the class be set to "ignore", not the name.
That's because table cells cannot have name attributes.Drat. :) Knew there had to be something wrong with it.
However, this doesn't affect the ability to obtain this list of class names, nor the ability to alter the in-line style declarations for that element using the DOM.Yes... the situation I was worried about was one where the webmaster has defined a style for the table rows, and then also wanted them ignored by the script. The instinctive reaction is to use class="originalClass ignore" which then wouldn't necessarily apply originalClass to the element.

esteban
03-01-2006, 05:16 PM
My demo works.My apologies! I am so sorry. YES, the script works! :) Yay! I can't tell you how happy I am :).

As you pointed out, I forgot to update the statements in my tables. I had actually done this last night when I was checking your script, but I updated the wrong page! and didn't realize it! Sorry for the grief :).

JOHN & TWEY: Thanks again for refining this script. You tackled the problem swiftly and I can't express to you how grateful I am for helping me out :).

AND, the good news is that the revised Highlighting script doesn't interfere with my existing JS (a handful of basic rollovers), so everything worked out wonderfully!

ALSO: Don't think that I didn't benefit from your discussion of multiple classes and selectors, I did! In fact, there are parts of my stylesheet that were giving me problems in IE and NOW I KNOW WHY. So a big thank you goes out to Mike as well.