flickerfade.org

it’s handy if you need to know when something scrolls into view. is there a faster way?

this uses prototype.js. yeah, i don’t like jquery that much. but i don’t hate it either, i just like the syntax of prototype better

also this default theme sucks at formatting code

Element.Methods.centerIsWithinViewport = function(element) {
var dim = document.viewport.getDimensions();
var so = document.viewport.getScrollOffsets();
var co = element.cumulativeOffset();
var edim = element.getDimensions();
// x and y measured from upper left
var center = {
x: co.left + (edim.width / 2),
y: co.top + (edim.height / 2)
}
return (center.x > so.left &&
center.x < so.left + dim.width &&
center.y > so.top &&
center.y < so.top + dim.height);
};
Element.Methods.isWithinViewport = function(element) {
var dim = document.viewport.getDimensions();
var so = document.viewport.getScrollOffsets();
var co = element.cumulativeOffset();
var edim = element.getDimensions();
// there exists one corner within the viewport
var ul = { x: co.left, y: co.top };
var ur = { x: co.left + edim.width, y: co.top };
var ll = { x: co.left, y: co.top + edim.height };
var lr = { x: co.left + edim.width, y: co.top + edim.height };
return (ul.x > so.left &&
ul.x < so.left + dim.width &&
ul.y > so.top &&
ul.y < so.top + dim.height) ||
(ur.x > so.left &&
ur.x < so.left + dim.width &&
ur.y > so.top &&
ur.y < so.top + dim.height) ||
(ll.x > so.left &&
ll.x < so.left + dim.width &&
ll.y > so.top &&
ll.y < so.top + dim.height) ||
(lr.x > so.left &&
lr.x < so.left + dim.width &&
lr.y > so.top &&
lr.y < so.top + dim.height);
}
Element.addMethods();

// then use a periodical executer to see if they scroll it into view
// now you know
document.observe("dom:loaded", function() {
var e = $('test');
new PeriodicalExecuter(function(pe) {
if (e.centerIsWithinViewport()) {
pe.stop();
alert('made it in view')
// log it so we know people are at least seeing the message
}
}, 3);
})