We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

HTML element move to cursor position

Home › Forums › Programming › HTML element move to cursor position

Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • 2020-08-13 at 11:58 am #31498
    preferens.se
    Customer

    I’m trying to make a small textbox (div block) show up next to the cursor when hovering over a 3D object in the application.

    I bet there is multiple ways of solving this. I’m currently using webflow to design the HMTL interface.

    I tried having the textbox always follow the cursor by using a page trigger in webflow. However the Verge3D embedded window apparently does not count as the viewport. The position of the textbox is only updated when I hover over other HTML elements.

    Adding a div block in the background covering the entire viewport would solve that problem, but that would make it impossible to interact directly with the Verge3D application.

    I’ve tried to use the “get event property” puzzle to get the coordinates of the cursor, but I have no idea how to use that information to update the position of the textbox.

    2020-08-13 at 1:17 pm #31501
    Yuri Kovelenov
    Staff

    Hi,

    preferens.se wrote:

    I’ve tried to use the “get event property” puzzle to get the coordinates of the cursor, but I have no idea how to use that information to update the position of the textbox.

    In order to update the position of an element, you can set its top and left CSS properties using the puzzle set style.
    You might do it inside the every frame puzzle.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-13 at 3:36 pm #31508
    preferens.se
    Customer

    I still can’t get it to work. I’ve made a test application here called “drag-move”.

    I have (quite naively) simply placed a
    [Set style top to] with a [get event property pageY] as input for element “textbox” in parent doc
    and a [Set style left to] with a [get event property pageX] as input for element “textbox” in parent doc
    inside a [every frame do] puzzle. This does nothing.

    Please open the .zip and see what I’m missing.

    2020-08-13 at 3:57 pm #31510
    Yuri Kovelenov
    Staff

    Sorry I was not clear and also made a mistake. Here is how it should be:

    attached the Puzzles’ save file too:

    Attachments:
    You must be logged in to view attached files.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-14 at 6:50 am #31528
    preferens.se
    Customer

    Brilliant! It works!

    I’ll probably be using this in every project moving forward so thank you so much.

    I added a little math to place the textbox next to the cursor. Otherwise it prevents the user to interact with the application. I also set it to only appear when the cursor hovers over the cube.

    2020-08-14 at 7:43 am #31535
    Yuri Kovelenov
    Staff

    Glad it helped! And yes, with that offset it is now much better! :good:

    Chief 3D Verger | LinkedIn | Twitter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.