Need Help Trying to merge 2 Function and CSS to work

E

EasyRider41

I am trying to merge to scripting samples I for on a source code web
site and having limited luck. Then first one is called Zebra Tables
witch colors alternate rows of a table to look beter. The second is a
rule code that highlights the row you are currently moused over. Both
are making use of CSS style sheet to do all of their formating.
My problem is that the rollover is changing the text color but not the
color of the row background as the example does in the original code
which is what I am looking for out of this. Anyone have any ideas???


Link to the Samples are here:
http://www.alistapart.com/articles/zebratables/
http://www.alistapart.com/articles/tableruler/


My Code I have cobbled together

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<style type="text/css">

#mytable {
border: 1px solid #666666;
cellspacing: 0;
}

#mytable thead th,tfoot td{
background-color: #003366;
font-family: "lucida grande", verdana, sans-serif;
font-weight: bold;
color: #ffffff;
font-size: 10pt;
padding: 3px 8px;
}

#mytable tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}

#mytable tbody tr td.selected {
font-style:italic
font-size: 8pt;
text-decoration:underline;
color: #660000;
font-weight: bold;
}
#mytable tbody tr.ruled{
font-size: 11pt;
background:#9cf;
color: "#ccc";
}
table{
border:1px solid #000;
border-collapse:collapse;
}
</style>


<script type="text/javascript">
<!--
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode("class") != null) {
result = obj.getAttributeNode("class").value;
}
return result;
}

function stripe(id) {

// the flag we'll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#eee";

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// &lt;tbody&gt;s
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {

// find all the &lt;tr&gt; elements...
var trs = tbodies[h].getElementsByTagName("tr");

// ... and iterate through them
for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs) &&
! trs.style.backgroundColor) {

// get all the cells in this row...
var tds = trs.getElementsByTagName("td");

// and iterate through them...
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

// avoid cells that have a class attribute
// or backgroundColor style
//if (! hasClass(mytd) &&
// ! mytd.style.backgroundColor) {

mytd.style.backgroundColor =
even ? evenColor : oddColor;

//}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}


// -->
</script>

<script type="text/javascript">
/*
tableruler()
written by Chris Heilmann for alistapart.
enables a rollover of rows for each table with the classname
"hlrows"
*/

function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables.className=='ruler')
{
var trs=tables.getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName=='TBODY')
{

trs[j].onmouseover=function(){this.className='ruled';return
false}
trs[j].onmouseout=function(){this.className='';return
false}
}
}
}
}
}
}

</script>

<script type="text/javascript">
window.onload=function(){tableruler();}
</script>

<html>
<head>
<meta NAME="GENERATOR" Content="SAPIEN Technologies, Inc. PrimalScript
3.1">
<title>Test Page</title>
</head>
<body onload="stripe('mytable', '#fff', '#edf3fe');tableruler()"><a
name="top"></a>

<div id="bottle">

<h1>Test CSS and Java</h1>

<table class="ruler" id="mytable" >
<thead>
<tr><th scope="col">test1</th><th scope="col">test2</th></tr>
</thead>
<TBODY>
<tr><td>A</td><td>A</td></tr>
<tr><td>B</td><td>A</td></tr>
<tr><td>C</td><td>A</td></tr>
<tr><td>Dee</td><td>A</td></tr>
<tr><td>E</td><td>A</td></tr>
<tr><td>F</td><td>A</td></tr>
</TBODY>
<tfoot>
<tr><td colspan="2">Summary</td></tr>
</tfoot>

</table>
</div>

</body>
</html>
 
M

Michael Winter

I am trying to merge to scripting samples I for on a source code web
site and having limited luck. Then first one is called Zebra Tables
witch colors alternate rows of a table to look beter. The second is a
rule code that highlights the row you are currently moused over. Both
are making use of CSS style sheet to do all of their formating.
My problem is that the rollover is changing the text color but not the
color of the row background as the example does in the original code
which is what I am looking for out of this. Anyone have any ideas???

Link to the Samples are here:
http://www.alistapart.com/articles/zebratables/
http://www.alistapart.com/articles/tableruler/

Their "ruler" example is flaky on Opera, and both scripts could have been
written better, so I started from scratch. You can see an example here:

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/easyrider/table.html>

As you'll no doubt notice, there's redundancy in the two main functions,
but I'll let you sort that out. I also added a fall-back that will allow
the "ruler" effect to work when JavaScript is disabled[1]: you'll want to
make sure that the colours specified in the "table.ruler tr:hover"
declaration and the initialiseTableRuler() function are in sync.

[snipped code]

I suggest you validate your HTML before you attempt to script documents,
especially when DOM methods and modification of the document structure is
involved. Invalid documents might not behave as you expect.

<URL:http://validator.w3.org/>

Hope that helps,
Mike


[1] IE doesn't support the :hover pseudo-class on any element other than
A, so it will rely on JavaScript to provide the ruler effect.
 
Y

Yann-Erwan Perio

Michael said:

A very clear and enjoyable script.

FWIW, here are some suggestions/questions:
- in the CSS declarations, I don't think that you need to use "table
td"-like selectors, "td" only would do; AFAICS you're trying to address
invalid-HTML cases, where we'd have TD elements anywhere - but then
you're telling the OP to fix invalid HTML. Fixing HTML should be enough:)

- "if( b = tB[ i ]) {" is a bit strange, since you're iterating in the
tBodies collection, the tBody has to exist; have you come across any
implementation in which this wasn't the case?

- "r[ j ].onmouseover = function() {" is declaring a different function
at each iteration; you could declare the function once and then use
reference. Moreover, on a technical note, functions expressions declared
this way could hardly be joined because of scope issues, so if you still
want to declare functions in a loop I'd advise using the Function
Constructor instead, in which case it's easier for implementations to
create joined objects (although not compulsory - a single function, then
references remains the best method).


Regards,
Yep.
 
M

Michael Winter

A very clear and enjoyable script.

I actually uploaded the page prematurely. I've uploaded the version that
should have been posted originally (few changes, so there's no point
looking at it again).
FWIW, here are some suggestions/questions:

Always welcome. :)
- in the CSS declarations, I don't think that you need to use "table
td"-like selectors, "td" only would do; AFAICS you're trying to address
invalid-HTML cases, where we'd have TD elements anywhere - but then
you're telling the OP to fix invalid HTML. Fixing HTML should be
enough:)

Can't say why I did that. The only place where "table" needs to be
included in the selector is with "table.ruler td:hover", to make sure that
non-ruler-enabled tables don't use the effect.
- "if( b = tB[ i ]) {" is a bit strange, since you're iterating in the
tBodies collection, the tBody has to exist; have you come across any
implementation in which this wasn't the case?

That's out of habit: test everything. It shouldn't be needed.
- "r[ j ].onmouseover = function() {" is declaring a different function
at each iteration; you could declare the function once and then use
reference. Moreover, on a technical note, functions expressions declared
this way could hardly be joined because of scope issues, so if you still
want to declare functions in a loop I'd advise using the Function
Constructor instead, in which case it's easier for implementations to
create joined objects (although not compulsory - a single function, then
references remains the best method).

I realised that myself after I uploaded the page. I made the changes to
the local version, but forgot to upload it again. It uses two functions
and assigns references to the handlers.

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top