How can I get the position of an element using Velo?

Ask the community
, , ,
1

How can I get the position of an element using Velo?

Wix Editor, Velo

I want to get the position of a vector element and a button relative to the window using Wix Velo. I tried the following code:

let element = $w(‘#vector1’);
let rect = element.getBoundingClientRect();

However, Any guidance or suggestions would be appreciated!

2

I don’t think such property is exposed in Wix
What are you trying to achieve with it?

3

Hi, Jawher_KASSAS !!

Would this API be useful? :thinking:

https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/get-bounding-rect

4

Hi DeanAyalon,
I created an HTML embed that moves with the scroll of the window.
Then, I want this element to stop scrolling when it reaches the position of the Vector element.
To keep it properly responsive on all screens, I need to get the position of the Vector element relative to the window

5

Hello onemoretime,
The getBoundingRect method from wixWindowFrontend is used to get information about the window, document, and scroll position,
not about a specific element on the screen.
I’m trying hard to find a solution :sweat_smile:

7

Thank you, Code_Wizard! Any help with using getBoundingRect() to get the element’s position and how to implement it would be greatly appreciated

9

I’m not very familiar with them, but after reading the Wix API documentation, I found that getBoundingRect() is used to get information about the window, document, and scroll. I’m familiar with JavaScript, but this is my first time using the Wix API. I’m really enjoying it, but there are many challenges. I’m trying to find some ways

11

I am assuming the trick here is to get the windows scroll position with the API and then stream that in a postMessage to the html element?

12

Hello Mark_Hunte,
The goal is not to retrieve the window’s scroll position directly, but rather to determine an element’s position within the window and send it using a post message

13

The Code_Wizard,
I can’t see your comments. Could you reach out to me via LinkedIn, please?

https://www.linkedin.com/in/jawher-kassas

14

Three things, its Hunte :grinning:

Are you Using Studio or Editor/classic

Is the Vector element on the page or inside the iframe

15

Sorry, Hunte :blush:
Actually, I’m using Wix Studio
and the element is on the page

16

Great,

Note I cannot test this myself as I do not have a premium site to do it on.

Select the Element and In the code IDE, give it a custom class Name.

Publish.

Now go to your Dashboard > Settings

Right down the bottom , you will see Advanced > Custom Code.

Paste this snippet in as the code and set it to Body -End.

( replace the. “.youClassName”. with your actual class name

    <script>
 
function getElementPosition(element) {


    const rect = element.getBoundingClientRect();
    return {
        top: rect.top,
        left: rect.left,
        bottom: rect.bottom,
        right: rect.right
    };
}

// Example usage
const element = document.querySelector(".youClassName");
console.log(element)
const position = getElementPosition(element);

console.log("Top:", position.top);
console.log("Left:", position.left);
console.log("Bottom:", position.bottom);
console.log("Right:", position.right);


</script>

If that works you should see the position details in the console. From there you just need to write the code to suit your needs.

17

Very nice! I will test this and let you know how it’s doing later
Thank you,Mark I appreciate your help!

1 Like
18

Lol, you are welcome.
Best regards Mark.

1 Like