SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    New York
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Is it possible to get the width of table cell(s) that have been dynamically built

    Goal:

    To build a horizontal floating menu that matches the first row (header row) of my dynamically built table (to include text and cell height/width - needs to match exactly). I have accomplished 90% of this task by extracting the text and building the row in my floating menu header and placing the floating menu where it needs to be. However, I'm having a problem aligning the table (<TD></TD>) cells because of my dynamically built table.


    Scenario:

    I have a table that is built dynamically. Before it is displayed, I format the table row data (code that adds text/deletes rows etc…), which alters the width of all the table cells (via JavaScript). We'll call this (for lack of a better phrase) "pre_floater_table_format_code."

    I then loop through the DOM (<TD></TD>) in the first row of the table to get the text and width from each cell (using offsetWidth and/or clientWidth) and assign the text and cell width(s) to variables that I use to build my floating menu with. We'll call this (for lack of a better phrase) "get_cell_text_width_code."


    Problem:

    The problem is that once the table is built (and before it is altered by the "pre_floater_table_format_code") it seems as though my "get_cell_text_width_code" reads the un-processed table cell width(s) and sets these variables to the un-processed width values. The "pre_floater_table_format_code" runs much earlier than the "get_cell_text_width_code." So why wouldn't the "get_cell_text_width_code" read the cell width(s) after they've been adjusted by the "pre_floater_table_format_code?" Does this make sense? Anyone have any recommendations? Alternative solutions?



    Regards,

    Douglas

  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 Douglas, welcome to SitePoint Forums!

    Here's a possibly similar thread, perhaps it will be helpful. I don't know if I can be of any help without seeing the page/code.

    What browser(s) are you testing with? I do remember that I have seen situations with Mozilla where a change affects the width of an element, yet offsetWidth was not updated before the next statement was executed. Try inserting an alert() after pre_floater_table_format_code and before get_cell_text_width_code. Perhaps I just need to re-read your post.

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    New York
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thank's for the warm welcome Mike!

    I'll take a look at the link to see if it applies, thanks!

    To answer your questions, IE only, and I have inserted an alert (looping through it) just to see the values of each cell before the get_cel_text_width_code and of course it only showed the values of each cell prior to the pre_floater_table_format_code executing.

    Here is the code (stripped down to work anywhere), but if you save it to your server and run it, you'll get an idea of what the problem is. Keep in mind a couple of things as you look at the rendered page;

    1). The header and value data are dynamically loaded and formatted via pre_floater_table_format_code (which I've labeled).

    2). The area where you see broken image links are drill down areas where plus or minuses get inserted as the user drills down into the data. This is where the cell width changes and this is where the pre_floater_table_format_code executes.

    3). Shrink your browser window horizontally to where you cannot view the bottom table row. This will allow you to view the floater in action.


    <html>
    <head>

    <SCRIPT LANGUAGE=javascript>
    <!--
    // if the error "Object oTable.rows.length is null" appears, it means that there is either no table (row) data returned from the query or that something is displayed above the first table.


    /*
    pre_floater_table_format_code
    prior to this code, the basic html table is displayed
    */

    function onLoadTableDrillDown()
    {
    var sRefer = document.referrer;
    var n = sRefer.search("iframe.htm");
    sRefer = "<IMG BORDER=0 SRC=\"" + sRefer.substr(0, n) + "images/";
    var oTable = document.body.childNodes(1);
    var splus = sRefer + "plus.gif\"" + ">";
    var sminus = sRefer + "minus.gif\"" + ">";
    var slow = sRefer + "lowest.gif\"" + ">";
    var sep = "&nbsp;&nbsp;";
    var sclose = "</A>" + sep;
    var sindent = sep + sep;
    var srefp = "<A HREF=\"sort.asp?plus=";
    var srefm = "<A HREF=\"sort.asp?minus=";

    var eid, lvl, nc, pid;

    var rmax = oTable.rows.length;
    var cmax = oTable.cells.length/rmax;


    for( i = 1; i < rmax; i++ )
    {
    var c = oTable.rows[i];
    var sInner = c.cells[0].innerHTML;
    var n1 = sInner.search("ce_id=");
    n1 = n1 + 6;

    var n2 = sInner.search("&");
    eid = sInner.substr(n1, n2-n1);
    nc = c.cells[cmax-3].innerText;


    // set variable to add an anchor attribute and to close the href tag
    var srefclose = "NAME="+eid+">";

    if( i+1 < rmax )
    {
    pid = oTable.rows[i+1].cells[cmax-2].innerText;
    }
    else
    {
    pid = 0;
    }

    lvl = c.cells[cmax-1].innerText;

    var s = "&nbsp;";
    for( j = 1; j < lvl; j++ )
    {
    s = s + sindent;
    }

    if( nc > 0 && pid == eid )
    {

    // add srefclose variable to the minus href (link)
    s = s + srefm + eid + "#"+eid+"\"" + srefclose + sminus + sclose;
    }
    else if( nc > 0 && pid != eid )
    {

    // add srefclose variable to the plus href (link)
    s = s + srefp + eid + "#"+eid+"\"" + srefclose + splus + sclose;
    }
    else
    {
    s = s + slow + sep;
    }

    c.cells[0].innerHTML = s + c.cells[0].innerHTML;

    for( j = 0; j < 3; j++ )
    {
    c.deleteCell();
    }
    }

    for( i = 0; i < 3; i++ )
    {
    oTable.rows[0].deleteCell();
    }

    for( i = rmax-1; i > 0; i-- )
    {

    var s = oTable.rows[i].cells[0].innerText; //WBSID
    var s1 = oTable.rows[i].cells[1].innerText; //Description

    if ( (s.search("PERF MEASURE BL") != -1) || (s1.search("PERF MEASURE BL") != -1) )
    {
    oTable.deleteRow(i);
    }
    }
    }

    // -->
    </script>


    </head>

    <body onload="onLoadTableDrillDown();">

    <TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2>
    <TR bgcolor="#c0c0c0">
    <TD CLASS=WSTD0>WBSID</TD>
    <TD CLASS=WSTD0>Description</TD>
    <TD CLASS=WSTD0>WBS Owner</TD>
    <TD CLASS=WSTD0 ALIGN=center>EV%</TD>
    <TD CLASS=WSTD0 ALIGN=center>S V</TD>
    <TD CLASS=WSTD0 ALIGN=center>SV</TD>
    <TD CLASS=WSTD0 ALIGN=center>C V</TD>
    <TD CLASS=WSTD0 ALIGN=center>CV</TD>
    <TD CLASS=WSTD0 ALIGN=center>VAC</TD>
    <TD CLASS=WSTD0 ALIGN=center>VAC</TD>
    <TD CLASS=WSTD0 ALIGN=center>VAR</TD>
    <TD CLASS=WSTD0 ALIGN=center>BAC</TD>
    <TD CLASS=WSTD0 ALIGN=center>EAC</TD>
    <TD CLASS=WSTD0 ALIGN=center>3Mth Fcst</TD>
    <TD CLASS=WSTD0 ALIGN=center>NC</TD>
    <TD CLASS=WSTD0 ALIGN=center>PID</TD>
    <TD CLASS=WSTD0 WIDTH=30 ALIGN=center>LVL</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=41&cd_id=22" target="chrp">LY7CAA</A></TD>
    <TD CLASS=WSTD NOWRAP>LAMPS LRIP1</TD>
    <TD CLASS=WSTD NOWRAP>HALE T</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>83.91</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#173;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-958.3</TD>
    <TD CLASS=WSTDY NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-4,251.2</TD>
    <TD CLASS=WSTDY NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-7,321.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>95,314.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>102,635.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>100,381.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>7</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>1</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=47&cd_id=22" target="chrp">LY7DAA</A></TD>
    <TD CLASS=WSTD NOWRAP>LRIP BASE 7 A/C</TD>
    <TD CLASS=WSTD NOWRAP>MONSEUR PJ</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>86.26</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#173;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-629.3</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-3,024.2</TD>
    <TD CLASS=WSTDY NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-5,767.4</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>82,167.1</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>87,934.5</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>85,673.2</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>16</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=43&cd_id=22" target="chrp">[COM]</A></TD>
    <TD CLASS=WSTD NOWRAP>Cost Of Money</TD>
    <TD CLASS=WSTD NOWRAP>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>61.22</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTDR NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-159.2</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#173;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>55.9</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>cC</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>846.6</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>790.7</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>1,106.6</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=44&cd_id=22" target="chrp">[G&amp;A]</A></TD>
    <TD CLASS=WSTD NOWRAP>Gen &amp; Admin</TD>
    <TD CLASS=WSTD NOWRAP>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>80.87</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#173;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-329.0</TD>
    <TD CLASS=WSTDR NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-1,067.8</TD>
    <TD CLASS=WSTDR NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-1,609.5</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>cCV</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>10,611.9</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>12,221.4</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>11,932.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=45&cd_id=22" target="chrp">[UB]</A></TD>
    <TD CLASS=WSTD NOWRAP>Undist Budget</TD>
    <TD CLASS=WSTD NOWRAP>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.00</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>404.7</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>404.7</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>426.2</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=48&cd_id=22" target="chrp">[PMB]</A></TD>
    <TD CLASS=WSTD NOWRAP>PERF MEASURE BL</TD>
    <TD CLASS=WSTD NOWRAP>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>85.05</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&#173;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-958.3</TD>
    <TD CLASS=WSTDY NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-4,251.2</TD>
    <TD CLASS=WSTDY NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>-7,321.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>94,030.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>101,351.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>99,028.7</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>1</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    <TR>
    <TD CLASS=WSTD NOWRAP><A href="chrp.asp?ce_id=46&cd_id=22" target="chrp">[MR]</A></TD>
    <TD CLASS=WSTD NOWRAP>Mgt Reserve</TD>
    <TD CLASS=WSTD NOWRAP>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.00</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&#171;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTDG NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>0.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>&nbsp;</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>1,284.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>1,284.0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=right>1,352.3</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>0</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>41</TD>
    <TD CLASS=WSTD NOWRAP ALIGN=center>2</TD>
    </TR>
    </TABLE>

    <script>
    if (!document.layers)
    document.write('<div id="divStayTopLeft" style="position:absolute">')
    </script>


    <!--- get_cel_text_width_code - reads table header --->

    <layer id="divStayTopLeft">

    <TABLE bgcolor="#E2E2E2" BORDER=0 CELLSPACING=1 CELLPADDING=2>
    <TR>
    <script language="JavaScript">
    var mybody = document.getElementsByTagName("body").item(0);
    var mytable = mybody.getElementsByTagName("table").item(0);
    var mytablebody = mytable.getElementsByTagName("tbody").item(0);
    var myrow = mytablebody.getElementsByTagName("tr").item(0);

    var cellCount = myrow.cells.length - 3;

    for ( var i=0; i<cellCount; i++ ){

    var mycel = myrow.getElementsByTagName("td").item(i);
    //var mycelwidth = mycel.offsetWidth;
    var mycelwidth = mycel.clientWidth;
    var myceltext = mycel.childNodes.item(0);
    var myceldata = myceltext.data;

    document.write('<TD CLASS=WSTD0 WIDTH='+mycelwidth+'>'+myceldata+'</TD>');
    }

    </script>
    </TR>
    </TABLE>

    </layer>

    <!--- floater_script --->

    <script type="text/javascript">
    var verticalpos="fromtop"

    if (!document.layers)
    document.write('</div>')

    function JSFX_FloatTopDiv()
    {
    var startX = 10,
    startY = 15;
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function ml(id)
    {
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x;this.style.top=y;};
    el.x = startX;
    if (verticalpos=="fromtop"){
    el.y = startY;
    }
    else{
    el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
    el.y -= startY;
    }
    return el;
    }
    window.stayTopLeft=function()
    {
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : document.body.scrollTop;
    ftlObj.y += (pY + startY - ftlObj.y)/8;
    }
    else{
    var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
    ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
    }
    JSFX_FloatTopDiv();
    </script>

    </body>
    </html>


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
  •