CSS offset undefined for a text floating div

Question

Given :

 const display = document.querySelector('.display'); document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event.target.id === "button") { if(event.target.textContent === "left"){ display.style.transform += "translateX(50px)"; } else if (event.target.textContent === "right"){ display.style.transform += "translateX(-50px)"; } console.log("left :" + display.style.offsetLeft + ", right : " + display.style.offsetRight); console.log("left :" + display.parentNode.style.offsetLeft + ", right : " + display.parentNode.style.offsetRight); } });

 .meta-div { box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); position: relative; border-radius: 0.5em; overflow: hidden; /* allows the border-radius to be visible. */ width: 14rem; } .outer-div { color: black; text-overflow: normal; white-space: nowrap; overflow: hidden; text-align: right; border-left: 30px solid black; border-right: 30px solid black; } .display { float:right; padding-right: 5px; transition: transform 250ms; }

 <div class="meta-div"> <div class="outer-div"> <div class="display">111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999</div> </div> </div> <button id="button">left</button> <button id="button">right</button>

my goal is to find a way to extract the display's text position relative to its container (which I set to relative for offsetLeft to work), such that the left/right buttons don't work when the text has reached the respective left or right maximal position. Basically, I want the text to minimally start at "111 + ..." or maximally end at "... + 999".

In other words, I want to set a limit to the display.style.transform += "translateX(50px)"; function call both from the left and from the right.

---

Looking online the solution seems to be to use offset . In my case, the offset seems to be undefined in both directions for both the display text element and its parent container. Could this be because of the float:right property? I am short of ideas on how to implement this small feature. I suspect I may not even be using the right function at all (offset) ?

Does anyone have any tips or ideas?

Answer 1

The main problem with your code is that, the attribute that should be used is display.offsetLeft and display.offsetTop . You are currently using display.style.offsetLeft. Apart from that, there is no attribute called offsetRight. If you want to do that, you will have to calculate it yourself.

Hence your code can be rewritten like so:

const display = document.querySelector('.display');

document.addEventListener("click", (event) => {
  if (!event.target.closest("button")) return;
  
  if(event.target.id === "button") {

    if(event.target.textContent === "left"){
        display.style.transform += "translateX(50px)";
    } else if (event.target.textContent === "right"){
        display.style.transform += "translateX(-50px)";
    }
    console.log("left :" + display.offsetLeft);
    
  }
    
});

Apart from this, you could also use the getBoundingClientRect() function, and then calculate the difference in the offsets between the parent and the child elements. But since, I don't know the use case, I could be wrong about this. getBoundingClientRect can be used as follows though:

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');


document.addEventListener("click", (event) => {
  if (!event.target.closest("button")) return;
  
  
  const eleRect = container.getBoundingClientRect();
  const targetRect = display.getBoundingClientRect();
  
  if(event.target.id === "button") {

    if(event.target.textContent === "left"){
        display.style.transform += "translateX(50px)";
    } else if (event.target.textContent === "right"){
        display.style.transform += "translateX(-50px)";
    }
    
    // Calculate the top and left positions
    const top = eleRect.top - targetRect.top;
    const left = eleRect.left - targetRect.left;
    
    console.log("left :" + left); 

  }
    
});