Moving an Element Between Top and Bottom Absolute

Graeme Hackston · 06-22-2002, 02:26 PM

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';
}
}

Graeme Hackston · 06-23-2002, 01:45 AM

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>

Graeme Hackston · 06-23-2002, 03:11 PM

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>

Graeme Hackston · 06-24-2002, 02:01 AM

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?

Graeme Hackston · 06-24-2002, 11:52 AM

bump

Roelf · 06-24-2002, 12:15 PM

Graeme Hackston · 06-24-2002, 11:02 PM

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

TrueLies · 06-25-2002, 12:44 AM

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.

Graeme Hackston · 06-25-2002, 01:07 AM

Quote:

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?

Graeme Hackston · 06-25-2002, 01:28 AM

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?