Home/ Questions/Q 7810135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:39:53+00:00

I have a div that I want to appear directly below a table cell

  • 0

I have a div that I want to appear directly below a table cell when the table cell is clicked. Here is a sample of my code so far…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
    function toggleDownloadSelectionDialog(divToggle,divId,event){
        pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;
        pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(divToggle).offsetTop;

        alert(pos_y+"  "+pos_x+" "+divId);

        document.getElementById(divId).style.top = pos_y;
        document.getElementById(divId).style.left = pos_x;
        document.getElementById(divId).style.display = 'block';

    }
</script>
</head>

<body>
<div class="div_downloadDialog" id="div_hidden1" style="display: none; top: 0; left: 0; position: absolute;">This div is hidden</div>

<table class="Oligo_Diversity">

<tr>
<td>blah</td><td>blah</td><td>blah</td>
</tr>

<tr>
<td><div id="div_toggle1" onclick="toggleDownloadSelectionDialog('div_toggle1','div_hidden1',event);">click here for download dialog</div></td>
<td>blah</td>
<td>blah</td>
</tr>

</table>

</body>
</html>

I would like the hidden download div to appear directly below the table cell it is clicked on. My javascript seems to get the position but I’m having trouble passing this information to the div. Removing the DOCTYPE will make this work but for the project I’m working on I need a doctype. Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set position: absolute for the DIV as sv_in said.

    This line also may cause troubles in IE:

    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;

    If you’ll run this in IE, ternary operator finds the condition true and returns true after ?.

    Switch the line to:

    pos_x = (event.offsetX)?event.offsetX:event.pageX-document.getElementById(divToggle).offsetLeft;

    And the same on next line for pos_y.

    When using <!DOCTYPE html> also units have to be used in style definitions:

    document.getElementById(divId).style.left = pos_x+'px';
document.getElementById(divId).style.top = pos_y+'px';
    • 0