highlight element that is closest to middle of vie

Question

I have 3 anchors on the page. I want to highlight a list of buttons that are fixed depending on which anchor is closest to the middle of the viewport.

How would I do this?

I'm already using the InView and ViewportOffset plugins.

Answer 1

so if you do no the viewport's coordinates, then, you can get the middle:

x = (viewport.x2 - viewport.x1) / 2;
y = (viewport.y2 - viewport.y1) / 2;

now you do something like:

var distances = [];
var elems = $("a");
elems.each(function(i){
    var o = $(this).offset();
    var d2 = (o.left - x)*(o.left - x) + (o.top - y)*(o.top - y);
    distances[i] = d2
});

now you have the "square" of the distances in the array, you need to search for the smallest (closest to the middle):

var closest = 0;
for (i=0; i<distances.length;i++) {
    if (distances[i] < distances[closest]) {
         closest = i;
    }
}

now you have the index of the closest element in "closest" so you can do anything with it like:

elems[i].addClass("higlighted");