Detecting Tag Ids On Scroll

[JBorges]

Hi, I have this script below that shows a popup box when I start scrolling an HTML page. It let's me know where on the page I am, e.g. Page 1, Page 5 or Page 26. It works great when it's just single digits.

But I'm making an HTML Bible and would like to adapt the script to show e.g., Genesis 1:1 as I scroll down. So the objective would be to update the popup box according to the chapter and verse I am at. So scrolling further on would show e.g. Genesis 23:4. The name of the Bible book is placed in the title tag.
So I have to find out how the script can show the title tag and the ids like id="1:1", id="1:2", or id="23:4". Right now it detects nicely the single digits of the ids like id="1", id="2", id="3" and so forth.
I have to place this code right after the body tag, <div id="sayverse"></div>, for it to work.

I know it's a long script to look at, but if anyone can shed some light on this I'd be very grateful.

--Philip


var displaytime;

function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

function findPosition( oElement ) {
if( typeof( oElement.offsetParent ) != 'undefined' ) {
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
} else {
return [ oElement.x, oElement.y ];
}
}

function functionThatSetsPosition() {

if( displaytime ) {
clearTimeout(displaytime);
}

var scrolledFromTop = getScrollXY()[1];
var topposition, lastone, offsetFromTop, currentverse, firstVerse = 1;
while(!document.getElementById(firstVerse) && firstVerse < 2000) {
firstVerse++;
}
for(var i = firstVerse, onediv; onediv = document.getElementById(i); i++) {
topposition = findPosition(onediv)[1];
offsetFromTop = topposition - scrolledFromTop;
if( i == firstVerse && offsetFromTop >= 0 ) {
//special case for the first verse - any non-negative offset
currentverse = i;
break; //don't waste time checking any more
}
if( offsetFromTop >= 0 && offsetFromTop <= 1 ) {
//within 1 pixels of the top - this is the right one
//this part is actually redundant, it will pick it up next loop
currentverse = i;
break; //don't waste time checking any more
}
if( offsetFromTop > 1 ) {
//over 1 pixels from the top - the last one should be called 'top'
currentverse = lastone;
break; //don't waste time checking any more
}
//store this as the last one for checking afterwards
lastone = i;
}
if( !currentverse ) {
currentverse = lastone;
}
document.getElementById('sayverse').innerHTML = 'page' + currentverse;
document.getElementById('sayverse').style.display = 'block';
displaytime = setTimeout(function ()
{
document.getElementById('sayverse').style.display = 'none';
},500);
}

document.onscroll = functionThatSetsPosition;