How do I make a page scroll to the top

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571
    #1

    How do I make a page scroll to the top

    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:

    Code:
    function popDown25()
{
	document.getElementById("freqJobDiv").style.zIndex=0;
	document.getElementById("freqJobDiv").style.width =  "15%";
	document.getElementById("freqJobDiv").style.height = "50px";
}
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      I assume you mean the page within the div. Use the scrollTop property.

        Comment

        • Claus Mygind
          Contributor
          • Mar 2008
          • 571
          #3
          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?

            Comment

            • Frinavale
              Recognized Expert Expert
              • Oct 2006
              • 9749
              #4
              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:

              Code:
              <html>
<head>
<title></title>

    <script type="text/javascript">
        function ExpandDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                collapsibleSection.style.display = "block";
            }

        }
        function CollapseDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                collapsibleSection.style.display = "none";
            }
        }
    </script>

</head>
<body>
    This is some content in the page.
    <br />
    When you click the link it will cause the page to become larger to the point where
    the user needs to scroll in order to see the linke that collapses the content:<br />
    <a id="hover over me" href="JavaScript:ExpandDiv();">Expand linky</a>
    <br />
    <div id="collapsibleSection" style="display: none; width:50%; border:solid 1px black;">
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        <a id="hoveroverme" href="JavaScript:CollapseDiv();">Collapse linky</a>
    </div>
</body>
</html>
              [/edit]
              Last edited by Frinavale; May 29 '09, 06:56 PM. Reason: tested theory

                Comment

                • Claus Mygind
                  Contributor
                  • Mar 2008
                  • 571
                  #5
                  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.

                    Comment

                    • Frinavale
                      Recognized Expert Expert
                      • Oct 2006
                      • 9749
                      #6
                      I posted example code by editing...

                        Comment

                        • Frinavale
                          Recognized Expert Expert
                          • Oct 2006
                          • 9749
                          #7
                          Ahh I see...

                          You need to set the height and overflow styles of the div to achieve this... something like:
                          Code:
                          <html>
<head>
<title></title>

    <script type="text/javascript">
        function ExpandDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                collapsibleSection.style.height = "auto";
                collapsibleSection.style.overflow = "visible";
            }

        }
        function CollapseDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                collapsibleSection.style.height = "12px";
                collapsibleSection.style.overflow = "hidden";
            }
        }
    </script>

</head>
<body>
    This is some content in the page.
    <br />
    When you click the link it will cause the page to become larger to the point where
    the user needs to scroll in order to see the linke that collapses the content:<br />
    <a id="hover over me" href="JavaScript:ExpandDiv();">Expand linky</a>
    <br />
    <div id="collapsibleSection" style="height:14px; font-size:11px; width:50%; border:solid 1px black; overflow:hidden;">
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        <a id="hoveroverme" href="JavaScript:CollapseDiv();">Collapse linky</a>
    </div>
</body>
</html>

                            Comment

                            • Claus Mygind
                              Contributor
                              • Mar 2008
                              • 571
                              #8
                              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

                                Comment

                                • Frinavale
                                  Recognized Expert Expert
                                  • Oct 2006
                                  • 9749
                                  #9
                                  Originally posted by Claus Mygind
                                  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
                                  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:
                                  Code:
                                  <html>
<head>
<title></title>
 
    <script type="text/javascript">
        function ExpandDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                
                collapsibleSection.style.height = "75%";
                collapsibleSection.style.overflow = "auto";
            }

        }
        function CollapseDiv() {
            var collapsibleSection = document.getElementById("collapsibleSection");
            if (collapsibleSection) {
                collapsibleSection.scrollTop=0;
                collapsibleSection.style.height = "12px";
                collapsibleSection.style.overflow = "hidden";
            }
        }
    </script>
 
</head>
<body>
    This is some content in the page.
    <br />
    When you hover over the content in the box it will expand it to 75% of the screen.<br />
    You can scroll this content and view it to your heart's content. <br />
    When you no longer want to view content simply move the mouse cursor out of the box.<br />
    This will is collapsed the box to it's original size and redisplay the first line (which is displayed as *poppy* red text).
    <br />
    <div id="collapsibleSection" style="height:14px; font-size:11px; width:50%; border:solid 1px black; overflow:hidden;" onmouseover="ExpandDiv()" onmouseout="CollapseDiv()">
        <span id="firstLine" style="color:#C00000;"> Flanders Fields the poppies blow</span><br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />
        In Flanders Fields the poppies blow<br />
        Between the crosses row on row,<br />
        That mark our place; and in the sky<br />
        The larks, still bravely singing, fly<br />
        Scarce heard amid the guns below.<br />
        <br />
        <br />
        We are the Dead. Short days ago<br />
        We lived, felt dawn, saw sunset glow,<br />
        Loved and were loved, and now we lie<br />
        In Flanders fields.<br />
        <br />
        <br />
        Take up our quarrel with the foe:<br />
        To you from failing hands we throw<br />
        The torch; be yours to hold it high.<br />
        If ye break faith with us who die<br />
        We shall not sleep, though poppies grow<br />
        In Flanders fields.
        <br />
        <br />
        -John McCrae, MD (1872-1918)<br />
        <hr />
        <br />       
    </div>
    <br />
    This is some more page content that comes after the collapsible division section.
</body>
</html>

                                    Comment

                                    • Claus Mygind
                                      Contributor
                                      • Mar 2008
                                      • 571
                                      #10
                                      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.

                                      Code:
                                      function popUp25()
{
	document.getElementById("freqJobDiv").style.zIndex = 20;
	document.getElementById("freqJobDiv").style.width =  "70%";
//	document.getElementById("freqJobDiv").style.height = "auto";
	document.getElementById("freqJobDiv").style.height = "75%";
	document.getElementById("freqJobDiv").style.overflow = "auto";
//	document.getElementById("freqJobDiv").style.overflow = "visible";
}

function popDown25()
{
	document.getElementById("freqJobDiv").style.zIndex=0;
	document.getElementById("freqJobDiv").style.width =  "15%";
	document.getElementById("freqJobDiv").scrollTop=0;
	document.getElementById("freqJobDiv").style.height = "50px";
	document.getElementById("freqJobDiv").style.overflow = "hidden";
}
                                      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:

                                      Code:
                                      function popUp25()
{
	document.getElementById("freqJobDiv").style.zIndex = 20;
	document.getElementById("freqJobDiv").style.width =  "70%";
	document.getElementById("freqJobDiv").style.height = "auto";
//	document.getElementById("freqJobDiv").style.height = "75%";
	document.getElementById("freqJobDiv").style.overflow = "auto";
	document.getElementById("freqJobDiv").style.overflow = "visible";
}

function popDown25()
{
	document.getElementById("freqJobDiv").style.zIndex=0;
	document.getElementById("freqJobDiv").style.width =  "15%";
	document.getElementById("freqJobDiv").scrollTop=0;
	document.getElementById("freqJobDiv").style.height = "50px";
	document.getElementById("freqJobDiv").style.overflow = "hidden";
}
                                      Thanks again for your assistance it was of great help.

                                        Comment

                                        • Claus Mygind
                                          Contributor
                                          • Mar 2008
                                          • 571
                                          #11
                                          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.


                                          Code:
                                          	document.getElementById("freqJobDiv").style.zIndex = 20;
	document.getElementById("freqJobDiv").style.width =  "70%";
	document.getElementById("freqJobDiv").style.height = "auto";
//	document.getElementById("freqJobDiv").style.height = "75%";
	document.getElementById("freqJobDiv").style.overflow = "auto";
//	document.getElementById("freqJobDiv").style.overflow = "visible";

                                            Comment

                                            • Frinavale
                                              Recognized Expert Expert
                                              • Oct 2006
                                              • 9749
                                              #12
                                              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.
                                              Last edited by Frinavale; Jun 2 '09, 02:40 PM. Reason: Added info about further testing

                                                Comment

                                                • Claus Mygind
                                                  Contributor
                                                  • Mar 2008
                                                  • 571
                                                  #13
                                                  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:absolu te 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.

                                                  Code:
                                                     
<HTML>

 <HEAD>
  
	<style type="text/css">

		#timeHeader 
		{
			position: absolute;
			white-space: nowrap; 
			left: 0%; 
			top: 25px;
			width: 98%;
			color: #333333;
			background-color: #FFFF99;    		
			border-style: ridge;
			padding:3px;
			font-size: 10pt;
			overflow: hidden;
			z-index: 2;
		}
		#timeBody
		{
			position: absolute;
			white-space: nowrap; 
			left: 0%; 
			top: 130px;
			width: 99%;
			height: 75%;
			color: #333333;
			background-color: #9900CC;    		
			border-style: ridge;
			padding:3px;
			font-size: 10pt;
			overflow: scroll;
			tabindex:'-1';
			z-index: 2;
		}
		#freqJobDiv
		{
			position: absolute;
			white-space: nowrap; 
			left: 25%; 
			top: 109px;
			width: 15%;
			height: 50px;
			color: #333333;
			background-color: #33FFFF;    		
			border-style: ridge;
			padding:3px;
			font-size: 10pt;
			overflow: scroll;
			visibility: hidden;
			z-index: 0;
		}
	</style>

	<script language="JavaScript">
		function popUp25()
		{
			document.getElementById("freqJobDiv").style.zIndex = 20;
			document.getElementById("freqJobDiv").style.width =  "70%";
			document.getElementById("freqJobDiv").style.height = "auto";
			document.getElementById("freqJobDiv").style.overflow = "auto";
		}

		function popDown25()
		{
			document.getElementById("freqJobDiv").style.zIndex=0;
			document.getElementById("freqJobDiv").style.width =  "15%";
			document.getElementById("freqJobDiv").scrollTop=0;
			document.getElementById("freqJobDiv").style.height = "50px";
			document.getElementById("freqJobDiv").style.overflow = "hidden";
		}

		function load25()
		{
			if (a25Jobs.length > 1 || a25Jobs[0] != "" )
			{
				document.getElementById("freqJobDiv").style.visibility = 'visible'
				var tr, td;
				tbody = document.getElementById("fJobLines");
		
				// remove existing rows, if any
			    while (tbody.rows.length > 0) {
					tbody.deleteRow(0);
			    }
	
				tr = tbody.insertRow(tbody.rows.length);
				td = tr.insertCell(tr.cells.length);
				td.setAttribute("align", "center");
				td.innerHTML = 'Job';
				td = tr.insertCell(tr.cells.length);
			   td.setAttribute("align", "center");
				td.innerHTML = 'Project';
				td = tr.insertCell(tr.cells.length);
				td.setAttribute("align", "center");
				td.innerHTML = 'City';
				td = tr.insertCell(tr.cells.length);
			   td.setAttribute("align", "center");
				td.innerHTML = 'Client';
				td = tr.insertCell(tr.cells.length);
				td.setAttribute("align", "center");
				td.innerHTML = 'Date';

				var cCellCnt = 1
				var cData = ""
				for (var i = 0; i < a25Jobs.length; i++ )
				{
					switch ( cCellCnt  )
					{
						case 1:
							tr = tbody.insertRow(tbody.rows.length);
							break;
						case 5:
							cCellCnt = 0
							break;
					}
					td = tr.insertCell(tr.cells.length);
				    td.setAttribute("nowrap", "nowrap");
					if (cCellCnt == 1)
					{
						td.innerHTML = '<A HREF="#" id="'+a25Jobs[i]+'"onclick="loadThis25(this); return false;">'+a25Jobs[i]+'</A>';
					}else{
						td.innerHTML = a25Jobs[i];
					}
					cCellCnt += 1
				}
			}
		}

		function loadThis25(obj)
		{
			document.getElementById("JOBID_"+cLoc).value = obj.id;
			document.getElementById("JOBID_"+cLoc).focus();
			var cThis = document.getElementById("JOBID_"+cLoc)
			
			getPrjct(cThis); 

			popDown25();
		}
	</script>

 </HEAD>


 <body>

	<form method=POST >

		<div id="timeHeader">
		</div>

		<div id="timeBody">
		</div>

	</form>

	<div
		id="freqJobDiv"
		onmouseout="popDown25();"
		onmouseover="popUp25();"
	>
              <A name='25top'></A>My Last 50 Jobs
		<TABLE
			border="1"
			border="1"
			bgcolor="#CCCCFF"
		>
		<tbody
			id="fJobLines"
			valign="bottom"
		>
			<TR>
				<TD align="center">Job</TD>
				<TD align="center">Project</TD>
				<TD align="center">City</TD>
				<TD align="center">Client</TD>
				<TD align="center">Date</TD>
			</TR>
		</tbody>	
		</TABLE>	
	</div>
</body>

</HTML>

                                                    Comment

                                                    • Frinavale
                                                      Recognized Expert Expert
                                                      • Oct 2006
                                                      • 9749
                                                      #14
                                                      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:
                                                      Code:
                                                      <html>
<head>
    <style type="text/css">
        #timeHeader
        {
            position: absolute;
            white-space: nowrap;
            left: 0%;
            top: 25px;
            width: 98%;
            color: #333333;
            background-color: #FFFF99;
            border-style: ridge;
            padding: 3px;
            font-size: 10pt;
            overflow: hidden;
            z-index: 2;
        }
        #timeBody
        {
            position: absolute;
            white-space: nowrap;
            left: 0%;
            top: 130px; 
            /*width: 99%;
            height: 75%;*/
            color: #333333;
            background-color: #9900CC;
            border-style: ridge;
            padding: 3px;
            font-size: 10pt;
            overflow: scroll;
            tabindex: '-1';
            z-index: 2;
        }
        #freqJobDiv
        {
            position: absolute;
            white-space: nowrap;
            left: 25%;
            top: 109px;
            /*width: 15%;
            height: 50px;*/
            color: #333333;
            border: ridge 1px #33FFFF;
            padding: 3px;
            font-size: 10pt;
            /*overflow: scroll; 
            visibility: hidden;*/
            z-index: 0;
        }
    </style>

    <script type="text/javascript" language="JavaScript">
        function popUp25() {
            /*document.getElementById("freqJobDiv").style.zIndex = 20;
            document.getElementById("freqJobDiv").style.width = "70%";
            document.getElementById("freqJobDiv").style.height = "auto";
            document.getElementById("freqJobDiv").style.overflow = "auto";*/

            var collapsibleDiv = document.getElementById("jobCollapseContent");
            collapsibleDiv.style.height = "70px";
            collapsibleDiv.style.overflow = "auto";
            
        }

        function popDown25() {
            /*document.getElementById("freqJobDiv").style.zIndex = 0;
            document.getElementById("freqJobDiv").style.width = "15%";
            document.getElementById("freqJobDiv").scrollTop = 0;
            document.getElementById("freqJobDiv").style.height = "50px";
            document.getElementById("freqJobDiv").style.overflow = "hidden";*/
            
            var collapsibleDiv = document.getElementById("jobCollapseContent");
            collapsibleDiv.style.height = "0px";
            collapsibleDiv.style.overflow = "hidden";
        }

        function load25() {
            a25Jobs = ["JobA", "JobB", "JobC", "JobD", "JobE", "JobF", "JobG", "JobH", "JobI", "JobJ", "JobK", "JobL", "JobM", "JobN", "JobO", "JobP"]
            if (a25Jobs.length > 1 || a25Jobs[0] != "") {
                document.getElementById("freqJobDiv").style.visibility = 'visible'
                var tr, td;
                tbody = document.getElementById("fJobLines");

                // remove existing rows, if any
                while (tbody.rows.length > 0) {
                    tbody.deleteRow(0);
                }

                tr = tbody.insertRow(tbody.rows.length);
                td = tr.insertCell(tr.cells.length);
                td.setAttribute("align", "center");
                td.innerHTML = 'Job';
                td = tr.insertCell(tr.cells.length);
                td.setAttribute("align", "center");
                td.innerHTML = 'Project';
                td = tr.insertCell(tr.cells.length);
                td.setAttribute("align", "center");
                td.innerHTML = 'City';
                td = tr.insertCell(tr.cells.length);
                td.setAttribute("align", "center");
                td.innerHTML = 'Client';
                td = tr.insertCell(tr.cells.length);
                td.setAttribute("align", "center");
                td.innerHTML = 'Date';

                var cCellCnt = 1
                var cData = ""
                for (var i = 0; i < a25Jobs.length; i++) {
                    switch (cCellCnt) {
                        case 1:
                            tr = tbody.insertRow(tbody.rows.length);
                            break;
                        case 5:
                            cCellCnt = 0
                            break;
                    }
                    td = tr.insertCell(tr.cells.length);
                    td.setAttribute("nowrap", "nowrap");
                    if (cCellCnt == 1) {
                        td.innerHTML = '<A HREF="#" id="' + a25Jobs[i] + '"onclick="loadThis25(this); return false;">' + a25Jobs[i] + '</A>';
                    } else {
                        td.innerHTML = a25Jobs[i];
                    }
                    cCellCnt += 1
                }
            }
        }

        function loadThis25(obj) {
            document.getElementById("JOBID_" + cLoc).value = obj.id;
            document.getElementById("JOBID_" + cLoc).focus();
            var cThis = document.getElementById("JOBID_" + cLoc)

            getPrjct(cThis);

            popDown25();
        }
    </script>

</head>
<body>
    <form id="form1" action="POST">
    <div id="timeHeader">
    </div>
    <div id="timeBody">
    </div>
    </form>
    <div id="freqJobDiv" onmouseout="popDown25();" onmouseover="popUp25();">
        <a name='25top'>top</a>My Last 50 Jobs
        <div id="jobCollapseContent">
            <table border="1" bgcolor="#CCCCFF">
                <tbody id="fJobLines" valign="bottom">
                    <tr>
                        <td align="center">
                            Job
                        </td>
                        <td align="center">
                            Project
                        </td>
                        <td align="center">
                            City
                        </td>
                        <td align="center">
                            Client
                        </td>
                        <td align="center">
                            Date
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job1
                        </td>
                        <td align="center">
                            Project1
                        </td>
                        <td align="center">
                            City1
                        </td>
                        <td align="center">
                            Client1
                        </td>
                        <td align="center">
                            Date2
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job2
                        </td>
                        <td align="center">
                            Project2
                        </td>
                        <td align="center">
                            City2
                        </td>
                        <td align="center">
                            Client2
                        </td>
                        <td align="center">
                            Date2
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job3
                        </td>
                        <td align="center">
                            Project3
                        </td>
                        <td align="center">
                            City3
                        </td>
                        <td align="center">
                            Client3
                        </td>
                        <td align="center">
                            Date3
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job4
                        </td>
                        <td align="center">
                            Project4
                        </td>
                        <td align="center">
                            City4
                        </td>
                        <td align="center">
                            Client4
                        </td>
                        <td align="center">
                            Date4
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job5
                        </td>
                        <td align="center">
                            Project5
                        </td>
                        <td align="center">
                            City5
                        </td>
                        <td align="center">
                            Client5
                        </td>
                        <td align="center">
                            Date5
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job6
                        </td>
                        <td align="center">
                            Project6
                        </td>
                        <td align="center">
                            City6
                        </td>
                        <td align="center">
                            Client6
                        </td>
                        <td align="center">
                            Date6
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Job7
                        </td>
                        <td align="center">
                            Project7
                        </td>
                        <td align="center">
                            City7
                        </td>
                        <td align="center">
                            Client7
                        </td>
                        <td align="center">
                            Date7
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

                                                        Comment

                                                        • drhowarddrfine
                                                          Recognized Expert Expert
                                                          • Sep 2006
                                                          • 7434
                                                          #15
                                                          Originally posted by Claus Mygind
                                                          I am aware that only position:absolu te can be used with z-index.
                                                          No. z-index works with any positioned element, not just absolute.

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...