P2P said:
Hi
I am wondering if someone know of a free cross-browsers vertical
scrolling script that
- is cross cross-browsers
- will call the scrolling content from an external html page or from a
url page
- will also has an option to pause when each heading on the content page
reach the top or bottom of defined scrolling window, depending on the
predefined direction the scroll is scrolling.
Will appreciate very much if someone know such a script and let me know
asap.
I spent 4 days on the net looking and trying out different vertical
scrolling script but I can't find any like the one I described above.
Here's a start. It 'works' in Firefox and old Safari, fails elegantly in
IE 5.2 (Mac). If all features not supported, content is presented in an
iFrame with scrollbars. If feature tests passed OK, iFrame has scrolling
turned off and content scrolls. Pauses when each article reaches the top,
clicking on the iFrame starts/stops the scroller.
Uses same ID for iFrame in parent as div containing all articles in iFrame
source. It would be simple to add a timer to re-load the iFrame content at
specified intervals to get new content - say when all articles have been
scrolled twice or whatever.
Parent page
===========
<title>Vertical scroller</title>
<iframe src="scroll_content.html" id="scrollHolder"
height="150" width="100px"></iframe>
content.html
============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<title>Scroller content</title>
<style type="text/css">
body {margin: 0; padding: 0;}
#scrollHolder { }
#scrollHolder div { border: 1px solid red; }
</style>
<script type="text/javascript" src="scroller.js"></script>
<div id="scrollHolder"><div>Here's some text 0
</div><div>Here's some text 1
</div><div>Here's some text 2
</div><div>Here's some text 3
</div><div>Here's some text 4
</div><div>Here's some text 5
</div><div>Here's some text 6
</div></div>
scroller.js
===========
var scrollObj = (function()
{
var sDivID = 'scrollHolder';
var sTimer = null; // keep timer reference
var lag = 100; // milliseconds between scroll moves
var pause = 3000; // milliseconds to pause each headline
var jump = 1; // Number of px to move each time
return {
start : function()
{
var o;
var docBody = document.body || document.documentElement;
if ( docBody
&& document.getElementById
&& (o = document.getElementById(sDivID))
&& (o = o.firstChild)
&& ('number' == typeof o.offsetHeight )
&& ('number' == typeof window.scrollY )
&& ('function' == typeof window.scroll
|| 'object' == typeof window.scroll)
) {
var topT;
if ( window.top
&& (topT = window.top.document.getElementById(sDivID))
) {
topT.scrolling = 'no';
}
scrollObj.run();
docBody.onclick = scrollObj.checkScroller;
}
},
run : function()
{
var s = document.getElementById(sDivID);
window.scrollBy(0, jump);
if (s.firstChild.offsetHeight <= window.scrollY) {
window.scroll(0,0);
s.appendChild(s.firstChild);
sTimer = setTimeout('scrollObj.run();', pause);
} else {
sTimer = setTimeout('scrollObj.run();', lag);
}
},
checkScroller : function ()
{
if (sTimer){
clearTimeout(sTimer);
sTimer = null;
} else {
scrollObj.run();
}
}
};
})();
window.onload = scrollObj.start;
