Lamia's Java Blog - A Pinoy Java Blog

Aligning a div tag to DOM object

I'm not sure if all DOM objects in HTML has  the offsetLeft, offsetTop or offsetParent properties. Let me show you something that took me  2 days to figure out. Actually, I didn't figure it out because it was Eric Pascarello of javaranch who helped me. Let's get started

 

Assumming you have the following tags

<table>
  <tr>
    <td><a href="http://devpinoy.org/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost&sectionid=136#"><label id="a">Menu1</label></a></td>
    <td><a href="http://devpinoy.org/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost&sectionid=136#"><label id="b">Menu2</label></a></td>
    <td><a href="http://devpinoy.org/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost&sectionid=136#"><label id="c">Menu3</label></a></td>
  </tr>
</table>

 And a div

<div id="submenu" style="visibility:hidden; position:absolute;  right:0 ; top:0; width:0">
  <table>
    <tr><td>A SubMenu 1</td></tr>
    <tr><td>A SubMenu 2</td></tr>
    <tr><td>A SubMenu 3</td></tr>
  </table>
</div>

How do you make it appear under a div? Of course we know javascript is gonna come in play here.  You might be thinking about the style.left property but unfortunately the left style property won't have any value for a label tag. So let's make the div tag appear first when we hover to one of the menus. I'll be using the href beside <label id="c"> tag.

The javascript function

<script>
//untested code, you get the idea of what it's doing
function showMenu(menu)
{
 
   if (menu != null)
   {
        var menuStyle = menu.style;
       
        if (menuStyle.visibility == "visible")
        {
            menuStyle.visibility = "hidden";
        }
        else
        {
            menuStyle.visibility = "visible";
        }

   }
}
 
</script>


then in your href...

    <td><a href="BLOCKED SCRIPTvoid(0)" onMouseOver="showMenu(submenu)" ><label id="c">Menu3</label></a></td>

that should do the trick. But it's crazy because the div would probably be placed somewhere on the upper-left corner and you know you don't like that. You want to place it under the label with id="c".


Once upon a time a javaranch member was posting in the HTML and javascript forums. He was asking a question about javascipt. Then came a man named Eric and solved his problem. Here is the solution.


We first have to modify and showMenu function


function showMenu(targetObj, menu)
{
   var posX = 0;
   var posY = 0;

   while (targetObj != null)
   {
        posX += targetObj.offsetLeft;
        posY += targetObj.offsetTop;
       
        targetObj = targetObj.offsetParent;     
   }

   posY += 5 //or any value you could think of so the meny won't overlap with the label


   if (menu != null)
   {
        var menuStyle = menu.style;
       
        if (menuStyle.visibility == "visible")
        {
            menuStyle.visibility = "hidden";
        }
        else
        {
            menuStyle.visibility = "visible";
        }

   }
}


finally, we have to modify our href tag


    <td><a href="BLOCKED SCRIPTvoid(0)" onMouseOver="showMenu(c, submenu)" onMouseOut="showMenu(c, submenu)"><label id="c">Menu3</label></a></td>


And that's it! You could also use an image object(<img>) as long as you put an id. For example

<a href="BLOCKED SCRIPTvoid(0)" onMouseOver="showMenu(c, submenu)" onMouseOut="showMenu(c, submenu)"><img src="someimage.gif" id="showhere"></a>


hope that helps. :)