2

a busy cat

Hi, how I would find line lengths highlighted with other color (with question marks) on the picture above? Rectangles are just divs with position absolute.

My goal is to find 'the closest' div to the green one, but 'closest' is a quite abstract definition, so I decided that 'closest' would be one with shortest highlighted line on the picture above. Maybe there are other simpler ways to find 'closest' div??

0

3 Answers 3

4

There was a question related to this a while ago which inspired me to start writing a jQuery plugin to do just this. You didn't mention jQuery in your question, but it will certainly make this task far easier.

Here's a working example (it's highlighted the closest div to the red one). You call the plugin like this:

$("#myDiv").physicallyClosest("div").css("background-color", "#00ff00");

That finds the div which is physically closest to #myDiv and changes its background colour.

I'm sure it's far from perfect, but if you're able to use jQuery it should be enough to get you started.

0
4

Live Demo

Pure JS. Basically just gets the offsets, and does a standard distance check.

//setup for the example
var divs = document.getElementsByTagName('div');

// Randomly place some divs around the screen.
for(var i = 0; i < divs.length; i++){
     divs[i].style.top = Math.random()*500 + 'px';
     divs[i].style.left = Math.random()*600 + 'px';    
     divs[i].onclick = getClosest;
}

// Actual function to get the closest
function getClosest(e){
    var x = this.offsetLeft,
        y = this.offsetTop,
        minDist = 99999,
        closestElement = {};

    for(var i = 0; i < divs.length; i++){
        if(divs[i] !== this){
           var x2 = divs[i].offsetLeft,
               y2 = divs[i].offsetTop;

           dist = Math.sqrt((x2 - x) *(x2-x) + (y2 - y) * (y2-y));

           if(dist < minDist){
               minDist = dist;
               closestElement = divs[i];
            }
        }
    }

    // Set the background of the closest element to red.
    closestElement.style.background = 'red';
}

This is based on the origin being in the top left, but you could change it to the middle of the element by just doing something like the following

x = offsetLeft + width/2;
y = offsetTop + height/2;
4
  • It doesn't work correctly -> cl.ly/423N2V1Y1h253P0d0b3V I clicked on test 1 and test 3 is red
    – AlaskaKid
    Nov 2, 2011 at 13:40
  • @AlaskaKid there was an error with it, I had it comparing all the x's and no y's by mistake. It should work fine now.
    – Loktar
    Nov 2, 2011 at 13:46
  • Your function works pretty good but there are some bugs cl.ly/212B3f0u072A3n1E0Y1l just clicked on test 5
    – AlaskaKid
    Nov 2, 2011 at 14:44
  • @AlaskaKid yeah, its top/left comparison, test1 must of been closer though for it to work, its a simple documented distance function being used.
    – Loktar
    Nov 2, 2011 at 14:51
0

Just wrote a function which accepts 2 parameters(element, and array of divs where we should look for the closest div to the element in first parameter) and returns the closest element.

Live example

function getClosest(element, divs) {

// Returns x, y coords of object relatively to the whole document
function getWindowPosition(obj) {
  var box = obj.getBoundingClientRect();
  return {
    x : box.left,
    y : box.top
  }
}

var elementLeft = getWindowPosition(element).x;
var elementRight = elementLeft + element.offsetWidth;
var elementTop = getWindowPosition(element).y;
var elementBottom = elementTop + element.offsetHeight;

var smallestDistance = null;
var closestElement = null;
for(var i = 0; i < divs.length; i++) {
    divs[i].style.background = 'yellow'; //For demo, delete this line
    var divLeft = getWindowPosition(divs[i]).x;
    var divRight = divLeft + divs[i].offsetWidth;
    var divTop = getWindowPosition(divs[i]).y;
    var divBottom = divTop + divs[i].offsetHeight;

    var xPosition = 0;
    //Finding div's postion on x axis
    if(divRight < elementLeft) {
        xPosition = elementLeft - divRight;
    } else if(divLeft > elementRight) {
        xPosition = divLeft - elementRight;
    }

    var yPosition = 0;
    //Finding div's postion on y axis
    if(divBottom < elementTop) {
        yPosition = elementTop - divBottom;
    } else if(divTop > elementBottom) {
        yPosition = divTop - elementBottom;
    }

    var valueForComparison = 0;
    if(xPosition > yPosition) {
        valueForComparison = xPosition;
    } else {
        valueForComparison = yPosition;
    }

    //Comparing divs
    if(smallestDistance === null) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    } else if(valueForComparison < smallestDistance) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    }
}

closestElement.style.background = 'red'; //For demo, delete this line
return closestElement;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.