SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Over-rides my CSS

    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:

    Code:
    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.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi geosite,

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

    Thanks

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    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.
    Last edited by geosite; Feb 19, 2007 at 08:03.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give us a link to the page.

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick fix; it works perfectly now.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    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.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •