Set a DIV to be a footer: lowest coordinates in a page

[pamelafluente]

Hi ,

I have a DIV element in a page with a lot of other stuff (the page can
scroll several times) absolutely positioned:

<div id="MyDIV" > <br> <br> Footer </div>

Just after the page load, I would like to find the lowest element in
the page and
set the "TOP" property of the DIV some 50 pixels below of such lowest
element .

Can anyone help me with this task.

-PAm

 

[Benjamin]

I would try something like:
function positionFooter() {
var lastElem = document.getElementById("lastElem");
var footer = document.getElementById("footerDIV");
//Now the fun stuff
var offsetX = 0;
var offsetY = 0;
var elem = lastElem;
while (elem.offsetParent) {
offsetX += lastElem.offsetLeft;
offsetY += lastElem.offsetTop;
elem = elem.offsetParent;
}
//position stuff
footer.style.position = "absolute";
footer.style.left = offsetX;
footer.style.top = offsetY + lastElem.offsetHeight;
}

 

[pamelafluente]

Thank you Benjamin!!

I have some problem to get it to work.
I tell you what I have done:

put

<script language="javascript">

function positionFooter() {
var lastElem = document.getElementById("lastElem");
var footer = document.getElementById("footerDIV");
//Now the fun stuff
var offsetX = 0;
var offsetY = 0;
var elem = lastElem;
while (elem.offsetParent) {
offsetX += lastElem.offsetLeft;
offsetY += lastElem.offsetTop;
elem = elem.offsetParent;
}
//position stuff
footer.style.position = "absolute";
footer.style.left = offsetX;
footer.style.top = offsetY + lastElem.offsetHeight;

</script>

in the header (right or should be in the body?)

Then, I placed a div in the bottom:

<DIV ID="footerDIV">Hello From Footer </DIV>

To try the script, I tried creating another div:

<div ID="lastElem" style="top:5000px"></div>

Nothing happened. Anyway, apart that, the basic problem is I do not
know what is the last
element and it does not have an ID. This is a document generated
automatically.
I meant to find the lowest element programmatically.

Sorry to bother, I am trying to learn some javascript. But I find it
very hard. I would need some kind of debugger with intellisense to
understand what is going on.

-Pam





Benjamin ha scritto:

 

[ozfred]

Thank you Benjamin!!

Please don't top-post here, reply below a trimmed quote of whatever you
are replying to.

I have some problem to get it to work.
I tell you what I have done:

put

<script language="javascript">

function positionFooter() {
var lastElem = document.getElementById("lastElem");
var footer = document.getElementById("footerDIV");
//Now the fun stuff
var offsetX = 0;
var offsetY = 0;
var elem = lastElem;
while (elem.offsetParent) {
offsetX += lastElem.offsetLeft;
offsetY += lastElem.offsetTop;
elem = elem.offsetParent;
}
//position stuff
footer.style.position = "absolute";
footer.style.left = offsetX;
footer.style.top = offsetY + lastElem.offsetHeight;

You are missing a closing brace.

</script>

in the header (right or should be in the body?)

Then, I placed a div in the bottom:

<DIV ID="footerDIV">Hello From Footer </DIV>

To try the script, I tried creating another div:

<div ID="lastElem" style="top:5000px"></div>

Nothing happened.

When did you call positionFooter()? It's not in you posted code.


Anyway, apart that, the basic problem is I do not

know what is the last
element and it does not have an ID. This is a document generated
automatically.
I meant to find the lowest element programmatically.

Client-side scripting is unreliable, any browser with JavaScript
disabled will not position your footer at all. You will be much better
off to seek a server-side solution.

Sorry to bother, I am trying to learn some javascript. But I find it
very hard. I would need some kind of debugger with intellisense to
understand what is going on.

Intellisense? I can't see how that would help. Maybe a search of the
archives would be better. I managed to find this link in about 30
seconds, it may be suitable or not...

<URL:
http://groups.google.com/group/micr...west+element+in+page&rnum=16#5b414b5e5a416ebf
There are reasonably frequent resquests to 'find the height of a page'
or similar, do a search.

[...]

 

[pamelafluente]

Hi Benjamin,

Thanks Again.

Yes, late night, I was missing the most obvious: to call it.
Anyway I need this simple change:

I do not know javascript syntax, use a kind of invented pseudocode:

if Page.PageElements is empty orelse _
Page.PageElements containsOnly(MyFooterDiv) then
exit sub 'leave as is
end if

dim LowestElement as PageElement
dim LowestPos as integer = 0

for each PageElement in Page.PageElements

if PageElement.Y > LowestPos then
LowestPos = PageElement.Y
PageElement = PageElement
end if

next PageElement

MyFooterDiv.Y = LowestElement.Y

what would the JS be?

Pam



Benjamin ha scritto:

 

[pamelafluente]

Client-side scripting is unreliable, any browser with JavaScript

disabled will not position your footer at all. You will be much better
off to seek a server-side solution.

Do not agree entirely. Server side solution are built on top
of script technology, so it is easier that a simple script will work.
If you restrict yourself to Microsoft technology, that can be true,
but you might lose some half planet.

The fundamental mechanism (postback) of ASP pages
is based on a javascript script.

For instance: http://www.xefteri.com/articles/show.cfm?id=18

Pam

 

[Laurent Bugnion]

Hi,

Do not agree entirely. Server side solution are built on top
of script technology, so it is easier that a simple script will work.

That's not correct. Server-side technology works (if implemented
consistently) even if client-side script is disabled.

If you restrict yourself to Microsoft technology, that can be true,
but you might lose some half planet.

If you mean client-side, that's more like 15%, with a few local
exception (Germany). If you mean server-side, the technology the server
runs on doesn't/shouldn't affect the user.

The fundamental mechanism (postback) of ASP pages
is based on a javascript script.

But if client-side script is not enabled, you can still post pages back.
The user just loses some comfort (i.e. has to press a submit button
instead of having autopostback for elements like SELECT, etc.

For instance: http://www.xefteri.com/articles/show.cfm?id=18

Developers should never rely on cient-side script for functionality.
Client-side script should only be used for the user's convenience. For
example, to avoid roundtrips for validation, or in that case, to allow
easier, more automatic postbacks. That doesn't mean that you should
avoid implementing a foolproof solution anyway.

HTH,
Laurent

 

[Laurent Bugnion]

Sorry, forgot to add that

The fundamental mechanism (postback) of ASP pages
is based on a javascript script.

You mean ASP.NET. ASP is a very different kind of animal.

HTH,
Laurent

 

[ozfred]

Do not agree entirely. Server side solution are built on top
of script technology, so it is easier that a simple script will work.

The issue isn't the script (or program or whatever), but where it's
implemented. Presumably you have full control over the server so you
can pretty much guarantee that your script will run as required
(assuming appropriate testing, etc.). You have zero control over the
client and can't even reliably test whether scripting is supported at
all, much less the extent to which required functionality is supported.

All you can do is hope your script runs, test features as you go and
provide fallback for whatever isn't supported - at least to the extent
that the page is still functional if not quite so pretty. If you do the
work on the server and send your 'footer' appropriately positioned in
the source HTML, you can be much more confident that will happen.

If you restrict yourself to Microsoft technology, that can be true,
but you might lose some half planet.

At no time have I mentioned any particular technology other than
JavaScript (this is a JavaScript group after all). If you have an
issue with Microsoft technologies, take that up in a Microsoft forum -
I don't think it's relevant here.

The fundamental mechanism (postback) of ASP pages
is based on a javascript script.

For instance: http://www.xefteri.com/articles/show.cfm?id=18

That example shows using an A element to submit a form using script and
javascript pseudo-protocol in the href attribute - a nonsensical idea,
particularly in IE. It just goes to show how awful Microsoft's
documentation can be.

I don't think it has any relevance to the problem you've posted.

 

[pamelafluente]

That's not correct. Server-side technology works (if implemented

consistently) even if client-side script is disabled.

That may be true. In the specific I will use this script within an
ASP.NET
solution. The postback technology has simplified a lot server side
programming. ASP id dead. I could do everything with Get/Post... but
why make life harder?

If you mean client-side, that's more like 15%, with a few local
exception (Germany). If you mean server-side, the technology the server
runs on doesn't/shouldn't affect the user.

Don't know the statistic, but we in Italy I see only Microsoft.

Developers should never rely on cient-side script for functionality.
Client-side script should only be used for the user's convenience. For
example, to avoid roundtrips for validation, or in that case, to allow
easier, more automatic postbacks. That doesn't mean that you should
avoid implementing a foolproof solution anyway.

A programmer cannot take burden of everying else can happen in the
world. One gives
the specifications. The user/enterprise is free to use or not the
program.
People with scripts disabled do not go much far anyway.

-Pam

 

[pamelafluente]

All you can do is hope your script runs, test features as you go and

provide fallback for whatever isn't supported - at least to the extent
that the page is still functional if not quite so pretty. If you do the
work on the server and send your 'footer' appropriately positioned in
the source HTML, you can be much more confident that will happen.

I do not have to hope. That is a part of the program specification.
If the user want to use it, that is required. Otherwise she is free not
to use
it.

At no time have I mentioned any particular technology other than
JavaScript (this is a JavaScript group after all). If you have an
issue with Microsoft technologies, take that up in a Microsoft forum -
I don't think it's relevant here.

Microsoft technology is the only one I used so far. No issue with that.
My meaning was different.

That example shows using an A element to submit a form using script and
javascript pseudo-protocol in the href attribute - a nonsensical idea,
particularly in IE. It just goes to show how awful Microsoft's
documentation can be.

That is a basic explanation of the inner working of ASP.NET. That
nonsensical idea is making billions

-Pam

 

[pamelafluente]

Let's go back to technology.

Anyone is able to provide the JS translation of the following
(invented and just revised) pseudocode ?

\\

if Page.PageElements is empty orelse _
Page.PageElements containsOnly(MyFooterDiv) then
exit sub 'leave as is
end if

dim LowestElement as PageElement
dim LowestPos as integer = 0
dim SomeShift as integer = 50

for each PageElement in Page.PageElements

if PageElement IsNot MyFooterDiv then

if PageElement.Y > LowestPos then
LowestPos = PageElement.Y
LowestElement = PageElement
end if

end if

next PageElement

MyFooterDiv.Y = LowestElement.Y + SomeShift

//

-Pam

 

[Oz Fred]

Let's go back to technology.

Anyone is able to provide the JS translation of the following
(invented and just revised) pseudocode ?

Your 'find the lowest element' logic is flawed - you want the lowest
bottom, not the lowest top.

I think you're really after the height of the body element, so get it
and set your 'footer' below that. How will you handle the user changing
the size of the text which will probably make the page overlap your footer?

<URL: http://www.quirksmode.org/viewport/compatibility.html >

 

[Laurent Bugnion]

Hi,

That may be true. In the specific I will use this script within an
ASP.NET
solution. The postback technology has simplified a lot server side
programming. ASP id dead. I could do everything with Get/Post... but
why make life harder?

That is correct. My comment was aimed at the "built on top of script
technology" comment. That could be misleading for newbies. ASP.NET uses
JavaScript to improve the user's experience, but also works without
script (I am speakng generally here).

Don't know the statistic, but we in Italy I see only Microsoft.

So that would be 100%. My point is: If you restrict yourself with
Microsoft tech (meaning: if you use only MS technology), then you're not
losing half the planet.

Also, ASP.NET allows browser independancy in a much, much better way
than any time before. So really, it's easy not to program for one single
browser.

A programmer cannot take burden of everying else can happen in the
world. One gives
the specifications. The user/enterprise is free to use or not the
program.
People with scripts disabled do not go much far anyway.

-Pam

I'd love to live in your world, the one where you can afford to lose
customers ;-)

That said, there are issues that you are not allowed to ignore. For
example form validation should never rely only on client-side scripts.

Laurent

 

[pamelafluente]

Your 'find the lowest element' logic is flawed - you want the lowest

bottom, not the lowest top.

Hi Fred, Thanks for the input

I think everyone undestood here, although my English is probably a
disaster. I am looking for the one which is most down, say towards the
floor, not the sky!

Which part of the pseudocode is flawed ? I use to measure Y screen
coordinates going from top towards down. That's the standard. Don't
know if you are referring to that or something else...

I think you're really after the height of the body element, so get it
and set your 'footer' below that. How will you handle the user changing
the size of the text which will probably make the page overlap your footer?

I do not know how to precisely translate that in Javascript. That why I
am asking you experts!

I have a pile of DIVs in a long column. They are all * absolutely
positioned * and do not have an ID. I want to add another DIV at the
end of the column (bottom).
The script must position this last DIV. That's all.


-Pam

 

[Benjamin]

I'm sorry I'm not exactly sure what you want. What does "dim" or "sub"
mean? Could you put it in more of a paragraph form? Thanks!

 

[web.dev]

I'm sorry I'm not exactly sure what you want. What does "dim" or "sub"
mean? Could you put it in more of a paragraph form? Thanks!

If you could not tell, he's using vbscript. Where "dim" is equivalent
to "var" and "sub" is similar to "function".

 

[pamelafluente]

If you could not tell, he's using vbscript. Where "dim" is equivalent

to "var" and "sub" is similar to "function".

correct

Benjamin,

I will say in word:

if Page.PageElements is empty orelse _
Page.PageElements containsOnly(MyFooterDiv) then
exit sub 'leave as is
end if

If page contains nothing or only the footer DIV
there is nothing to do. Exit the void function.

dim LowestElement as PageElement
dim LowestPos as integer = 0
dim SomeShift as integer = 50

define 3 variables. The first variable is for iteration
in the collection of page elements. The second
to store the bottom position. And the third
to store the element which featured such
position.

for each PageElement in Page.PageElements
if PageElement IsNot MyFooterDiv then
if PageElement.Y > LowestPos then
LowestPos = PageElement.Y
LowestElement = PageElement
end if
end if
next PageElement

Iterate on all the elements different fron the footer DIV
to find out which is has lowest position

MyFooterDiv.Y = LowestElement.Y + SomeShift

Once you find it assign the footer position as the position
of the lowest element plus some vertical offset

//

Thanks

-P

 

[ozfred]

Fred said:

I do not know how to precisely translate that in Javascript. That why I
am asking you experts!

That's why I've posted links for you to use to write some code.

I have a pile of DIVs in a long column. They are all * absolutely
positioned * and do not have an ID. I want to add another DIV at the
end of the column (bottom).
The script must position this last DIV. That's all.

Follow the link I povided in my previous post. quirksmode has lots of
information about JavaScript with working examples, it's one of the
best sites you can use to learn about JavaScript.

 

[Benjamin]

function afunc() {
var search = document.body.getElementsByTagName("*");
if (search.length <= 1) {
return;
}
var i = 0;
var bottomPos = 0;
var bottomElem = 0;
var offsetY = 0;
offsetObj;
for (i = 0; i < search.length; i++) {
if (search.id = "myFooter") {
continue;
}
offsetObj = search;
while (offsetObj) {
offsetY += (offsetObj.offsetTop +
offsetObj.offsetHeight);
offsetObj = offsetObj.offsetParent
}
bottomPos = (offsetX > bottomPos) ? offsetX : bottomPos;
}
var myFooter = document.getElementById("myFooter");
myFooter.style.position = "absolute";
var your Padding = 50;
myFooter.style.top = bottomPos + yourPadding + "px";
}
trigger this function like this: <body onload="afunc()">