PDA

View Full Version : Help with anchors into current view.



sergiozambrano
06-22-2009, 12:57 PM
I'm working on a script for highlighting the links to anchors in the visible part of screen and it only works for the first 3 anchors.

I've already changed the html to make sure it's fine, and no matter how I add, delete, or move around the links it always works with the first 3.

Anchors are named 'p01', 'p02' and so on.
Links id are same than anchors plus "_link" (e.g. 'p01_link')


function isinView(who) {
var top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var vpH = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var coverage = parseInt(vpH + top);
if ( who.offsetTop > top && who.offsetTop < vpH ) {
isornot=1;
} else {
isornot=0;
}
return isornot;
}

window.onscroll = function () {
for (var i=0;i<anchors_count = document.anchors.length;i++) {
if(isinView(document.anchors[i])) {
var linkedlink = document.getElementById(document.anchors[i].name + '_link');
linkedlink.style.display = 'none';
} else {
document.anchors[i].style.color = '#999999';
}
}
}

Any clue where the error is? (I'd say it's something with the 'linkedlink' var, which constructs the name of the related link to its anchor, but I don't know how to do it in another way.

clueful
06-22-2009, 04:32 PM
function isinView(who) {
var top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var vpH = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var coverage = parseInt(vpH + top);
if ( who.offsetTop > top && who.offsetTop < vpH ) {
isornot=1;
} else {
isornot=0;
}
return isornot;
}
Reading the value of vpH on its own doesn't allow for the scrolled displacement of the page, so it will work only when the page isn't scrolled.