Show/Hide of TD upon MouseOver/Out

Discussion in 'Javascript' started by Csaba Gabor, Aug 19, 2008.

  1. Csaba  Gabor

    Csaba Gabor Guest

    I have (a column of) cells in a dynamically built
    table where the contents of each TD from the (column
    of) cells should be displayed when the mouse is over
    the TD. This works fine (code below) by
    encapsulating the contents in a DIV and then toggling
    the div.style.display between "" and "none" upon
    onMouseOver and onMouseOut in the parent TD.

    My only problem with this is that the table's column
    widths are not adjusted to accommodate the new data.
    In particular, since the column is initially narrow since
    all entries are hidden, when individual cells are shown,
    they are expanded as a long skinny column.

    What's a good way to have the column widths be
    adjusted upon display of the individual TD's that will
    work in both IE 6+ and FF 1.5+?

    Thanks,
    Csaba Gabor from Vienna
    PS. I prefer to keep the table paradigm
    PPS. If the code below is unclear a more concrete
    example needed, let me know.

    // newRow is the Table row being built
    // a show/hide cell is to be appended to this row

    // tmpDiv is a dummy element containing a dummy table
    // with a cell matching the characteristics we want to insert
    var tmpDiv = document.createElement("DIV");

    // definition of the TD being built
    var tdFlipperHTML =
    "<td onMouseOver='this.firstChild.style.display=\"\"' " +
    "onMouseOut='this.firstChild.style.display=\"none\"'></td>";

    // now build the TD inside the dummy table
    tmpDiv.innerHTML = "<table><tr>" + tdFlipperHTML + "</tr></table>";

    // now transfer the TD to the real destination table
    var cell=newRow.appendChild(tmpDiv.firstChild.rows[0].cells[0]);

    // now give the cell some content:
    showHideContent = "Now you see me, now you don't";
    cell.innerHTML = "<div>" + showHideContent + "</div>";
    Csaba Gabor, Aug 19, 2008
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard
    Replies:
    0
    Views:
    524
    Richard
    Sep 5, 2003
  2. Doogie
    Replies:
    6
    Views:
    302
    Doogie
    Apr 25, 2008
  3. Anthony Jones
    Replies:
    0
    Views:
    672
    Anthony Jones
    Feb 17, 2009
  4. JDP@Work

    Show Hide Table(s), Rows & Cells w/out a postback

    JDP@Work, Apr 20, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    201
    JDP@Work
    Apr 20, 2006
  5. ll
    Replies:
    2
    Views:
    633
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page