JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Determining the Size
and Position of Page
Elements
1
document
2
3
position : absolute;
top: 300px;
left: 100px
position : absolute;
top: 250px;
left: 200px
324 javascript & jquery: the missing manual
Figure 10-7:
jQuery provides two functions that let you determine the
top and left position of an element on the page. In the
case where you have an absolutely positioned element
(#innerBox) inside another positioned element (#outer-
Box), the two functions will return different results.
Tip: You can also use the offset() function to set the position of an element on a page; just pass the function
an object with left and top values like this:
$('#element').offset({
left : 100,
top : 200
});
You can only use pixel values for left and top; em values—(20em)—or percentages—(20%)—won’t work.
Determining a Page’s Scrolling Position
A web page is often larger than the browser window that displays that page: Web
documents with lots of content are frequently taller and sometimes wider than the
browser, forcing visitors to scroll to see all of the page (see Figure 10-8). When a
visitor scrolls a page, some of the document disappears from view. For example,
In Figure 10-8, the web page doesn’t fit in the browser window, the document is
scrolled in left and up, so the top of the page and left side of the page are out of view.
This means the top-left corner of the browser window isn’t the same as the top-left
corner of the document. If you tried to place a new element like an animated banner
at the top of the screen, you’d run into trouble if you merely set the left and top position
of the element to 0—you’d actually be placing it at the top of the document, but
outside of the browser window.
www.it-ebooks.info