scrolling images

[stevenpowen]

Hi everyone:
How do I get an Image to scroll vertically down the Web page when the browser window scroll bar is moved. In other words, the image moves as the scolling browser window moves - up or down. thanks for your help.

[tgreer]

Scrolling is tough... break this into steps. The first step is to write a "scrollDetector", a function that will report the positions, horizontal and vertical, that a user has scrolled.

IE and Moz browsers both store this value, but they use different JavaScript properties (the underlying DOM is different).

Once you can store the pixel values of the scroll, you can use them to position your image (or better yet, the <div> which contains your image).

For IE, use:

document.body.scrollTop

which is the number of pixels FROM the top the user has scrolled. How far right have they scrolled? document.body.scrollLeft

if the scrollbars don't exist on a particular page, the value returned will be zero.

Moz/Netscape/FireFox browsers use "window.pageYOffset" and "window.pageXOffset".

So you have to write 1) browser detection code and then 2) a function that will report pixels scrolled.

The next problem is, how/when do you call this function? Browsers may or may not have a "scroll" event, which may or may not fire on all elements, or may or may not fire if the scroll was done with the mousewheel vs. keyboard, etc. It's nasty.

So, I would use the setInterval() function. Call your scroll detector every so many milliseconds. Note the pixels scrolled, and use them to adjust your image position.

Lastly, load your setInterval() function in the body onload event.

It's a lot to put together, but it's straightforward coding.

Holler if you need more help.

[stevenpowen]

Scrolling is tough... break this into steps. The first step is to write a "scrollDetector", a function that will report the positions, horizontal and vertical, that a user has scrolled.

IE and Moz browsers both store this value, but they use different JavaScript properties (the underlying DOM is different).

Once you can store the pixel values of the scroll, you can use them to position your image (or better yet, the <div> which contains your image).

For IE, use:

document.body.scrollTop

which is the number of pixels FROM the top the user has scrolled. How far right have they scrolled? document.body.scrollLeft

if the scrollbars don't exist on a particular page, the value returned will be zero.

Moz/Netscape/FireFox browsers use "window.pageYOffset" and "window.pageXOffset".

So you have to write 1) browser detection code and then 2) a function that will report pixels scrolled.

The next problem is, how/when do you call this function? Browsers may or may not have a "scroll" event, which may or may not fire on all elements, or may or may not fire if the scroll was done with the mousewheel vs. keyboard, etc. It's nasty.

So, I would use the setInterval() function. Call your scroll detector every so many milliseconds. Note the pixels scrolled, and use them to adjust your image position.

Lastly, load your setInterval() function in the body onload event.

It's a lot to put together, but it's straightforward coding.

Holler if you need more help.

Usually what I've done in the past is cut and paste and modify script to work. I'm not a programmer but I did stay in a Holiday Inn last night. Do you know of any snippets I could use just to get me going? Primarily it's IE that I will be writing for. Thanks for your help w/ this...

[tgreer]

I see... no, I don't know of any pre-existing code you could glean. But then, I haven't looked.

I could write you something, but I'm currently involved in a lot of "for pay" work, and don't have much time.

Why not just give it a try yourself? Everyone here would be glad to help you along.

[stevenpowen]

Thanks, I'll do that

[tgreer]

Hold the presses!

Have you seen this site?

http://codepunk.hardwar.org.uk/ajs02.htm

It does exactly what I was describing. Plus, it's presented in a step by step tutorial fashion.

[DanceInstructor]

Codepunk's site isn't fancy or anything, but I find his tutorials very easy to follow and understand. Sorry for the slightly offtopic post :)

[jdmajor]

Hi everyone:
How do I get an Image to scroll vertically down the Web page when the browser window scroll bar is moved. In other words, the image moves as the scolling browser window moves - up or down. thanks for your help.

Check out the free scrolling images at
http://www.dynamicdrive.com/dynamicindex4/flyimage.htm

you will definitely enjoy the samples

jd

[lulubell]

hey yeah... that really made no sense to me... if you could just type out the html code with a sample picture and color codes or w/e for me... please and thank you.

[iamthwee]

hey yeah... that really made no sense to me... if you could just type out the html code with a sample picture and color codes or w/e for me... please and thank you.

This is really a horrendous idea. It looks awful and is annoying more than anything else. I wouldn't recommend doing it.