Web Analytics Made Easy - StatCounter Moving an Element Between Top and Bottom Absolute - CodingForum

Announcement

Collapse
No announcement yet.

Moving an Element Between Top and Bottom Absolute

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Moving an Element Between Top and Bottom Absolute

    If I call the function "Top" before "Bottom", "Bottom" doesn't work (when applied to the same div). The div is placed absolute bottom on page load. "Bottom" is supposed to return the div to its original position.

    function getElement(id) {
    if (typeof document.all != 'undefined') return document.all(id);
    if (typeof document.getElementById != 'undefined') return document.getElementById(id);
    if (typeof document.layers != 'undefined') return document.layers[id];
    return null;
    }

    function Top() {
    for (var a=0; a<arguments.length; ++a) {
    var el = getElement(arguments[a]);
    if (!el) return;
    if (typeof el.style != 'undefined') el.style.top = '364px';
    else if (typeof el.top != 'undefined') el.top = '364px';
    }
    }

    function Bottom() {
    for (var a=0; a<arguments.length; ++a) {
    var el = getElement(arguments[a]);
    if (!el) return;
    if (typeof el.style != 'undefined') el.style.bottom = '10px';
    else if (typeof el.bottom != 'undefined') el.bottom = '10px';
    }
    }
    Last edited by Graeme Hackston; Jun 23, 2002, 10:51 AM.
    Tags: None
  • #2
    Here is an example of this in action.

    The "Bottom" function works until the position is changed by the "Top" function.

    <edit>
    Please note: there is a space in the links between "java" and "script:void(0)" that I can't seem to remove by editing (the space isn't there when editing). If you test this please remove the 2 spaces.
    </edit>

    <html>
    <head>
    <title>Test</title>
    <script>
    function getElement(id) {
    if (typeof document.all != 'undefined') return document.all(id);
    if (typeof document.getElementById != 'undefined') return document.getElementById(id);
    if (typeof document.layers != 'undefined') return document.layers[id];
    return null;
    }

    function Top() {
    for (var a=0; a<arguments.length; ++a) {
    var el = getElement(arguments[a]);
    if (!el) return;
    if (typeof el.style != 'undefined') el.style.top = '50px';
    else if (typeof el.top != 'undefined') el.top = '50px';
    }
    }

    function Bottom() {
    for (var a=0; a<arguments.length; ++a) {
    var el = getElement(arguments[a]);
    if (!el) return;
    if (typeof el.style != 'undefined') el.style.bottom = '10px';
    else if (typeof el.bottom != 'undefined') el.bottom = '10px';
    }
    }
    </script>
    <style>
    #Test
    {position: absolute; bottom: 100px;}
    </style>
    </head>
    <body>
    <div id="Test">
    content content content content<br>
    content content content content<br>
    content content content content
    </div>
    <a href="javascript:void(0);" onmousedown="Top('Test');">Move To Top</a><br>
    <a href="javascript:void(0);" onmousedown="Bottom('Test');">Move To Bottom</a>
    </body>
    </html>
    Last edited by Graeme Hackston; Jun 23, 2002, 08:31 PM.

    Comment

    • #3
      Here is another example with the same problem in IE6 (this example doesn't work at all in NN6.2) It also doesn't work after the div is moved to the top by the function "Top".

      <html>
      <head>
      <title>Test</title>
      <script>
      function Top() {
      Test.style.position="absolute";
      Test.style.top="50px";
      }

      function Bottom() {
      Test.style.position="absolute";
      Test.style.bottom="10px";
      }
      </script>
      <style>
      #Test
      {position: absolute; bottom: 100px;}
      </style>
      </head>
      <body>
      <div id="Test">
      content content content content<br>
      content content content content<br>
      content content content content
      </div>
      <a href="javascript:void(0);" onmousedown="Top();">Move To Top</a><br>
      <a href="javascript:void(0);" onmousedown="Bottom();">Move To Bottom</a>
      </body>
      </html>
      Last edited by Graeme Hackston; Jun 23, 2002, 10:55 AM.

      Comment

      • #4
        Is there a way I can declare the top position false after it is moved? So the div can return to reading its position from the style sheet?

        Comment

        • #5
          bump

          Comment

          • #6
            function Bottom() {
            for (var a=0; a<arguments.length; a++) {
            var el = getElement(arguments[a]);
            if (!el) return;
            if (typeof (el.style) != 'undefined'){
            el.style.top = "";
            el.style.bottom = '10px';
            } else {
            if (typeof el.bottom != 'undefined') el.bottom = '10px';
            }
            }
            }

            this bottom function works in ie 5.5
            I am the luckiest man in the world

            Comment

            • #7
              AND NN6.2.1 on Win98. Thank you Roelf. A much better method than the messy duplicate div I was about use.

              Comment

              • #8
                Hi

                I wasn't aware a "bottom" property would exist in positioning an aboslute positioned element: if it exists, it must be a propetary implementation of some browser, but I am not aware of any W3C active reccomandation on such a "bottom property, this is probably why it doesn't work on NN6 (aside from the string data type when assigning the positions).

                Why you're resorting to this "bottom" property? can't you just store two different positions in, so to say, an array and then assign one entry of it to the top, or the sum/2?

                I'm curious, I never heard of a bottom property.
                Alberto http://www.unitedscripters.com/

                Comment

                • #9
                  Originally posted by TrueLies
                  can't you just store two different positions in, so to say, an array and then assign one entry of it to the top, or the sum/2?
                  Hi TrueLies, sorry I don't understand arrays as yet.

                  I'm building a left navigation image site (I'm a photographer) and am using javascript to size the images to try and battle the usual image site problems. So (I think) I don't need scrollbars.

                  I have the text page links (services, contact etc.) at the bottom of the left navigation table (a table layout because I can't vertically center the images with CSS-P).

                  Does that make any sense?

                  Comment

                  • #10
                    I should be more clear.

                    I don't have scrollbars disabled and they do become required in low resolutions. It's also when I require the position of the div to be changed to top.

                    As for the bottom property, all I know is it works in IE (I don't know how far back), Opera 6 and NN6.2.1 (I'm not ready to risk installing Mozilla on my win OS yet).

                    I wasn't aware W3C doesn't support the property. Why would they not?
                    Last edited by Graeme Hackston; Jun 24, 2002, 08:37 PM.

                    Comment

                    Previous template Next
                    Working...
                    X