| | |
scrolling images
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
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.
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.
•
•
Join Date: Feb 2005
Posts: 6
Reputation:
Solved Threads: 0
•
•
•
•
Originally Posted by 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.
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
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.
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.
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
•
•
Join Date: Dec 2005
Posts: 1
Reputation:
Solved Threads: 0
•
•
•
•
Originally Posted by 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.
http://www.dynamicdrive.com/dynamicindex4/flyimage.htm
you will definitely enjoy the samples
jd
•
•
•
•
Originally Posted by 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.
*Voted best profile in the world*
![]() |
Similar Threads
- scrolling images (JavaScript / DHTML / AJAX)
- Positioning static image over scrolling images (HTML and CSS)
- Scrolling Images in Dreamweaver (Graphics and Multimedia)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Eek!
- Next Thread: Javascript - Print Date in different color
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select software sql text textarea unicode w3c window windowofwords windowsxp \n






