Cannot see all content

[Claus Mygind]

I have a hidden <div> which I populate and then display relative to the link that activates it.

My problem is this, when the link is near the bottom of the page and the content of the hidden <div> extends below the bottom, I cannot scroll to see it.

I would like to adjust the top of the <div> placement if it should extend below the screen.

Below is the code I use to determine where the <div> should be displayed.
Basically I capture the current mouse position with the event listener ".onmousemove".

If the height of the <div> should exceed the available room I would like to adjust the top location d.style.top = (cY-46) + "px"; to something other than -46 from the relative position.

How can I determine the height of the dynamically created division?
And how can I determine if it is exceeding the bottom of the page?

var cX = 0; var cY = 0; var rX = 0; var rY = 0;
 
document.onmousemove = UpdateCursorPosition; 
 
function UpdateCursorPosition(e)
{ 
    cX = e.pageX; cY = e.pageY;
}
 
function AssignPosition(d) 
{
    if(self.pageYOffset) 
    {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    }else if(document.documentElement && document.documentElement.scrollTop) 
    {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    }
    else if(document.body) 
    {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if(document.all) 
    {
        cX += rX; 
        cY += rY;
    }
    d.style.left = (cX+107) + "px";
    d.style.top = (cY-46) + "px";
}
 
function ShowContent(d) 
{
    if(d.length < 1) 
    { 
        return; 
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
}
 
 
 

[hsriat]

@Claus Mygind
You can do that by returning div.style.height, BUT only if you have set it, and have not let it attain the height according to its inner elements.

If you have just text inside the div, then you can calculate approx. height by counting the number of chars in the text, and font size.

@Claus Mygind
Calculate it with div's top y co-od, div's height and screen height (screen.availHeight)

[gits]

may be the getComputedStyle() might help? have a look here for the idea and usage.

kind regards

[Claus Mygind]

@gits
Ok that was a very handy article and did get to the point where I can calculate if the popup I want to display is going to be longer than the available space. Also I can calculate what the new position should be based on the amount of overflow (see code below).

Now my problem is getting the <div> element to move to that new location.

In the code I have cobbled the following together.
1. Two <div> elements have been assigned style attributes "fullWidth" and "allContacts"

2. an event listener "onmousemove" tied to the document detects the location of the link in document when mouse is clicked.

3. The position of the "allContacts" <div> is assigned an offset based on this location.

4. Then from the article you suggested, I am able to calculate the top and height of the "allContacts". I compare that to the height of the "fullWidth" <div> and if the total is greater than height of "fullWidth", I then calculate the new top, where I would like to move the element to.

But how do I get it to move once it has been displayed?

One final note - I am working in FireFox and only want a solution for FireFox.

<STYLE TYPE="text/css" >
#allContacts {font-size: 16px;
    padding: 10px;
    width: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: #cc0000;
}
#fullWidth {
     position: absolute;
     white-space: nowrap; 
     left: 0%; 
      top: 25px;
      width: 99%;
      color: #333333;
      padding:5px;
      font-size: 10pt;
        overflow: hidden;
      z-index: 98;
 }
</STYLE>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
 
document.onmousemove = UpdateCursorPosition; 
 
function UpdateCursorPosition(e)
{ 
    cX = e.pageX; cY = e.pageY;
}
 
function AssignPosition(d) 
{
    if(self.pageYOffset) 
    {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    }else if(document.documentElement && document.documentElement.scrollTop) 
    {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    }
    else if(document.body) 
    {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if(document.all) 
    {
        cX += rX; 
        cY += rY;
    }
    d.style.left = (cX+107) + "px";
    d.style.top = (cY-46) + "px";
}
 
function ShowContent(d) 
{
    if(d.length < 1) 
    { 
        return; 
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
getOff();
}
 
//get current dimensions and position of an element
function getOff()
{
    var x = document.getElementById('allContacts');
    var y = document.getElementById('fullWidth');
    if ( x.offsetHeight + x.offsetTop > y.offsetHeight)
    {
        x.top = (x.offsetTop - ((x.offsetHeight + x.offsetTop) - y.offsetHeight))+ 'px';
alert(x.top);
    }
    return;
}
//-->
</SCRIPT>
 
<a href="javascript:ShowContent('allContacts')"    
              id="con_"
              onclick="changeStatus(this)";
              return false;"
> View all contacts </a>
 
 
 

[Claus Mygind]

I got the final piece of the puzzle. Just one minor adjustment to the code above.

I only needed to modify the line

x.top = ....

to

x.style.top = ...

//get current dimensions and position of an element
function getOff()
{
    var x = document.getElementById('allContacts');
    var y = document.getElementById('fullWidth');
    if ( x.offsetHeight + x.offsetTop > y.offsetHeight)
    {
        x.style.top = (x.offsetTop - ((x.offsetHeight + x.offsetTop) - y.offsetHeight))+ 'px';
    }
    return;
}