HTML and CSS Reference
In-Depth Information
to produce an animated effect. For example, if you have a large image that is too big to
view in the new window, you can set up scrolling so that you start at the left side of the
image and slowly move to a specified position at the right side and then back again, giving
a panoramic effect. Scrolling might have different behavior on different browsers.
4
The
scrollTo()
method takes two arguments, the horizontal and vertical pixel coordi-
nates to represent the window position, where 0,0 would scroll to the left top corner of
the window, and position 0,350 would scroll down 350 pixels from the starting position
at the top left corner, and 350,0 would scroll to the right 350 pixels from the starting
position, and so on.
FORMAT
window_object.scrollTo(horizontal_pixel_position,vertical_pixel_position);
EXAMPLE
parent.window.scrollTo(0,350);
EXAMPLE
10.13
<html>
<head><title>Scrolling through Autumn</title>
<script type="text/javascript">
1
winObj=window.open("fallscene.gif","mysscene",
"width=350,height=292,resizable=no");
//
Create the new
//
window with an
//
image.
2
winObj.moveTo(0, 0);
3
winObj.focus();
4
var pixelpos=0;
5
var ImgWidth=1096;
6
var pixelstep = 2;
7
var timeout;
8
function startScroll(){
9
if (pixelpos <= (ImgWidth - 350)){
//
Check that scrolling is still within the
//
boundaries of the window.
10
pixelpos += pixelstep;
11
winObj.scrollTo(pixelpos,0)
; //
Go to that position
//
in the new window
12
timeout=setTimeout(startScroll,20);
}
}
4. There might be browser compatibility issues with scrolling; for example, Example 10.13 works fine on a
Mozilla browser, but does not work on Internet Explorer because the image is scaled to fit the window no
matter what size it is. For this example to work in IE, go to Tools
→
Internet Options
→
Advanced
→
Multimedia, then clear the Enable Automatic Image Resizing checkbox.
