Querying DOM object properties (or "Sticky footer with Flapjax")

[Artyom Shalkhakov]

Hello,

Is it possible to get DOM object properites like top/left/width/height?

Something along the lines of extractValueB, but for styling properties
for example?

Here's an example where it would ease development. Say we have a
webpage, comprised of a heading, a variable-height body and a footer.
We would like to stick footer to either
- the bottom of the screen if the height of the page is less than screen height
- or otherwise leave it as-is

It's not possible to cleanly achieve this using CSS (actually, my
layout disastrously breaks up when I do rather innocent-looking
modifications for [1]), so I decided to patch this up using JS. A
simple implementation like this [2]

> // invoke on viewport resize
> function setFooter() {
> var ch = document.getElementById("main").offsetHeight;
> var wh = getWindowHeight();
> var f = document.getElementById("footer");
> var d = document.getElementById("design");
> if (ch < wh) {
> f.style.top = (wh -ch) - f.style.height +"px";
> d.style.top = (wh -ch) - d.style.height +"px";
> } else {
> f.style.top = 0+"px";
> d.style.top = 0+"px";
> }
> }

will introduce errors if body height is variable. Imagine having to
call this function every time you change body height somewhere.
Moreover, you'd have to make such calls in the right seqence and make
sure they do not collide. Honestly, that's an unnecessary pain to
maintain, extend and test!

Cheers,
Artyom Shalkhakov.

[1] http://www.cssstickyfooter.com/
[2] http://www.candsdesign.co.uk/articles/dhtml/layout/floating-or-sticky-footer/

[Arjun Guha]

We don't have anything built-in, you'd have to write it. You'd
probably have to use the "DOMAttrModified" event, which is "standard"
but unsupported on most browsers.

I'd posted this a few weeks ago, I think in response to something
you'd asked. You could start here:

> // posB :: Element -> Behavior { left, top, width, height: String }
> function posB(t_) {
> var t = $(t_); // adds Prototype methods
> var f = function() {
> var pos = t.cumulativeOffset();
> var size = t.getDimensions();
> return { left : pos.left, top: pos.top,
> height: size.height, width: size.width }};
> return $E(t, "DOMAttrModified")
> .filterE(function(x) { return x.attrName == "style"; })
> .mapE(f)
> .startsWith(f());
> }

You can parameterize it to take a sequence of arguments e.g.g "style",
"height".

Arjun

[Leo Meyerovich]

[Artyom Shalkhakov]

Thanks for the tip, Arjun. I'm feeling kinda dumb now.

Cheers,
Artyom Shalkhakov.

2009/8/31 Arjun Guha <arjun...@gmail.com>:

[Shriram Krishnamurthi]

> Thanks for the tip, Arjun. I'm feeling kinda dumb now.

I don't think this was entirely obvious, so no need to.

We'll let you know when you should. <-;

S.