Home/ Questions/Q 9230155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:45:13+00:00

I have been working on JavaScript / JQuery code which allows arrow key movement

  • 0

I have been working on JavaScript / JQuery code which allows arrow key movement between input boxes (yes, I am aware this breaks standard UI).

It works by by looping through each element and finding the closest in each direction (left, right, up and down).

Example

P1:(0, 0), P2:(1, 0), P3:(0, 2)

P1 has one point to the right (P2) and one point up (P3).
Point 1

P2 has one point to the left (P1) and one point up (P3).
No picture

P3 has two points down (P1 & P2) but P1 is closer.
Point 1

Therefore the final movements are:

Up
  1 -> 3
  2 -> 3
Right
  1 -> 2
Down
  3 -> 1
Left
  2 -> 1

For this example:
P1 has two incoming and two outgoing connections.
P2 has one incoming and two outgoing connections.
P3 has two incoming and one outgoing connections.

This made me think.
Is there a set of points such that one or more point is inaccessible (0 incoming connections), or can it be proven no such set exists?

Side note:
If you ignore the up / down component (only using left and right with a vertical split) then point P3 in inaccessible in P1: (0, 0), P2: (2, 0), P3: (1, 4).

Here is the JavaScript / JQuery code if it will help anyone.

function arrowKeyNavigation(elements) {
    // Get the position of each element.
    var elementOffsets = [];
    elements.each(function(key, element) {
        elementOffsets[key] = $(element).offset();
    });

    // Find the closest point in each direction and store the points in data('keyNav') for later use.
    for (var i = 0; i < elementOffsets.length; i++) {
        var closestPoints = [];

        for (var j = 0; j < elementOffsets.length; j++) {
            if (i != j) {
                var distance = calcDistanceSquared(elementOffsets[i], elementOffsets[j]);
                var quadrant = calcQuadrant(elementOffsets[i], elementOffsets[j]);

                if (closestPoints[quadrant] == undefined || calcDistanceSquared(elementOffsets[i], elementOffsets[closestPoints[quadrant]]) > distance) {
                    closestPoints[quadrant] = j;
                }
            }
        }

        var closestElements = [];
        for (var j = 0; j < closestPoints.length; j++) {
            closestElements[j] = elements[closestPoints[j]];
        }

        $(elements[i]).data('keyNav', closestElements);
    }
}

// Returns the distance between two points squared.
function calcDistanceSquared(offset1, offset2) {
    ...
}

// Returns 0, 1, 2 or 3 for left, up, right and down respectively.
// If a point is EXACTLY 45 degrees it will be classified as either left / right.
function calcQuadrant(offset1, offset2) {
    ...
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve thought about it more and I think I have the solution.
    The proof sketch goes as follows:

    Assume you have a finite number of points in the plane (R^2). Take an arbitrary point and call it your destination. Then take any other point. That point divides R^2 into four quadrants, as you’ve drawn in red. By definition the destination is in one of those four quadrants. Move in that direction. One of two things can happen:
    1) you arrive at the destination and you’re done
    2) you move to another point.

    If 2, then you’ve moved closer (EDIT: by the 1-norm distance, d((x1,y1),(x2,y2)) = |x1-x2|+|y1-y2|). This requires more proof but I’m just sketching. The destination is now in some quadrant of this new point.

    Now note that If you repeat this, always moving one step closer in the direction of the destination (which may change each step) your distance to the destination point will decrease each step; you can never revisit a point because you distance is always decreasing. So, if you have a finite number of points you’ll eventually reach your destination.

    • 0