• From: Hartford, CT
  • Registered: 2005-12-02
  • Posts: 16

Topic: [HTML/Javascript] DIV does not appear where it should

I am coding the latest versions of my forums, and I am trying to implement pop-up menu's using a simple Javascript code that call's a DIV layer with the menu options already in it, to the link that calls the menu.  The javascript is as follows:

<script language="Javascript">
    var hideContext=0;
    function showMenu(menu,el,position)
    {
        el = document.getElementById(el);
        div = document.getElementById(menu);
        
        //Point of the elements left corner, plus width = right corner
        //We want the right edge of the popup to align to the right corner
        //So, get the point of the right corner - the width of the menu
        //And you get the point of the left corner for the div when alligned
        var point = el.offsetLeft + el.offsetWidth;
        point = point - div.offsetWidth;
        
        with(document.getElementById(menu))
        {
            //Move to below item
            style.top=el.offsetTop + el.offsetHeight;
            //Position depending on align left or right
            if(position==1)
                style.left=el.offsetLeft;
            else if(position==2)
                style.left=point;
            //Display
            style.visibility='visible';
        }
        
        clearTimeout(hideContext);
    }
    function hide(menu)
    {
        document.getElementById(menu).style.visibility='hidden';
    }
</SCRIPT>

The link that calls the menu:

<DIV align="right">Post #1 | <A id="MenuLink1" href="javascript:void(false)" onClick="showMenu('PostMenu1',this.id,2)">Options</A></DIV>
<!-- POPUP MENU -->
<DIV id="PostMenu1" class="Popup">
    <A href="PostEdit.asp?ForumID=3&ThreadID=1&PostID=1">Edit</A><BR>
    <A href="PostDelete.asp?ForumID=3&ThreadID=1&PostID=1">Delete</A><BR>
    <A href="javascript:void(hide('PostMenu1'))">Close</A>
</DIV>

In internet explorer the menu pops-up at the top of the page, not even aligned horizontally as it should.  In Firefox, the menu pops-up under the link as it should, but it appears to the left of the page, not aligned with the right side of the link as it should.  Any ideas?

Thanks.

  • Registered: 2005-12-07
  • Posts: 1

Re: [HTML/Javascript] DIV does not appear where it should

1st of all the offsetLeft property refers to the relative offset position of the element (in funtion of the parent of the element), so i guess you should add all offsetLeft properties of the element parents.

After this, IE & Firefox doesn't consider offsetLeft/Top etc property in the same way. Take a look here : http://www.webreference.com/dhtml/diner … index.html

i hope i've helped you smile

  • From: Hartford, CT
  • Registered: 2005-12-02
  • Posts: 16

Re: [HTML/Javascript] DIV does not appear where it should

Hmm.  I found that to be very helpful, but I can't get it to work.  The X and Y parts don't work when I tried.  Would you mine taking my script (below) and seeing if you can get any of it to work in your own way?  I'd really appreciate it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="Javascript">
<!--
    var hideContext=0;
    function showMenu(menu,el,pos)
    {
        el = document.getElementById(el);
        div = document.getElementById(menu);
        
        //Point of the elements left corner, plus width = right corner
        //We want the right edge of the popup to align to the right corner
        //So, get the point of the right corner - the width of the menu
        //And you get the point of the left corner for the div when alligned
        var point = getLeft(el) + el.offsetWidth;
        point = point - div.width;
        
        //To make it under the link, the top + height gives you the bottom
        var top = el.top + el.height;
        
        with(div)
        {
            //Move to below item
            style.top=getTop(el) + 'px';

            //Position depending on align left or right
            if(pos == 1)
                style.left=getLeft(el) + 'px';
            else if(pos == 2)
                style.left=point + 'px';
            
            //Display
            style.visibility='visible';
        }
        
        clearTimeout(hideContext);
    }
    function getLeft(eElement)
    {
        var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
        var eParElement = eElement.offsetParent;     // identify first offset parent element  
        while (eParElement != null)
        {                                            // move up through element hierarchy
            nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
            eParElement = eParElement.offsetParent;  // until no more offset parents exist
        }
        return nLeftPos;                             // return the number calculated
    }
    function getTop(element)
    {
        var topPos = 0;
        //For IE and others
        if(element.offsetParent)
        {
            while(element)
            {
                topPos+=element.offsetTop;
                element=element.offsetParent;
            }
        }
        //For netscape
        else if(element.y)
            topPos=element.y;
        //Return value
        return topPos;
    }
    function hide(menu)
    {
        document.getElementById(menu).style.visibility='hidden';
    }
//-->
</SCRIPT>

<STYLE>
.Popup
{
    position: absolute;
    visibility: hidden;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #000000;
    padding: 3px;
    width: 75px;
}
</STYLE>

</head>

<body>


<DIV align="right">Post #1 | <A id="MenuLink1" href="javascript:void(false)" onClick="showMenu('PostMenu1','MenuLink1','2')">Options</A></DIV>
<!-- POPUP MENU -->
<DIV id="PostMenu1" class="Popup">
    <A href="PostEdit.asp?ForumID=2">Edit</A><BR>
    <A href="PostDelete.asp?ForumID=2">Delete</A><BR>
    <A href="javascript:void(hide('PostMenu1'))">Close</A>                                
</DIV>

<DIV align="right">Post #2 | <A id="MenuLink2" href="javascript:void(false)" onClick="showMenu('PostMenu2','MenuLink2','2')">Options</A></DIV>
<!-- POPUP MENU -->
<DIV id="PostMenu2" class="Popup">
    <A href="PostEdit.asp?ForumID=2">Edit</A><BR>
    <A href="PostDelete.asp?ForumID=2">Delete</A><BR>
    <A href="javascript:void(hide('PostMenu2'))">Close</A>                                
</DIV>



</body>
</html>