Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; 06-23-2002 at 03:51 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-24-2002 at 01:31 AM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-23-2002 at 03:55 PM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    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

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    AND NN6.2.1 on Win98. Thank you Roelf. A much better method than the messy duplicate div I was about use.

  • #8
    New Coder
    Join Date
    Jun 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-25-2002 at 01:37 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •