Skip to content

Instantly share code, notes, and snippets.

@yaci

yaci/measure-distance-between-elements.js

Last active March 15, 2021 18:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yaci/b1f4f4aa30bb111becfd267ce941b47b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yaci/b1f4f4aa30bb111becfd267ce941b47b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yaci revised this gist Mar 15, 2021. 1 changed file with 7 additions and 4 deletions.
    11 changes: 7 additions & 4 deletions measure-distance-between-elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,10 @@
    //1. run the code in the console
    //2. Click on an element on a page
    //3. Click on another element
    //4. Distance between the two will be shown in the console
    /* 1. run the code in the console
    * 2. Click on an element on a page
    * 3. Click on another element
    * 4. Distance between the two will be shown in the console
    * NOTE: it measures only vertical distance (Y axis) NOT the horizontal one!
    */


    var firstElement;

  2. yaci revised this gist Mar 15, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion measure-distance-between-elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@ function selectElement(clickEvent) {
    clickEvent.preventDefault();
    const selectedEl = clickEvent.target;
    if (!firstElement) {
    firstElement = selectedEl; //global variable
    firstElement = selectedEl; //assignment to global variable
    console.log("Element 1: ", selectedEl)
    }
    else {
  3. yaci revised this gist Mar 15, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion measure-distance-between-elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ function measureDistance(firstEl, secondEl) {

    if (elementsAreNotRelated) {
    const distance = (position1.top < position2.top) ? position2.top - position1.bottom : position1.top - position2.bottom;
    console.log("Distance: ", distance);
    console.log("Distance:", distance);
    }
    else if (oneElementIsChildOfTheOtherOne) {
    const topEdgesDistance = Math.abs(position1.top - position2.top);
  4. yaci revised this gist Mar 15, 2021. 1 changed file with 36 additions and 13 deletions.
    49 changes: 36 additions & 13 deletions measure-distance-between-elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,29 +3,52 @@
    //3. Click on another element
    //4. Distance between the two will be shown in the console

    var position1;
    var firstElement;

    function measureDistance(clickEvent) {
    function measureDistance(firstEl, secondEl) {
    const position1 = firstEl.getBoundingClientRect();
    const position2 = secondEl.getBoundingClientRect();
    const elementsAreTheSame = (firstEl === secondEl);
    const oneElementIsChildOfTheOtherOne = (firstEl.contains(secondEl) || secondEl.contains(firstEl)) && !elementsAreTheSame;
    const elementsAreNotRelated = !elementsAreTheSame && !oneElementIsChildOfTheOtherOne;

    if (elementsAreNotRelated) {
    const distance = (position1.top < position2.top) ? position2.top - position1.bottom : position1.top - position2.bottom;
    console.log("Distance: ", distance);
    }
    else if (oneElementIsChildOfTheOtherOne) {
    const topEdgesDistance = Math.abs(position1.top - position2.top);
    const bottomEdgesDistance = Math.abs(position1.bottom - position2.bottom);
    console.log("One element contains another");
    console.log("Distance between top edges: ", topEdgesDistance);
    console.log("Distance between bottom edges:", bottomEdgesDistance);
    }
    else if (elementsAreTheSame) { //user clicked twice on the same element
    console.log("You selected the same element twice. Here are its dimensions:");
    console.log("Height:", position1.height);
    console.log("Width: ", position1.width);
    }
    }

    function selectElement(clickEvent) {
    clickEvent.stopPropagation();
    clickEvent.preventDefault();
    const targetElem = clickEvent.target;
    if (!position1) {
    position1 = targetElem.getBoundingClientRect();
    console.log("Element 1: ", targetElem)
    const selectedEl = clickEvent.target;
    if (!firstElement) {
    firstElement = selectedEl; //global variable
    console.log("Element 1: ", selectedEl)
    }
    else {
    const position2 = targetElem.getBoundingClientRect();
    const distance = (position1.top < position2.top) ? position2.top - position1.bottom : position1.top - position2.bottom;
    console.log("Element 2: ", targetElem);
    console.log("Distance: ", distance);
    position1 = null;
    console.log("Element 2: ", selectedEl);
    measureDistance(firstElement, selectedEl);
    firstElement = null;
    }
    }

    function addMeasuringEvent(elem) {
    elem.addEventListener('mouseover', ev => ev.target.style.backgroundColor = "LightGreen");
    elem.addEventListener('mouseout', ev => ev.target.style.backgroundColor = '');
    elem.addEventListener('click', measureDistance);
    }
    elem.addEventListener('click', selectElement);
    }

    document.querySelectorAll("body *:not(nextjs-portal,script,svg *)").forEach(e => addMeasuringEvent(e));
  5. yaci created this gist Mar 15, 2021.
    31 changes: 31 additions & 0 deletions measure-distance-between-elements.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    //1. run the code in the console
    //2. Click on an element on a page
    //3. Click on another element
    //4. Distance between the two will be shown in the console

    var position1;

    function measureDistance(clickEvent) {
    clickEvent.stopPropagation();
    clickEvent.preventDefault();
    const targetElem = clickEvent.target;
    if (!position1) {
    position1 = targetElem.getBoundingClientRect();
    console.log("Element 1: ", targetElem)
    }
    else {
    const position2 = targetElem.getBoundingClientRect();
    const distance = (position1.top < position2.top) ? position2.top - position1.bottom : position1.top - position2.bottom;
    console.log("Element 2: ", targetElem);
    console.log("Distance: ", distance);
    position1 = null;
    }
    }

    function addMeasuringEvent(elem) {
    elem.addEventListener('mouseover', ev => ev.target.style.backgroundColor = "LightGreen");
    elem.addEventListener('mouseout', ev => ev.target.style.backgroundColor = '');
    elem.addEventListener('click', measureDistance);
    }

    document.querySelectorAll("body *:not(nextjs-portal,script,svg *)").forEach(e => addMeasuringEvent(e));