JS Over-rides my CSS

[geosite]

I just implemented the Table Cursor demo at http://cross-browser.com/x/examples/table_toys.php on my site, and it works great. The only problem is that it wipes out all my CSS styles, including background colors and cell padding.

This probably isn't the root of the problem, but the Table Cursor works - and my CSS styles stop working - when I insert my table's ID (tabPpl) in the following:

window.onload = function()
{
  if (document.getElementById) {
    rowSetup(1, 2);
    rowSetup(2, 1);
    cellSetup(3, 4);
    cellSetup(4, 3);
    colSetup(5, 6);
    colSetup(6, 5);
    xtc = new xTableCursor('tabPpl', 'xtcInherit', 'xtcDefault', 'xtcHover', 'xtcSelected');
  }  
}

Is there a way to preserve your CSS styles, with a Table Cursor function simply changing the styles on a particular row and cell?

Thanks.

[MikeFoster]

Hi geosite,

Here is a version that Steve Hulme modified to fix just that problem: xTableCursor2.

Thanks

[geosite]

Hi geosite,

Here is a version that Steve Hulme modified to fix just that problem: xTableCursor2.

Thanks

Thanks; I'll check it out.

P.S. Do you know of any working examples online? I must not be implementing it correctly, because it isn't working for me. Thanks.

[MikeFoster]

Give us a link to the page.

[geosite]

Sorry about the late response; lots of interruptions.

The page is at http://cia.geoworld.org/Topics/People-2. The background colors you see are assigned by CSS style sheets.

When I connect to the TableCursor script at http://cia.geoworld.org/a1/js/TableCursor.js, your script works, but it wipes out my background colors.

The page you see is connected to the revised version, at http://cia.geoworld.org/a1/js/TableCursor2.js As you can see, it doesn't function at all.

Because the second JS is so much smaller than the first, I suspected maybe it's designed to just replace just a portion of the original, but none of my experiments have worked.

Again, my goal is to implement a table cursor function while preserving the CSS background colors - except for whichever row or cell is highlighted by the user's cursor.

Thanks!

[MikeFoster]

After getting feedback from several people, I see now that my original implementation did not anticipate the way people would want to use it. So I have re-implemented it, and it has its own demo page: xTableCursor Demo

Thanks

[geosite]

Thanks for the quick fix; it works perfectly now.

[MikeFoster]

Your big table is a good test. Well... it works great in FF2. It is ok but sluggish in Opera9. But IE7 chokes on it.

Although it could have something to do with the other Js on that page. There are some errors.

edit...

I may have to do some more testing with your table.

[geosite]

Your big table is a good test. Well... it works great in FF2. It is ok but sluggish in Opera9. But IE7 chokes on it.

Although it could have something to do with the other Js on that page. There are some errors.

edit...

I may have to do some more testing with your table.

Yes, I have overloaded that page with scripts,eh?

I realized that I can't really finish the table until I learn more about JavaScript and AJAX, so I decided to spend the next week or two working through some tutorials.

One scheme I'd like to work on is a PHP sort function that works like a JavaScript function. My original table was set up to sort table columns with JavaScript, where you click a word in the <thead> section, and it sorts that column. But it also had a PHP sort function that allowed visitors to sort columns via other variables.

In my present table, consider the population column, which looks something like this:

25 million
1 billion
300,000

Obviously, that won't sort properly. So I created an additional field in my database for ranking it:

2
1
3

So I can sort by the latter field with PHP. However, instead of using a form, I want to let visitors trigger the sort by simply clicking a link in the <thead> section, giving it the appearance of a JS sort function. I'll have to learn AJAX to do that.

Anyway, what's why I haven't fixed all the problems with my table yet. Also, I generally design for Firefox and Safari first, then Safari when I get it online (I can't preview websites properly on my Apple laptop yet), leaving IE for last.

Thanks again for all the tips.

[MikeFoster]

You're very welcome, geosite! You've got a great attitude and I appreciate that

Be sure to test with Opera too

Good luck, and keep us informed.