Kevin Powell - Community•2y ago

track element in real time

can anyone tell me, if i have an element in my webpage that's moving how can i always keep an update of it's coordinates in real time basically js will always be looking for the coordinate of that element regardless of it moving or being stationary

60 Replies

Jochem•2y ago

how is it moving?

Joao•2y ago

I don't think you need to do anything. You can always access the properties in javascript using getBoundingClientRect and it will tell you the right coordinates.

Jochem•2y ago

that too

glutoniumOP•2y ago

yaa ik about that.. but when i use it, won't it just check the coordinate once? how do I make the the run simultaneously so that it always keeps updating could be moving anyway in my case, it's moving along the x-axis on scroll

Joao•2y ago

What do you mean run simultaneously? What's the use case

Jochem•2y ago

are you moving it, or is it just moving when the user scrolls on the x-axis?

glutoniumOP•2y ago

i mean like an animation where it's always moving well, for what I'm currently doing, it's moving when it's scrolled basically it's a slide of images when I'm using touch to slide the images r moving

glutoniumOP•2y ago

here I'm just tapping on the arrow

Jochem•2y ago

Like Joao asked, what's your use case? what are you trying to accomplish?

glutoniumOP•2y ago

wdym by that okee so lemme tell you as u can see in the video, images slide in both way left to right right to left now , what I want is, when the last image comes to the center of the screen i want the right arrow to disappear I've managed to do it using click event which works fine when clicked but i need to make the same while sliding with touch so when I'm sliding the images with touch if i know the last image's coordinate in real time and i have the coordinate of the center i can use if condition to match their coordinate and when the coordinate of the image is equal to the coordinate of the center meaning the image is now on the center,, i can just make the arrow disappear so that's why i need to store the coordinate of the last img while it's moving when images r sliding @jochemm

Jochem•2y ago

can you paste your code? in a code block please, start with ```js and end with ```

glutoniumOP•2y ago

basically like how u track the cursor but in this case it's just an element k

Jochem•2y ago

I really don't think you need to do that just to turn that arrow off

glutoniumOP•2y ago

let slideRight =
  document.getElementById("right");

let slideLeft =
  document.getElementById("left");

let images =
  document.getElementsByTagName("img");

let imageContainer =
  document.getElementById("img-container");




slideRight.addEventListener("click", () => {
  imageContainer.scrollBy({
    left: 325,
    behavior: "smooth"
  });
  
  slideLeft.style.display = "block";

  let end = images[7].getBoundingClientRect().x;

  if (end == 379.6333312988281) {
    slideRight.style.display = "none";
  };

});



slideLeft.addEventListener("click", () => {
  imageContainer.scrollBy({
    left: -325,
    behavior: "smooth"
  });

  slideRight.style.display = "block";

  let start = images[0].getBoundingClientRect().x;

  if (start == -270.477783203125) {
    slideLeft.style.display = "none";
  };

});

let slideRight =
  document.getElementById("right");

let slideLeft =
  document.getElementById("left");

let images =
  document.getElementsByTagName("img");

let imageContainer =
  document.getElementById("img-container");




slideRight.addEventListener("click", () => {
  imageContainer.scrollBy({
    left: 325,
    behavior: "smooth"
  });
  
  slideLeft.style.display = "block";

  let end = images[7].getBoundingClientRect().x;

  if (end == 379.6333312988281) {
    slideRight.style.display = "none";
  };

});



slideLeft.addEventListener("click", () => {
  imageContainer.scrollBy({
    left: -325,
    behavior: "smooth"
  });

  slideRight.style.display = "block";

  let start = images[0].getBoundingClientRect().x;

  if (start == -270.477783203125) {
    slideLeft.style.display = "none";
  };

});

Joao•2y ago

so that's why i need to store the coordinate of the last img while it's moving when images r sliding

You don't need to store the coordinates. Just use getBoundingClientRect to get them. You can then just check if x + element width is within viewport. To track the element you can use intersection observer, or instead of using click event use touch event, which I think works for both touch screens and clicks

glutoniumOP•2y ago

I didn't know about touch events

Joao•2y ago

Try that first, it's the simplest change and it may be enough?

Jochem•2y ago

what's the HTML look like? (this is why we ask for an example in codepen in the #How To Ask Good Questions thread btw 🙂)

glutoniumOP•2y ago

but let's say, i used getBounding for touch events now, it'll get the coordinate the moment i touch but when i slide and the ing moves, it won't again get the coordinate will it? k wait

Joao•2y ago

It returns the coordinates at the time you call it, so if the element moved between calls, the coordinates will be different.

glutoniumOP•2y ago

index.html

glutoniumOP•2y ago

index.txt

Joao•2y ago

Ah, wait, you want the coordinates when the transition ends?

kirin-808•2y ago

I'd vote for an IntersectionObserver (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) on the :last-child / :first-child so that it stays dynamic, and let the browser worry about the coordinates

Intersection Observer API - Web APIs | MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

glutoniumOP•2y ago

well, as I said, in real time means it keeps updating as the element moves getting the coordinate at the start or end means we r getting it in a stationary position u know about the cursor track ryt?@joao6246 clientX and clientY for tracking mouse position

Joao•2y ago

getting the coordinate at the start or end means we r getting it in a stationary position

And that's what you want. Getting the position when the last image is within a specific position.

glutoniumOP•2y ago

it's basically that, BUT , it's not mouse rather an element well, yaa i guess I'm kinda confused here around what i need for what I want

Joao•2y ago

ClientX === getBoundingClientRect (for elements)

glutoniumOP•2y ago

sorry, i didn't get it

Joao•2y ago

To keep things simple, I agree that interserctionObserver is best here

glutoniumOP•2y ago

I'll check em out tnx xD okeee I'll check it out

Joao•2y ago

You set it up once and it will react when the element you tell it to observe comes within view. Which is essentially what you are after here.

glutoniumOP•2y ago

okeey gotcha tnx for your valuable times guys appreciate it very much

kirin-808•2y ago

Super powerful API to play with and pretty simple to implement, too

glutoniumOP•2y ago

okiii tnx

Joao•2y ago

Are you adding new elements dynamically as user scrolls?

glutoniumOP•2y ago

nope

Joao•2y ago

Good, nevermind then 🙂

glutoniumOP•2y ago

hihi k I'm very new to ks js* so hard to both understand and explain sorry for my inconvenience

Joao•2y ago

That's why this forum exists!

kirin-808•2y ago

hey, no worries ! JS is awesome (and wait when you get to Typescript, it gets even better!) 😄

Jochem•2y ago

I think you can do it with just element.scrollWidth, but I'm not 100% sure how your scroll thing is set up with CSS, can you add that too?

glutoniumOP•2y ago

ahaha...k well there's basically 8 images, they r inside a div with a fixed height and width and then i havw used display : grid; grid-template-columns : repeat (8 , 1fr); to put those image in a row and the simply overflow-x : scroll

Jochem•2y ago

@ʙᴏᴏʙ 2.0 I've made a version using nothing but the scroll event listener and the basic properties on the container https://codepen.io/jochemm/pen/zYJvvBe?editors=0110

Jochem

CodePen

Scrollwidth to detect end

...

Jochem•2y ago

you'll have to use some imagination for the layout and the fancy buttons, I skipped those cause they weren't the point of the question. If you want something closer to what you had, share a codepen that I can edit 🙂

glutoniumOP•2y ago

well, appreciate your effort but that wasn't that i was actually looking for say, when the last img is on display u want your button to have a grey background so as you're scrolling the button is normal but the moment the last image gets displayed the Button turns grey How'd you do that well, I've been looking about intersectionObserver seems like that might solve it

Jochem•2y ago

What happens when you detect you're at the end is up to you, right now I'm adding a class that hides the button, but if you want that class to make it gray you can just replace display: none; with color: silver;

glutoniumOP•2y ago

this is what I came up with by far

glutoniumOP•2y ago

Jochem•2y ago

I'm using a button element, so you could also set the disabled property to true instead of adding a class, but because you're using divs with fontAwesome icons, I didn't think that would be as handy

glutoniumOP•2y ago

well rn in your code the button doest change or disappear when i hit the last image tho

Jochem•2y ago

it's not snapping so you have to scroll all the way to the end yourself. It'll disappear then it's just a proof of concept, I'm not going to rebuild the entire thing just to demonstrate one small bit but if what you have works for you, that's fine too 🙂

glutoniumOP•2y ago

hmm..okeey gotcha i think I'll use intersectionObserver that's seems like much less work and would also just work for both click and touch but tnx anyways

Jochem•2y ago

👍

Unknown User•2y ago

Message Not Public

glutoniumOP•2y ago

thank you very much really really appreciate the effort 🫂 i will surely try this when I'm free u understood everything here except the

coordinatesElement.textContent = `(${x}, ${y})`;

coordinatesElement.textContent = `(${x}, ${y})`;

can u what that does that's prolly cause it's generating random numbers each every 3 seconds and calling updatePosition(); every 100ms i guess and the displaying current position in console

Unknown User•2y ago

Message Not Public

glutoniumOP•2y ago

ya it helped me tnx ^ ^ yaa okeey gotchaa tnx🫂

Unknown User•2y ago

Message Not Public

Gaming

Programming

track element in real time