jQuery in Action
The Dimensions Plugin
289
The
CSS
overflow
value for this element is set to
scroll
, causing scrollbars to
appear so that we can pan around the image.
Work through the following exercises using this page:
Exercise 1--Using the scrollbars on the Test subject, pan around the image.
Watch the Results display, and note how the current scroll values are kept
up to date. A
Watch the Results display, and note how the current scroll values are kept
up to date. A
scroll
event handler established on that element calls the
scrollTop()
and
scrollLeft()
methods to obtain these values for display.
Exercise 2--Repeat the steps of exercise 1, except this time pan around the
page using the window's scrollbars. Watch the Results (unless you move
them off-screen), and note how the window's scroll values change as you
pan around the page. Also, notice how the values for the Document stay in
lockstep with those of the Window, emphasizing that, for the scroll meth-
ods, specifying either the window or the document performs the same
action. We've included both the window and the document as targets to
convince you of this point.
page using the window's scrollbars. Watch the Results (unless you move
them off-screen), and note how the window's scroll values change as you
pan around the page. Also, notice how the values for the Document stay in
lockstep with those of the Window, emphasizing that, for the scroll meth-
ods, specifying either the window or the document performs the same
action. We've included both the window and the document as targets to
convince you of this point.
Exercise 3--Click the Restore button to set everything to normal. Select the
Test subject as the target, and enter scroll values into the text boxes, such
as 100 and 100. Click the Apply button. Oh! What a pretty waterfall! Test
other values to see how they affect the Test subject when the Apply button
calls the
Test subject as the target, and enter scroll values into the text boxes, such
as 100 and 100. Click the Apply button. Oh! What a pretty waterfall! Test
other values to see how they affect the Test subject when the Apply button
calls the
scrollTop()
and
scrollLeft()
methods.
Exercise 4--Repeat exercise 3 with the Window as the target.
Exercise 5--Repeat exercise 3 with the Document as the target. Convince
yourself that, whether you specify the Window or the Document as the tar-
get, the same thing happens in all cases.
yourself that, whether you specify the Window or the Document as the tar-
get, the same thing happens in all cases.
9.2.3 Of offsets and positions
We might, at first, think that obtaining the position of an element is a simple task.
All we need to do is to figure out where the element is in relation to the window
origin, right? Well, no.
All we need to do is to figure out where the element is in relation to the window
origin, right? Well, no.
When the
top
and
left
CSS
values are applied to an element, these values are
in relation to the element's offset parent. In simple cases this offset parent is the
window (or, more precisely, the
window (or, more precisely, the
<body>
element loaded into the window); but, if
any ancestor of an element has a
CSS
position
value of
relative
or
absolute
, the
closest such ancestor is the element's offset parent. This concept is also referred
to as the positioning context of the element.
to as the positioning context of the element.
When determining the location of an element, it's important to know which
position we're asking for. Do we want to know the position of the element in