ansaurus

Question

Define position of an element relatively to browser window.

Answer 1

+1 A:

Can't be done AFAIK. The viewport of the current document is the only thing you can position things relatively to.

You can find out the screen's available space using the screen.availHeight property but that won't give you the space between the browser's top left corner and the document's top left corner (which is what you would need).

Pekka 2010-04-21 09:18:08

@Pekka, But there is such property, as size of scrolling of the screen.

Kalinin 2010-04-21 09:20:51

@Kalinin which property do you mean?

Pekka 2010-04-21 09:23:22

@Pekka, `body.scrollTop`

Kalinin 2010-04-21 09:26:54

@Kalinin aaah, now I understand what you mean! Use `position: fixed` for that, no need for JavaScript. Doesn't work in IE6.

Pekka 2010-04-21 10:06:36

Looks like we were both fooled by the definition of ‘define’...

bobince 2010-04-21 10:31:17

@bobince, Most likely yes.

Kalinin 2010-04-21 11:24:44

Answer 2

+1 A:

element position from browser window = (element position from document) - (amount document has scrolled)

Find an element's position relative to the document: http://www.quirksmode.org/js/findpos.html

Amount document has scrolled: http://www.quirksmode.org/dom/w3c_cssom.html#t35 (scrollLeft / scrollTop)

Jeffery To 2010-04-21 09:32:38

@Jeffery To, Yes!

Kalinin 2010-04-21 10:08:54

Just for the record: the quirksmode function doesn't work with fixed positioned elements.

KooiInc 2010-04-21 10:09:14

@KooiInc, ok i will remember it.

Kalinin 2010-04-21 10:10:48

Answer 3

+2 A:

I'm guessing you're talking about ‘fixed position’ elements, that stay in the same place on the window as you scroll it?

This can be done with plain CSS, and should be because it'll be smoother to let the browser do it than you can manage with JavaScript. You only need JS backup if you need the element to stay fixed on IE6, which doesn't support this; newer versions work with the CSS, as long as you are in Standards Mode (which you should be).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html><head>
    <style type="text/css">
       #foo {
           position: fixed;
           left: 100px; top: 100px; width: 200px; height: 200px;
           background: red;
       }
    </style>
</head>
<!--[if lt IE 7]><body class="browser=ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->

    <div id="foo">Hello</div>

    <script type="text/javascript">
        if (document.body.className=='browser=ie6') {

            // Simple fallback `position: fixed` support for IE6. Elements to be fixed
            // must be positioned with `px` values for `left` and `top`.
            //
            function PositionFixer(element) {
                var x= parseInt(foo.currentStyle.left, 10);
                var y= parseInt(foo.currentStyle.top, 10);
                function fixposition() {
                    foo.style.left= x+document.documentElement.scrollLeft+'px';
                    foo.style.top= y+document.documentElement.scrollTop+'px';
                }
                window.attachEvent('onscroll', fixposition);
                fixposition();
                foo.style.position= 'absolute';
            }

            PositionFixer(document.getElementById('foo'));
        }
    </script>
</body></html>

bobince 2010-04-21 09:50:24

@bobince, I am sorry, but I do not need element fixation on page. Co-ordinates of an element concerning a browser window are necessary to me only.

Kalinin 2010-04-21 10:06:48

ansaurus

tags:

views:

answers:

Define position of an element relatively to browser window.

related questions