Activate Function Only On Scroll

[JBorges]

Hi!

I have a javascript function that shows a popup box when it passes any given div element. It appears when I both press the up or down arrow and when I use the scrollbar.

How can I make the popup box appear only when I use the scrollbar? It annoys me that it also shows up when I use the up and down arrows.
I've searched the net but haven't gotten anywhere really.

--Philip

 

[feherke]

Hi

Call it only when scrolling occurs ?

document[teal].[/teal]onscroll[teal]=[/teal]yourfunction

Feherke.

http://rootshell.be/~feherke/

 

[JBorges]

Thanks. But that doesn't quite work. It still appears when I use the arrows. I put document.onscroll = myfunction; at the top of this function, before anything else.

 

[feherke]

Hi

Well, that is what I understood.

So you want the popup only when the document is scrolled with the mouse ? I know no nice solution for that.

In FireFox this works for your scenario of clicking the scrollbar :

[b]var[/b] mouseon[teal]=[/teal][b]false[/b]
document[teal].[/teal]onmousedown[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] mouseon[teal]=[/teal][b]true[/b] [teal]}[/teal]
document[teal].[/teal]onmouseup[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] mouseon[teal]=[/teal][b]false[/b] [teal]}[/teal]
document[teal].[/teal]onscroll[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [b]if[/b] [teal]([/teal]mouseon[teal])[/teal] [COLOR=darkgoldenrod]yourfunction[/color][teal]()[/teal] [teal]}[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[JBorges]

Still doens't work. Maybe I'm not doing this right. My code is this. The functionThatSetsPosition shows the actual popup box. Hope it's not too much.

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;