iframe scrollbypages - how is it calculated?

how many pixels or by what percent does scrollbypages call a page?

[broniusm]

I am writing a marquee application that flips a page of content at a time. It is built with a fixed-height div displayed in a smaller, fixed-height container iframe. Periodically, by setInterval, I scroll the iframe one page's worth

var iframe = document.getElementsByTagName("iframe")[0];
iframe.scrollByPages(1);

while scrollY < maxScrollY, then I scroll to the top with scrollTo(0, 0) to start over.

My issue is the last page: scollByPage(1) on a short last page looks goofy (because the last page gets scrolled only a little and still shows for the duration of the scroll. I think I would like to pad (body.style.paddingBottom) the body of the document contained in the iframe with the difference of the last page:

iframeheight - (divheight % iframeheight)

(mod gives the remainder from dividing data div height by iframe height)

My question at this point is, is this the best way to go? How does scrollByPages calculate what it constitutes a page's worth of data? scrollByPages flips down a page's worth with just the last couple lines of the previous page shown nicely at the top of the next for continuity.

thanks!

[penders]

var iframe = document.getElementsByTagName("iframe")[0]; 
iframe.scrollByPages(1);

Are you trying to scroll an IFRAME from outside of that IFRAME, or from the document inside?! I assume from inside, as I tried to do this a short while back (from outside) and couldn't - since scrollByPages and scrollTo are not supported on an iframe element?! Am I missing something - is there a way?

Sorry, I can't offer any real help on your specific question, but I would have thought that maybe just adding a series of '<br>'s may be sufficient to establish the end of the page, but otherwise your method sounds pretty good..... alternatively (no iframe) use a div (fixed width, height, containing your page) within another div (overflow:hidden) then you can scroll the inner div (up, down, left, right) with pixel precision? Just a thought.

[broniusm]

Actually, yes, the iframe can be scrolled from the containing document by calling the scroll methods on the obj itself:

Also, to follow up on my earlier post, what works for me is indeed to pad the content to be scrolled with the appropriate height. In my example, I am inserting an empty div of the padding height.

I caclulate the padding like this:

var mod = dataheight % scrollerheight;
var diff = scrollerheight - mod;

where dataheight is the content div's offsetHeight and scrollerheight is the iframe's height as position onscreen. The % (mod) gives the remainder after the division, so if a document is 2.4 iframe heights worth, % would return 4. The difference b/w that and iframe height (a page) then is 6.

Here's a whole snippet, assuming "scroller" is the iframe containing the data:

var scroller = document.getElementById("scroller");
var odiv = scroller.contentDocument.getElementById("scrollbody");
if (odiv) {
if (window.scroller.scrollMaxY > 0) {
var scrollerheight = parseInt(document.getElementsByTagName("iframe")[0].offsetHeight);
var dataheight = odiv.offsetHeight;
var mod = dataheight % scrollerheight;
var diff = scrollerheight - mod;
if (mod > 0) {
//odiv.style.paddingBottom = diff + "px";
odiv.innerHTML += "<div style=\"background-color: transparent; width: 100%; height:"+diff+"px; \"></div>";
}
}
}
// attach handler to reset the scroll back to top when bottom is reached
// This, in conjunction with bottom-padding the document, prevents an undesirable "partial scroll" 
// on the last page, which is typically less than a "scroll page worth" of data.
var iframe = window.scroller;
iframe.onscroll = function() {
if (iframe.scrollY >= iframe.scrollMaxY) {
iframe.scrollTo(0, 0);
}
};

I don't recall why .paddingBottom didn't do it for me.

[broniusm]

oh, sorry.. here's how to scroll the iframe externally, and I'll even include my whole snippet to detect bottom and jump back to top :D

function scroller_scroll() {
var scroller = window.scroller;
if (scroller) {
// scroll document only if the doc is not scrolled to the top (and intrinsically if the doc is long enough to be scrolled)
if (scroller.scrollY < scroller.scrollMaxY) {
var heightmod = parseInt(scroller.document.body.offsetHeight) % parseInt(scroller.scrollMaxY);;
var iframeheight = parseInt(document.getElementsByTagName("iframe")[0].offsetHeight);
scroller.scrollByPages(1);
} else {
// scroll the doc back to the top
scroller.scrollTo(0, 0);
}
}
setTimeout("scroller_scroll();", SCROLLPAUSEDURATION);
}

Note that "window.scroller" refers to this object on the page:

<iframe name="scroller" id="scroller" src="iframe-src.php" style="width: 100%; border: 0px;">
</iframe>

I think window.scroller is referring to the iframe b/c of the "name" attribute on the tag, not the id.