Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Cannot see all content

Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#1: Jul 22 '09
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?


Expand|Select|Wrap|Line Numbers
  1. var cX = 0; var cY = 0; var rX = 0; var rY = 0;
  2.  
  3. document.onmousemove = UpdateCursorPosition; 
  4.  
  5. function UpdateCursorPosition(e)
  6. { 
  7.     cX = e.pageX; cY = e.pageY;
  8. }
  9.  
  10. function AssignPosition(d) 
  11. {
  12.     if(self.pageYOffset) 
  13.     {
  14.         rX = self.pageXOffset;
  15.         rY = self.pageYOffset;
  16.     }else if(document.documentElement && document.documentElement.scrollTop) 
  17.     {
  18.         rX = document.documentElement.scrollLeft;
  19.         rY = document.documentElement.scrollTop;
  20.     }
  21.     else if(document.body) 
  22.     {
  23.         rX = document.body.scrollLeft;
  24.         rY = document.body.scrollTop;
  25.     }
  26.     if(document.all) 
  27.     {
  28.         cX += rX; 
  29.         cY += rY;
  30.     }
  31.     d.style.left = (cX+107) + "px";
  32.     d.style.top = (cY-46) + "px";
  33. }
  34.  
  35. function ShowContent(d) 
  36. {
  37.     if(d.length < 1) 
  38.     { 
  39.         return; 
  40.     }
  41.     var dd = document.getElementById(d);
  42.     AssignPosition(dd);
  43.     dd.style.display = "block";
  44. }
  45.  
  46.  
  47.  
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#2: Jul 22 '09

re: Cannot see all content

Quote:

Originally Posted by Claus Mygind View Post

How can I determine the height of the dynamically created division?

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.

Quote:

Originally Posted by Claus Mygind View Post

And how can I determine if it is exceeding the bottom of the page?

Calculate it with div's top y co-od, div's height and screen height (screen.availHeight)
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,129
#3: Jul 23 '09

re: Cannot see all content

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

kind regards
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#4: Jul 23 '09

re: Cannot see all content

Quote:

Originally Posted by gits View Post

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

kind regards

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.

Expand|Select|Wrap|Line Numbers
  1. <STYLE TYPE="text/css" >
  2. #allContacts {font-size: 16px;
  3.     padding: 10px;
  4.     width: 50%;
  5.     border-width: 1px;
  6.     border-style: solid;
  7.     border-color: #cc0000;
  8. }
  9. #fullWidth {
  10.      position: absolute;
  11.      white-space: nowrap; 
  12.      left: 0%; 
  13.       top: 25px;
  14.       width: 99%;
  15.       color: #333333;
  16.       padding:5px;
  17.       font-size: 10pt;
  18.         overflow: hidden;
  19.       z-index: 98;
  20.  }
  21. </STYLE>
  22.  
  23. <SCRIPT LANGUAGE="JavaScript">
  24. <!--
  25. var cX = 0; var cY = 0; var rX = 0; var rY = 0;
  26.  
  27. document.onmousemove = UpdateCursorPosition; 
  28.  
  29. function UpdateCursorPosition(e)
  30. { 
  31.     cX = e.pageX; cY = e.pageY;
  32. }
  33.  
  34. function AssignPosition(d) 
  35. {
  36.     if(self.pageYOffset) 
  37.     {
  38.         rX = self.pageXOffset;
  39.         rY = self.pageYOffset;
  40.     }else if(document.documentElement && document.documentElement.scrollTop) 
  41.     {
  42.         rX = document.documentElement.scrollLeft;
  43.         rY = document.documentElement.scrollTop;
  44.     }
  45.     else if(document.body) 
  46.     {
  47.         rX = document.body.scrollLeft;
  48.         rY = document.body.scrollTop;
  49.     }
  50.     if(document.all) 
  51.     {
  52.         cX += rX; 
  53.         cY += rY;
  54.     }
  55.     d.style.left = (cX+107) + "px";
  56.     d.style.top = (cY-46) + "px";
  57. }
  58.  
  59. function ShowContent(d) 
  60. {
  61.     if(d.length < 1) 
  62.     { 
  63.         return; 
  64.     }
  65.     var dd = document.getElementById(d);
  66.     AssignPosition(dd);
  67.     dd.style.display = "block";
  68. getOff();
  69. }
  70.  
  71. //get current dimensions and position of an element
  72. function getOff()
  73. {
  74.     var x = document.getElementById('allContacts');
  75.     var y = document.getElementById('fullWidth');
  76.     if ( x.offsetHeight + x.offsetTop > y.offsetHeight)
  77.     {
  78.         x.top = (x.offsetTop - ((x.offsetHeight + x.offsetTop) - y.offsetHeight))+ 'px';
  79. alert(x.top);
  80.     }
  81.     return;
  82. }
  83. //-->
  84. </SCRIPT>
  85.  
  86. <a href="javascript:ShowContent('allContacts')"    
  87.               id="con_"
  88.               onclick="changeStatus(this)";
  89.               return false;"
  90. > View all contacts </a>
  91.  
  92.  
  93.  
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#5: Jul 23 '09

re: Cannot see all content

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 = ...

Expand|Select|Wrap|Line Numbers
  1. //get current dimensions and position of an element
  2. function getOff()
  3. {
  4.     var x = document.getElementById('allContacts');
  5.     var y = document.getElementById('fullWidth');
  6.     if ( x.offsetHeight + x.offsetTop > y.offsetHeight)
  7.     {
  8.         x.style.top = (x.offsetTop - ((x.offsetHeight + x.offsetTop) - y.offsetHeight))+ 'px';
  9.     }
  10.     return;
  11. }
  12.  
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,382 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved