473,498 Members | 703 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How do I make a page scroll to the top

Claus Mygind
571 Contributor
I have a <div> tag in my app that I minimize on the screen thereby only showing the top line of the content in that division.

The user activates the content (maximizes the content) with the mouseover event.

When active the user can scroll down through the content and mouseout minimizes it again.

My problem is this - when the content is minimized to reveal only one line, it is at the point where the user had scrolled to.

I would like to move the page backup to the top as part of my minimizing procedure. What is a good way to script that code?

Here is my method for minimizing:

Expand|Select|Wrap|Line Numbers
  1. function popDown25()
  2. {
  3.     document.getElementById("freqJobDiv").style.zIndex=0;
  4.     document.getElementById("freqJobDiv").style.width =  "15%";
  5.     document.getElementById("freqJobDiv").style.height = "50px";
  6. }
  7.  
May 29 '09 #1
15 2124
acoder
16,027 Recognized Expert Moderator MVP
I assume you mean the page within the div. Use the scrollTop property.
May 29 '09 #2
Claus Mygind
571 Contributor
Yes you are correct. And your suggestion works, except since I am using mouseout to minimize or for some other reason I have not been able to figure out yet, I can only scroll down using the scroll bar on the right side. As soon as I move the cursor into the center of the screen, it automatically scrolls the content back to the top (not closing the window, just scrollTop). Why would that be?
May 29 '09 #3
Frinavale
9,735 Recognized Expert Moderator Expert
Have you tried using display:none to hide the collapsed div?

I would have thought that if this div is responsible from making the page scroll, that setting this style would make the page content smaller again...thereby scrolling the page back up to where it would have been before.

[edit]
I tested this with the following code and it works fine:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title></title>
  4.  
  5.     <script type="text/javascript">
  6.         function ExpandDiv() {
  7.             var collapsibleSection = document.getElementById("collapsibleSection");
  8.             if (collapsibleSection) {
  9.                 collapsibleSection.style.display = "block";
  10.             }
  11.  
  12.         }
  13.         function CollapseDiv() {
  14.             var collapsibleSection = document.getElementById("collapsibleSection");
  15.             if (collapsibleSection) {
  16.                 collapsibleSection.style.display = "none";
  17.             }
  18.         }
  19.     </script>
  20.  
  21. </head>
  22. <body>
  23.     This is some content in the page.
  24.     <br />
  25.     When you click the link it will cause the page to become larger to the point where
  26.     the user needs to scroll in order to see the linke that collapses the content:<br />
  27.     <a id="hover over me" href="javascript:ExpandDiv();">Expand linky</a>
  28.     <br />
  29.     <div id="collapsibleSection" style="display: none; width:50%; border:solid 1px black;">
  30.         In Flanders Fields the poppies blow<br />
  31.         Between the crosses row on row,<br />
  32.         That mark our place; and in the sky<br />
  33.         The larks, still bravely singing, fly<br />
  34.         Scarce heard amid the guns below.<br />
  35.         <br />
  36.         <br />
  37.         We are the Dead. Short days ago<br />
  38.         We lived, felt dawn, saw sunset glow,<br />
  39.         Loved and were loved, and now we lie<br />
  40.         In Flanders fields.<br />
  41.         <br />
  42.         <br />
  43.         Take up our quarrel with the foe:<br />
  44.         To you from failing hands we throw<br />
  45.         The torch; be yours to hold it high.<br />
  46.         If ye break faith with us who die<br />
  47.         We shall not sleep, though poppies grow<br />
  48.         In Flanders fields.
  49.         <br />
  50.         <br />
  51.         -John McCrae, MD (1872-1918)<br />
  52.         <hr />
  53.         <br />
  54.         In Flanders Fields the poppies blow<br />
  55.         Between the crosses row on row,<br />
  56.         That mark our place; and in the sky<br />
  57.         The larks, still bravely singing, fly<br />
  58.         Scarce heard amid the guns below.<br />
  59.         <br />
  60.         <br />
  61.         We are the Dead. Short days ago<br />
  62.         We lived, felt dawn, saw sunset glow,<br />
  63.         Loved and were loved, and now we lie<br />
  64.         In Flanders fields.<br />
  65.         <br />
  66.         <br />
  67.         Take up our quarrel with the foe:<br />
  68.         To you from failing hands we throw<br />
  69.         The torch; be yours to hold it high.<br />
  70.         If ye break faith with us who die<br />
  71.         We shall not sleep, though poppies grow<br />
  72.         In Flanders fields.
  73.         <br />
  74.         <br />
  75.         -John McCrae, MD (1872-1918)<br />
  76.         <hr />
  77.         <br />
  78.         In Flanders Fields the poppies blow<br />
  79.         Between the crosses row on row,<br />
  80.         That mark our place; and in the sky<br />
  81.         The larks, still bravely singing, fly<br />
  82.         Scarce heard amid the guns below.<br />
  83.         <br />
  84.         <br />
  85.         We are the Dead. Short days ago<br />
  86.         We lived, felt dawn, saw sunset glow,<br />
  87.         Loved and were loved, and now we lie<br />
  88.         In Flanders fields.<br />
  89.         <br />
  90.         <br />
  91.         Take up our quarrel with the foe:<br />
  92.         To you from failing hands we throw<br />
  93.         The torch; be yours to hold it high.<br />
  94.         If ye break faith with us who die<br />
  95.         We shall not sleep, though poppies grow<br />
  96.         In Flanders fields.
  97.         <br />
  98.         <br />
  99.         -John McCrae, MD (1872-1918)<br />
  100.         <hr />
  101.         <br />
  102.         In Flanders Fields the poppies blow<br />
  103.         Between the crosses row on row,<br />
  104.         That mark our place; and in the sky<br />
  105.         The larks, still bravely singing, fly<br />
  106.         Scarce heard amid the guns below.<br />
  107.         <br />
  108.         <br />
  109.         We are the Dead. Short days ago<br />
  110.         We lived, felt dawn, saw sunset glow,<br />
  111.         Loved and were loved, and now we lie<br />
  112.         In Flanders fields.<br />
  113.         <br />
  114.         <br />
  115.         Take up our quarrel with the foe:<br />
  116.         To you from failing hands we throw<br />
  117.         The torch; be yours to hold it high.<br />
  118.         If ye break faith with us who die<br />
  119.         We shall not sleep, though poppies grow<br />
  120.         In Flanders fields.
  121.         <br />
  122.         <br />
  123.         -John McCrae, MD (1872-1918)<br />
  124.         <hr />
  125.         <br />
  126.         In Flanders Fields the poppies blow<br />
  127.         Between the crosses row on row,<br />
  128.         That mark our place; and in the sky<br />
  129.         The larks, still bravely singing, fly<br />
  130.         Scarce heard amid the guns below.<br />
  131.         <br />
  132.         <br />
  133.         We are the Dead. Short days ago<br />
  134.         We lived, felt dawn, saw sunset glow,<br />
  135.         Loved and were loved, and now we lie<br />
  136.         In Flanders fields.<br />
  137.         <br />
  138.         <br />
  139.         Take up our quarrel with the foe:<br />
  140.         To you from failing hands we throw<br />
  141.         The torch; be yours to hold it high.<br />
  142.         If ye break faith with us who die<br />
  143.         We shall not sleep, though poppies grow<br />
  144.         In Flanders fields.
  145.         <br />
  146.         <br />
  147.         -John McCrae, MD (1872-1918)<br />
  148.         <hr />
  149.         <br />
  150.         In Flanders Fields the poppies blow<br />
  151.         Between the crosses row on row,<br />
  152.         That mark our place; and in the sky<br />
  153.         The larks, still bravely singing, fly<br />
  154.         Scarce heard amid the guns below.<br />
  155.         <br />
  156.         <br />
  157.         We are the Dead. Short days ago<br />
  158.         We lived, felt dawn, saw sunset glow,<br />
  159.         Loved and were loved, and now we lie<br />
  160.         In Flanders fields.<br />
  161.         <br />
  162.         <br />
  163.         Take up our quarrel with the foe:<br />
  164.         To you from failing hands we throw<br />
  165.         The torch; be yours to hold it high.<br />
  166.         If ye break faith with us who die<br />
  167.         We shall not sleep, though poppies grow<br />
  168.         In Flanders fields.
  169.         <br />
  170.         <br />
  171.         -John McCrae, MD (1872-1918)<br />
  172.         <hr />
  173.         <br />
  174.         <a id="hoveroverme" href="javascript:CollapseDiv();">Collapse linky</a>
  175.     </div>
  176. </body>
  177. </html>
  178.  
  179.  
[/edit]
May 29 '09 #4
Claus Mygind
571 Contributor
I have not tried your suggestion, but will give it a shot. I am not interested in hiding the whole division, just want to make it samller to show only the top line. For whatever reason the visible portion of the division is where the user scrolled down to. Obviously there is something in my code I do not understand.
May 29 '09 #5
Frinavale
9,735 Recognized Expert Moderator Expert
I posted example code by editing...
May 29 '09 #6
Frinavale
9,735 Recognized Expert Moderator Expert
Ahh I see...

You need to set the height and overflow styles of the div to achieve this... something like:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title></title>
  4.  
  5.     <script type="text/javascript">
  6.         function ExpandDiv() {
  7.             var collapsibleSection = document.getElementById("collapsibleSection");
  8.             if (collapsibleSection) {
  9.                 collapsibleSection.style.height = "auto";
  10.                 collapsibleSection.style.overflow = "visible";
  11.             }
  12.  
  13.         }
  14.         function CollapseDiv() {
  15.             var collapsibleSection = document.getElementById("collapsibleSection");
  16.             if (collapsibleSection) {
  17.                 collapsibleSection.style.height = "12px";
  18.                 collapsibleSection.style.overflow = "hidden";
  19.             }
  20.         }
  21.     </script>
  22.  
  23. </head>
  24. <body>
  25.     This is some content in the page.
  26.     <br />
  27.     When you click the link it will cause the page to become larger to the point where
  28.     the user needs to scroll in order to see the linke that collapses the content:<br />
  29.     <a id="hover over me" href="javascript:ExpandDiv();">Expand linky</a>
  30.     <br />
  31.     <div id="collapsibleSection" style="height:14px; font-size:11px; width:50%; border:solid 1px black; overflow:hidden;">
  32.         In Flanders Fields the poppies blow<br />
  33.         Between the crosses row on row,<br />
  34.         That mark our place; and in the sky<br />
  35.         The larks, still bravely singing, fly<br />
  36.         Scarce heard amid the guns below.<br />
  37.         <br />
  38.         <br />
  39.         We are the Dead. Short days ago<br />
  40.         We lived, felt dawn, saw sunset glow,<br />
  41.         Loved and were loved, and now we lie<br />
  42.         In Flanders fields.<br />
  43.         <br />
  44.         <br />
  45.         Take up our quarrel with the foe:<br />
  46.         To you from failing hands we throw<br />
  47.         The torch; be yours to hold it high.<br />
  48.         If ye break faith with us who die<br />
  49.         We shall not sleep, though poppies grow<br />
  50.         In Flanders fields.
  51.         <br />
  52.         <br />
  53.         -John McCrae, MD (1872-1918)<br />
  54.         <hr />
  55.         <br />
  56.         In Flanders Fields the poppies blow<br />
  57.         Between the crosses row on row,<br />
  58.         That mark our place; and in the sky<br />
  59.         The larks, still bravely singing, fly<br />
  60.         Scarce heard amid the guns below.<br />
  61.         <br />
  62.         <br />
  63.         We are the Dead. Short days ago<br />
  64.         We lived, felt dawn, saw sunset glow,<br />
  65.         Loved and were loved, and now we lie<br />
  66.         In Flanders fields.<br />
  67.         <br />
  68.         <br />
  69.         Take up our quarrel with the foe:<br />
  70.         To you from failing hands we throw<br />
  71.         The torch; be yours to hold it high.<br />
  72.         If ye break faith with us who die<br />
  73.         We shall not sleep, though poppies grow<br />
  74.         In Flanders fields.
  75.         <br />
  76.         <br />
  77.         -John McCrae, MD (1872-1918)<br />
  78.         <hr />
  79.         <br />
  80.         In Flanders Fields the poppies blow<br />
  81.         Between the crosses row on row,<br />
  82.         That mark our place; and in the sky<br />
  83.         The larks, still bravely singing, fly<br />
  84.         Scarce heard amid the guns below.<br />
  85.         <br />
  86.         <br />
  87.         We are the Dead. Short days ago<br />
  88.         We lived, felt dawn, saw sunset glow,<br />
  89.         Loved and were loved, and now we lie<br />
  90.         In Flanders fields.<br />
  91.         <br />
  92.         <br />
  93.         Take up our quarrel with the foe:<br />
  94.         To you from failing hands we throw<br />
  95.         The torch; be yours to hold it high.<br />
  96.         If ye break faith with us who die<br />
  97.         We shall not sleep, though poppies grow<br />
  98.         In Flanders fields.
  99.         <br />
  100.         <br />
  101.         -John McCrae, MD (1872-1918)<br />
  102.         <hr />
  103.         <br />
  104.         In Flanders Fields the poppies blow<br />
  105.         Between the crosses row on row,<br />
  106.         That mark our place; and in the sky<br />
  107.         The larks, still bravely singing, fly<br />
  108.         Scarce heard amid the guns below.<br />
  109.         <br />
  110.         <br />
  111.         We are the Dead. Short days ago<br />
  112.         We lived, felt dawn, saw sunset glow,<br />
  113.         Loved and were loved, and now we lie<br />
  114.         In Flanders fields.<br />
  115.         <br />
  116.         <br />
  117.         Take up our quarrel with the foe:<br />
  118.         To you from failing hands we throw<br />
  119.         The torch; be yours to hold it high.<br />
  120.         If ye break faith with us who die<br />
  121.         We shall not sleep, though poppies grow<br />
  122.         In Flanders fields.
  123.         <br />
  124.         <br />
  125.         -John McCrae, MD (1872-1918)<br />
  126.         <hr />
  127.         <br />
  128.         In Flanders Fields the poppies blow<br />
  129.         Between the crosses row on row,<br />
  130.         That mark our place; and in the sky<br />
  131.         The larks, still bravely singing, fly<br />
  132.         Scarce heard amid the guns below.<br />
  133.         <br />
  134.         <br />
  135.         We are the Dead. Short days ago<br />
  136.         We lived, felt dawn, saw sunset glow,<br />
  137.         Loved and were loved, and now we lie<br />
  138.         In Flanders fields.<br />
  139.         <br />
  140.         <br />
  141.         Take up our quarrel with the foe:<br />
  142.         To you from failing hands we throw<br />
  143.         The torch; be yours to hold it high.<br />
  144.         If ye break faith with us who die<br />
  145.         We shall not sleep, though poppies grow<br />
  146.         In Flanders fields.
  147.         <br />
  148.         <br />
  149.         -John McCrae, MD (1872-1918)<br />
  150.         <hr />
  151.         <br />
  152.         In Flanders Fields the poppies blow<br />
  153.         Between the crosses row on row,<br />
  154.         That mark our place; and in the sky<br />
  155.         The larks, still bravely singing, fly<br />
  156.         Scarce heard amid the guns below.<br />
  157.         <br />
  158.         <br />
  159.         We are the Dead. Short days ago<br />
  160.         We lived, felt dawn, saw sunset glow,<br />
  161.         Loved and were loved, and now we lie<br />
  162.         In Flanders fields.<br />
  163.         <br />
  164.         <br />
  165.         Take up our quarrel with the foe:<br />
  166.         To you from failing hands we throw<br />
  167.         The torch; be yours to hold it high.<br />
  168.         If ye break faith with us who die<br />
  169.         We shall not sleep, though poppies grow<br />
  170.         In Flanders fields.
  171.         <br />
  172.         <br />
  173.         -John McCrae, MD (1872-1918)<br />
  174.         <hr />
  175.         <br />
  176.         <a id="hoveroverme" href="javascript:CollapseDiv();">Collapse linky</a>
  177.     </div>
  178. </body>
  179. </html>
May 29 '09 #7
Claus Mygind
571 Contributor
That works very well thank you. I was hoping to have the division scrolling with a screen height of 75% but that combination was not possible from what I tried.

Thanks for your help
Jun 1 '09 #8
Frinavale
9,735 Recognized Expert Moderator Expert
@Claus Mygind
Why isn't it working for you?

Instead of setting the division to to "auto" set the height to 75%...and instead of setting the overflow style to "visible" the overflow to "auto".

Set the scrollTop of the division to 0 before you collapse (set the overflow property to "visible") the div so that the division's content is displaying the first line again...

For example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title></title>
  4.  
  5.     <script type="text/javascript">
  6.         function ExpandDiv() {
  7.             var collapsibleSection = document.getElementById("collapsibleSection");
  8.             if (collapsibleSection) {
  9.  
  10.                 collapsibleSection.style.height = "75%";
  11.                 collapsibleSection.style.overflow = "auto";
  12.             }
  13.  
  14.         }
  15.         function CollapseDiv() {
  16.             var collapsibleSection = document.getElementById("collapsibleSection");
  17.             if (collapsibleSection) {
  18.                 collapsibleSection.scrollTop=0;
  19.                 collapsibleSection.style.height = "12px";
  20.                 collapsibleSection.style.overflow = "hidden";
  21.             }
  22.         }
  23.     </script>
  24.  
  25. </head>
  26. <body>
  27.     This is some content in the page.
  28.     <br />
  29.     When you hover over the content in the box it will expand it to 75% of the screen.<br />
  30.     You can scroll this content and view it to your heart's content. <br />
  31.     When you no longer want to view content simply move the mouse cursor out of the box.<br />
  32.     This will is collapsed the box to it's original size and redisplay the first line (which is displayed as *poppy* red text).
  33.     <br />
  34.     <div id="collapsibleSection" style="height:14px; font-size:11px; width:50%; border:solid 1px black; overflow:hidden;" onmouseover="ExpandDiv()" onmouseout="CollapseDiv()">
  35.         <span id="firstLine" style="color:#C00000;"> Flanders Fields the poppies blow</span><br />
  36.         Between the crosses row on row,<br />
  37.         That mark our place; and in the sky<br />
  38.         The larks, still bravely singing, fly<br />
  39.         Scarce heard amid the guns below.<br />
  40.         <br />
  41.         <br />
  42.         We are the Dead. Short days ago<br />
  43.         We lived, felt dawn, saw sunset glow,<br />
  44.         Loved and were loved, and now we lie<br />
  45.         In Flanders fields.<br />
  46.         <br />
  47.         <br />
  48.         Take up our quarrel with the foe:<br />
  49.         To you from failing hands we throw<br />
  50.         The torch; be yours to hold it high.<br />
  51.         If ye break faith with us who die<br />
  52.         We shall not sleep, though poppies grow<br />
  53.         In Flanders fields.
  54.         <br />
  55.         <br />
  56.         -John McCrae, MD (1872-1918)<br />
  57.         <hr />
  58.         <br />
  59.         In Flanders Fields the poppies blow<br />
  60.         Between the crosses row on row,<br />
  61.         That mark our place; and in the sky<br />
  62.         The larks, still bravely singing, fly<br />
  63.         Scarce heard amid the guns below.<br />
  64.         <br />
  65.         <br />
  66.         We are the Dead. Short days ago<br />
  67.         We lived, felt dawn, saw sunset glow,<br />
  68.         Loved and were loved, and now we lie<br />
  69.         In Flanders fields.<br />
  70.         <br />
  71.         <br />
  72.         Take up our quarrel with the foe:<br />
  73.         To you from failing hands we throw<br />
  74.         The torch; be yours to hold it high.<br />
  75.         If ye break faith with us who die<br />
  76.         We shall not sleep, though poppies grow<br />
  77.         In Flanders fields.
  78.         <br />
  79.         <br />
  80.         -John McCrae, MD (1872-1918)<br />
  81.         <hr />
  82.         <br />
  83.         In Flanders Fields the poppies blow<br />
  84.         Between the crosses row on row,<br />
  85.         That mark our place; and in the sky<br />
  86.         The larks, still bravely singing, fly<br />
  87.         Scarce heard amid the guns below.<br />
  88.         <br />
  89.         <br />
  90.         We are the Dead. Short days ago<br />
  91.         We lived, felt dawn, saw sunset glow,<br />
  92.         Loved and were loved, and now we lie<br />
  93.         In Flanders fields.<br />
  94.         <br />
  95.         <br />
  96.         Take up our quarrel with the foe:<br />
  97.         To you from failing hands we throw<br />
  98.         The torch; be yours to hold it high.<br />
  99.         If ye break faith with us who die<br />
  100.         We shall not sleep, though poppies grow<br />
  101.         In Flanders fields.
  102.         <br />
  103.         <br />
  104.         -John McCrae, MD (1872-1918)<br />
  105.         <hr />
  106.         <br />
  107.         In Flanders Fields the poppies blow<br />
  108.         Between the crosses row on row,<br />
  109.         That mark our place; and in the sky<br />
  110.         The larks, still bravely singing, fly<br />
  111.         Scarce heard amid the guns below.<br />
  112.         <br />
  113.         <br />
  114.         We are the Dead. Short days ago<br />
  115.         We lived, felt dawn, saw sunset glow,<br />
  116.         Loved and were loved, and now we lie<br />
  117.         In Flanders fields.<br />
  118.         <br />
  119.         <br />
  120.         Take up our quarrel with the foe:<br />
  121.         To you from failing hands we throw<br />
  122.         The torch; be yours to hold it high.<br />
  123.         If ye break faith with us who die<br />
  124.         We shall not sleep, though poppies grow<br />
  125.         In Flanders fields.
  126.         <br />
  127.         <br />
  128.         -John McCrae, MD (1872-1918)<br />
  129.         <hr />
  130.         <br />
  131.         In Flanders Fields the poppies blow<br />
  132.         Between the crosses row on row,<br />
  133.         That mark our place; and in the sky<br />
  134.         The larks, still bravely singing, fly<br />
  135.         Scarce heard amid the guns below.<br />
  136.         <br />
  137.         <br />
  138.         We are the Dead. Short days ago<br />
  139.         We lived, felt dawn, saw sunset glow,<br />
  140.         Loved and were loved, and now we lie<br />
  141.         In Flanders fields.<br />
  142.         <br />
  143.         <br />
  144.         Take up our quarrel with the foe:<br />
  145.         To you from failing hands we throw<br />
  146.         The torch; be yours to hold it high.<br />
  147.         If ye break faith with us who die<br />
  148.         We shall not sleep, though poppies grow<br />
  149.         In Flanders fields.
  150.         <br />
  151.         <br />
  152.         -John McCrae, MD (1872-1918)<br />
  153.         <hr />
  154.         <br />
  155.         In Flanders Fields the poppies blow<br />
  156.         Between the crosses row on row,<br />
  157.         That mark our place; and in the sky<br />
  158.         The larks, still bravely singing, fly<br />
  159.         Scarce heard amid the guns below.<br />
  160.         <br />
  161.         <br />
  162.         We are the Dead. Short days ago<br />
  163.         We lived, felt dawn, saw sunset glow,<br />
  164.         Loved and were loved, and now we lie<br />
  165.         In Flanders fields.<br />
  166.         <br />
  167.         <br />
  168.         Take up our quarrel with the foe:<br />
  169.         To you from failing hands we throw<br />
  170.         The torch; be yours to hold it high.<br />
  171.         If ye break faith with us who die<br />
  172.         We shall not sleep, though poppies grow<br />
  173.         In Flanders fields.
  174.         <br />
  175.         <br />
  176.         -John McCrae, MD (1872-1918)<br />
  177.         <hr />
  178.         <br />       
  179.     </div>
  180.     <br />
  181.     This is some more page content that comes after the collapsible division section.
  182. </body>
  183. </html>
Jun 1 '09 #9
Claus Mygind
571 Contributor
Ok here is my code per your suggestion:

In this confirguration you will notice I have replicated your exact suggestions above. When the division pops up
1) I can scroll down only with the slide bar. Using the scroll button on the mouse does not work it keeps scrolling back to the top.

2) if is use the slide bar to scroll down; as soon as I move the mouse to the content of the the popup division, it automatically scrolls back to the top.

3) if I uncomment the "visible" line, the popup will collapse as soon as I move the mouse from the original visible area at top.

Expand|Select|Wrap|Line Numbers
  1. function popUp25()
  2. {
  3.     document.getElementById("freqJobDiv").style.zIndex = 20;
  4.     document.getElementById("freqJobDiv").style.width =  "70%";
  5. //    document.getElementById("freqJobDiv").style.height = "auto";
  6.     document.getElementById("freqJobDiv").style.height = "75%";
  7.     document.getElementById("freqJobDiv").style.overflow = "auto";
  8. //    document.getElementById("freqJobDiv").style.overflow = "visible";
  9. }
  10.  
  11. function popDown25()
  12. {
  13.     document.getElementById("freqJobDiv").style.zIndex=0;
  14.     document.getElementById("freqJobDiv").style.width =  "15%";
  15.     document.getElementById("freqJobDiv").scrollTop=0;
  16.     document.getElementById("freqJobDiv").style.height = "50px";
  17.     document.getElementById("freqJobDiv").style.overflow = "hidden";
  18. }
Anyway I was quite happy with the point you had gotten me to with the auto height so I will simply revert to that; which is this configuration:

Expand|Select|Wrap|Line Numbers
  1. function popUp25()
  2. {
  3.     document.getElementById("freqJobDiv").style.zIndex = 20;
  4.     document.getElementById("freqJobDiv").style.width =  "70%";
  5.     document.getElementById("freqJobDiv").style.height = "auto";
  6. //    document.getElementById("freqJobDiv").style.height = "75%";
  7.     document.getElementById("freqJobDiv").style.overflow = "auto";
  8.     document.getElementById("freqJobDiv").style.overflow = "visible";
  9. }
  10.  
  11. function popDown25()
  12. {
  13.     document.getElementById("freqJobDiv").style.zIndex=0;
  14.     document.getElementById("freqJobDiv").style.width =  "15%";
  15.     document.getElementById("freqJobDiv").scrollTop=0;
  16.     document.getElementById("freqJobDiv").style.height = "50px";
  17.     document.getElementById("freqJobDiv").style.overflow = "hidden";
  18. }
  19.  
  20.  
Thanks again for your assistance it was of great help.
Jun 1 '09 #10
Claus Mygind
571 Contributor
Sorry, this is the only configuration that works. The one I posted above had one quirk in it. If you moved the mouse down from the top line the division collapsed. But if you scrolled with the mouse button before moving the mouse down it stayed put.

This version displayed here is the most stable for what ever reason.


Expand|Select|Wrap|Line Numbers
  1.     document.getElementById("freqJobDiv").style.zIndex = 20;
  2.     document.getElementById("freqJobDiv").style.width =  "70%";
  3.     document.getElementById("freqJobDiv").style.height = "auto";
  4. //    document.getElementById("freqJobDiv").style.height = "75%";
  5.     document.getElementById("freqJobDiv").style.overflow = "auto";
  6. //    document.getElementById("freqJobDiv").style.overflow = "visible";
  7.  
Jun 1 '09 #11
Frinavale
9,735 Recognized Expert Moderator Expert
What browser were you using to test this?
I had no issues with using the scroll button on the mouse (I use FireFox when developing...[edit]tried in IE8 and it worked fine too[/edit]).

Just so you know the z-index style only affects elements that have a specified position style. Setting this for a div with a default position style won't actually do anything (default is static)...so in your case it may be redundant to set the z-index style attribute.
Jun 1 '09 #12
Claus Mygind
571 Contributor
I am working on an Intranet site and require all users to use FireFox. I am developing this on FireFox v 3.0.10.

I am aware that only position:absolute can be used with z-index.

I am sure the sample code you provided works just fine, so I must have something else in my code that adversely affect the scrolling effect. Nonetheless I have included what I think is the relevant code below.

As you can see from the code the skeleton divisions and content is defined when the page is loaded. Then I use ajax to retrieve the detail information which is then written using javaScript.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <HTML>
  3.  
  4.  <HEAD>
  5.  
  6.     <style type="text/css">
  7.  
  8.         #timeHeader 
  9.         {
  10.             position: absolute;
  11.             white-space: nowrap; 
  12.             left: 0%; 
  13.             top: 25px;
  14.             width: 98%;
  15.             color: #333333;
  16.             background-color: #FFFF99;            
  17.             border-style: ridge;
  18.             padding:3px;
  19.             font-size: 10pt;
  20.             overflow: hidden;
  21.             z-index: 2;
  22.         }
  23.         #timeBody
  24.         {
  25.             position: absolute;
  26.             white-space: nowrap; 
  27.             left: 0%; 
  28.             top: 130px;
  29.             width: 99%;
  30.             height: 75%;
  31.             color: #333333;
  32.             background-color: #9900CC;            
  33.             border-style: ridge;
  34.             padding:3px;
  35.             font-size: 10pt;
  36.             overflow: scroll;
  37.             tabindex:'-1';
  38.             z-index: 2;
  39.         }
  40.         #freqJobDiv
  41.         {
  42.             position: absolute;
  43.             white-space: nowrap; 
  44.             left: 25%; 
  45.             top: 109px;
  46.             width: 15%;
  47.             height: 50px;
  48.             color: #333333;
  49.             background-color: #33FFFF;            
  50.             border-style: ridge;
  51.             padding:3px;
  52.             font-size: 10pt;
  53.             overflow: scroll;
  54.             visibility: hidden;
  55.             z-index: 0;
  56.         }
  57.     </style>
  58.  
  59.     <script language="JavaScript">
  60.         function popUp25()
  61.         {
  62.             document.getElementById("freqJobDiv").style.zIndex = 20;
  63.             document.getElementById("freqJobDiv").style.width =  "70%";
  64.             document.getElementById("freqJobDiv").style.height = "auto";
  65.             document.getElementById("freqJobDiv").style.overflow = "auto";
  66.         }
  67.  
  68.         function popDown25()
  69.         {
  70.             document.getElementById("freqJobDiv").style.zIndex=0;
  71.             document.getElementById("freqJobDiv").style.width =  "15%";
  72.             document.getElementById("freqJobDiv").scrollTop=0;
  73.             document.getElementById("freqJobDiv").style.height = "50px";
  74.             document.getElementById("freqJobDiv").style.overflow = "hidden";
  75.         }
  76.  
  77.         function load25()
  78.         {
  79.             if (a25Jobs.length > 1 || a25Jobs[0] != "" )
  80.             {
  81.                 document.getElementById("freqJobDiv").style.visibility = 'visible'
  82.                 var tr, td;
  83.                 tbody = document.getElementById("fJobLines");
  84.  
  85.                 // remove existing rows, if any
  86.                 while (tbody.rows.length > 0) {
  87.                     tbody.deleteRow(0);
  88.                 }
  89.  
  90.                 tr = tbody.insertRow(tbody.rows.length);
  91.                 td = tr.insertCell(tr.cells.length);
  92.                 td.setAttribute("align", "center");
  93.                 td.innerHTML = 'Job';
  94.                 td = tr.insertCell(tr.cells.length);
  95.                td.setAttribute("align", "center");
  96.                 td.innerHTML = 'Project';
  97.                 td = tr.insertCell(tr.cells.length);
  98.                 td.setAttribute("align", "center");
  99.                 td.innerHTML = 'City';
  100.                 td = tr.insertCell(tr.cells.length);
  101.                td.setAttribute("align", "center");
  102.                 td.innerHTML = 'Client';
  103.                 td = tr.insertCell(tr.cells.length);
  104.                 td.setAttribute("align", "center");
  105.                 td.innerHTML = 'Date';
  106.  
  107.                 var cCellCnt = 1
  108.                 var cData = ""
  109.                 for (var i = 0; i < a25Jobs.length; i++ )
  110.                 {
  111.                     switch ( cCellCnt  )
  112.                     {
  113.                         case 1:
  114.                             tr = tbody.insertRow(tbody.rows.length);
  115.                             break;
  116.                         case 5:
  117.                             cCellCnt = 0
  118.                             break;
  119.                     }
  120.                     td = tr.insertCell(tr.cells.length);
  121.                     td.setAttribute("nowrap", "nowrap");
  122.                     if (cCellCnt == 1)
  123.                     {
  124.                         td.innerHTML = '<A HREF="#" id="'+a25Jobs[i]+'"onclick="loadThis25(this); return false;">'+a25Jobs[i]+'</A>';
  125.                     }else{
  126.                         td.innerHTML = a25Jobs[i];
  127.                     }
  128.                     cCellCnt += 1
  129.                 }
  130.             }
  131.         }
  132.  
  133.         function loadThis25(obj)
  134.         {
  135.             document.getElementById("JOBID_"+cLoc).value = obj.id;
  136.             document.getElementById("JOBID_"+cLoc).focus();
  137.             var cThis = document.getElementById("JOBID_"+cLoc)
  138.  
  139.             getPrjct(cThis); 
  140.  
  141.             popDown25();
  142.         }
  143.     </script>
  144.  
  145.  </HEAD>
  146.  
  147.  
  148.  <body>
  149.  
  150.     <form method=POST >
  151.  
  152.         <div id="timeHeader">
  153.         </div>
  154.  
  155.         <div id="timeBody">
  156.         </div>
  157.  
  158.     </form>
  159.  
  160.     <div
  161.         id="freqJobDiv"
  162.         onmouseout="popDown25();"
  163.         onmouseover="popUp25();"
  164.     >
  165.               <A name='25top'></A>My Last 50 Jobs
  166.         <TABLE
  167.             border="1"
  168.             border="1"
  169.             bgcolor="#CCCCFF"
  170.         >
  171.         <tbody
  172.             id="fJobLines"
  173.             valign="bottom"
  174.         >
  175.             <TR>
  176.                 <TD align="center">Job</TD>
  177.                 <TD align="center">Project</TD>
  178.                 <TD align="center">City</TD>
  179.                 <TD align="center">Client</TD>
  180.                 <TD align="center">Date</TD>
  181.             </TR>
  182.         </tbody>    
  183.         </TABLE>    
  184.     </div>
  185. </body>
  186.  
  187. </HTML>
  188.  
Jun 4 '09 #13
Frinavale
9,735 Recognized Expert Moderator Expert
I don't know why you are trying to show the first line like this.
It looks like you have a Title Section and then a Content Section.
Why don't you just collapse the Content Section (the table)?

Then you don't have to worry about scrolling back up to the top...and the title section is shown at all times.

Here's what I'm talking about:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         #timeHeader
  5.         {
  6.             position: absolute;
  7.             white-space: nowrap;
  8.             left: 0%;
  9.             top: 25px;
  10.             width: 98%;
  11.             color: #333333;
  12.             background-color: #FFFF99;
  13.             border-style: ridge;
  14.             padding: 3px;
  15.             font-size: 10pt;
  16.             overflow: hidden;
  17.             z-index: 2;
  18.         }
  19.         #timeBody
  20.         {
  21.             position: absolute;
  22.             white-space: nowrap;
  23.             left: 0%;
  24.             top: 130px; 
  25.             /*width: 99%;
  26.             height: 75%;*/
  27.             color: #333333;
  28.             background-color: #9900CC;
  29.             border-style: ridge;
  30.             padding: 3px;
  31.             font-size: 10pt;
  32.             overflow: scroll;
  33.             tabindex: '-1';
  34.             z-index: 2;
  35.         }
  36.         #freqJobDiv
  37.         {
  38.             position: absolute;
  39.             white-space: nowrap;
  40.             left: 25%;
  41.             top: 109px;
  42.             /*width: 15%;
  43.             height: 50px;*/
  44.             color: #333333;
  45.             border: ridge 1px #33FFFF;
  46.             padding: 3px;
  47.             font-size: 10pt;
  48.             /*overflow: scroll; 
  49.             visibility: hidden;*/
  50.             z-index: 0;
  51.         }
  52.     </style>
  53.  
  54.     <script type="text/javascript" language="JavaScript">
  55.         function popUp25() {
  56.             /*document.getElementById("freqJobDiv").style.zIndex = 20;
  57.             document.getElementById("freqJobDiv").style.width = "70%";
  58.             document.getElementById("freqJobDiv").style.height = "auto";
  59.             document.getElementById("freqJobDiv").style.overflow = "auto";*/
  60.  
  61.             var collapsibleDiv = document.getElementById("jobCollapseContent");
  62.             collapsibleDiv.style.height = "70px";
  63.             collapsibleDiv.style.overflow = "auto";
  64.  
  65.         }
  66.  
  67.         function popDown25() {
  68.             /*document.getElementById("freqJobDiv").style.zIndex = 0;
  69.             document.getElementById("freqJobDiv").style.width = "15%";
  70.             document.getElementById("freqJobDiv").scrollTop = 0;
  71.             document.getElementById("freqJobDiv").style.height = "50px";
  72.             document.getElementById("freqJobDiv").style.overflow = "hidden";*/
  73.  
  74.             var collapsibleDiv = document.getElementById("jobCollapseContent");
  75.             collapsibleDiv.style.height = "0px";
  76.             collapsibleDiv.style.overflow = "hidden";
  77.         }
  78.  
  79.         function load25() {
  80.             a25Jobs = ["JobA", "JobB", "JobC", "JobD", "JobE", "JobF", "JobG", "JobH", "JobI", "JobJ", "JobK", "JobL", "JobM", "JobN", "JobO", "JobP"]
  81.             if (a25Jobs.length > 1 || a25Jobs[0] != "") {
  82.                 document.getElementById("freqJobDiv").style.visibility = 'visible'
  83.                 var tr, td;
  84.                 tbody = document.getElementById("fJobLines");
  85.  
  86.                 // remove existing rows, if any
  87.                 while (tbody.rows.length > 0) {
  88.                     tbody.deleteRow(0);
  89.                 }
  90.  
  91.                 tr = tbody.insertRow(tbody.rows.length);
  92.                 td = tr.insertCell(tr.cells.length);
  93.                 td.setAttribute("align", "center");
  94.                 td.innerHTML = 'Job';
  95.                 td = tr.insertCell(tr.cells.length);
  96.                 td.setAttribute("align", "center");
  97.                 td.innerHTML = 'Project';
  98.                 td = tr.insertCell(tr.cells.length);
  99.                 td.setAttribute("align", "center");
  100.                 td.innerHTML = 'City';
  101.                 td = tr.insertCell(tr.cells.length);
  102.                 td.setAttribute("align", "center");
  103.                 td.innerHTML = 'Client';
  104.                 td = tr.insertCell(tr.cells.length);
  105.                 td.setAttribute("align", "center");
  106.                 td.innerHTML = 'Date';
  107.  
  108.                 var cCellCnt = 1
  109.                 var cData = ""
  110.                 for (var i = 0; i < a25Jobs.length; i++) {
  111.                     switch (cCellCnt) {
  112.                         case 1:
  113.                             tr = tbody.insertRow(tbody.rows.length);
  114.                             break;
  115.                         case 5:
  116.                             cCellCnt = 0
  117.                             break;
  118.                     }
  119.                     td = tr.insertCell(tr.cells.length);
  120.                     td.setAttribute("nowrap", "nowrap");
  121.                     if (cCellCnt == 1) {
  122.                         td.innerHTML = '<A HREF="#" id="' + a25Jobs[i] + '"onclick="loadThis25(this); return false;">' + a25Jobs[i] + '</A>';
  123.                     } else {
  124.                         td.innerHTML = a25Jobs[i];
  125.                     }
  126.                     cCellCnt += 1
  127.                 }
  128.             }
  129.         }
  130.  
  131.         function loadThis25(obj) {
  132.             document.getElementById("JOBID_" + cLoc).value = obj.id;
  133.             document.getElementById("JOBID_" + cLoc).focus();
  134.             var cThis = document.getElementById("JOBID_" + cLoc)
  135.  
  136.             getPrjct(cThis);
  137.  
  138.             popDown25();
  139.         }
  140.     </script>
  141.  
  142. </head>
  143. <body>
  144.     <form id="form1" action="POST">
  145.     <div id="timeHeader">
  146.     </div>
  147.     <div id="timeBody">
  148.     </div>
  149.     </form>
  150.     <div id="freqJobDiv" onmouseout="popDown25();" onmouseover="popUp25();">
  151.         <a name='25top'>top</a>My Last 50 Jobs
  152.         <div id="jobCollapseContent">
  153.             <table border="1" bgcolor="#CCCCFF">
  154.                 <tbody id="fJobLines" valign="bottom">
  155.                     <tr>
  156.                         <td align="center">
  157.                             Job
  158.                         </td>
  159.                         <td align="center">
  160.                             Project
  161.                         </td>
  162.                         <td align="center">
  163.                             City
  164.                         </td>
  165.                         <td align="center">
  166.                             Client
  167.                         </td>
  168.                         <td align="center">
  169.                             Date
  170.                         </td>
  171.                     </tr>
  172.                     <tr>
  173.                         <td align="center">
  174.                             Job1
  175.                         </td>
  176.                         <td align="center">
  177.                             Project1
  178.                         </td>
  179.                         <td align="center">
  180.                             City1
  181.                         </td>
  182.                         <td align="center">
  183.                             Client1
  184.                         </td>
  185.                         <td align="center">
  186.                             Date2
  187.                         </td>
  188.                     </tr>
  189.                     <tr>
  190.                         <td align="center">
  191.                             Job2
  192.                         </td>
  193.                         <td align="center">
  194.                             Project2
  195.                         </td>
  196.                         <td align="center">
  197.                             City2
  198.                         </td>
  199.                         <td align="center">
  200.                             Client2
  201.                         </td>
  202.                         <td align="center">
  203.                             Date2
  204.                         </td>
  205.                     </tr>
  206.                     <tr>
  207.                         <td align="center">
  208.                             Job3
  209.                         </td>
  210.                         <td align="center">
  211.                             Project3
  212.                         </td>
  213.                         <td align="center">
  214.                             City3
  215.                         </td>
  216.                         <td align="center">
  217.                             Client3
  218.                         </td>
  219.                         <td align="center">
  220.                             Date3
  221.                         </td>
  222.                     </tr>
  223.                     <tr>
  224.                         <td align="center">
  225.                             Job4
  226.                         </td>
  227.                         <td align="center">
  228.                             Project4
  229.                         </td>
  230.                         <td align="center">
  231.                             City4
  232.                         </td>
  233.                         <td align="center">
  234.                             Client4
  235.                         </td>
  236.                         <td align="center">
  237.                             Date4
  238.                         </td>
  239.                     </tr>
  240.                     <tr>
  241.                         <td align="center">
  242.                             Job5
  243.                         </td>
  244.                         <td align="center">
  245.                             Project5
  246.                         </td>
  247.                         <td align="center">
  248.                             City5
  249.                         </td>
  250.                         <td align="center">
  251.                             Client5
  252.                         </td>
  253.                         <td align="center">
  254.                             Date5
  255.                         </td>
  256.                     </tr>
  257.                     <tr>
  258.                         <td align="center">
  259.                             Job6
  260.                         </td>
  261.                         <td align="center">
  262.                             Project6
  263.                         </td>
  264.                         <td align="center">
  265.                             City6
  266.                         </td>
  267.                         <td align="center">
  268.                             Client6
  269.                         </td>
  270.                         <td align="center">
  271.                             Date6
  272.                         </td>
  273.                     </tr>
  274.                     <tr>
  275.                         <td align="center">
  276.                             Job7
  277.                         </td>
  278.                         <td align="center">
  279.                             Project7
  280.                         </td>
  281.                         <td align="center">
  282.                             City7
  283.                         </td>
  284.                         <td align="center">
  285.                             Client7
  286.                         </td>
  287.                         <td align="center">
  288.                             Date7
  289.                         </td>
  290.                     </tr>
  291.                 </tbody>
  292.             </table>
  293.         </div>
  294.     </div>
  295. </body>
  296. </html>
Jun 4 '09 #14
drhowarddrfine
7,435 Recognized Expert Expert
@Claus Mygind
No. z-index works with any positioned element, not just absolute.
Jun 5 '09 #15
Claus Mygind
571 Contributor
@Frinavale
At this point we are simply talking about style.

Not all employees have frequent jobs. I simply wanted to show to those that do, that they could look them up.

I also just wanted to make it easy for them to only have to mouse over the condensed section to expand it, thereby only requiring one click on the job# link to back fill the detail line on their time sheet.

I did not want to move the content of the other sections of the screen around and the area for the single line of the collapsible section was able to fit in there.

I realize I could do this with a button or some other object on the screen (So part of this little exercise was also personal development - expanding my knowledge).
Jun 8 '09 #16

Sign in to post your reply or Sign up for a free account.

Similar topics
7
7964
Read page info from WebBrowser control?
by: Noozer | last post by:
I am able to place values on forms that load into my webbrowser control, but I'd like to be able to scan the page for data. I know to use the HTMLDocument object. Basically I'm hoping to find an...
Visual Basic 4 / 5 / 6
69
13329
How to define a HTML page not allow scroll bars and resize?
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
Javascript
4
2260
Scroll page when reach location
by: Link | last post by:
how do i scroll page when i get to a location ... something like : <body onLoad="sl()"> <script languge="javascript"> function sl(){ if (document.stopper.y>50) { window.scroll(0,100); }...
Javascript
0
7124
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
7163
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
7200
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
1
6884
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
7375
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
5460
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
4586
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
C# / C Sharp
0
3078
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
1
651
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us