i want to move this to the end of the orange block. how should i do that?

note: with JS i can change width of the orange block. So the pointer has to be at the end of the orange block. how should i do this? https://codepen.io/avinash-tallapaneni/pen/ExRomwX
14 Replies
b1mind
b1mind2y ago
post with right: vs trying to calc it from the left
glutonium
glutonium2y ago
that might work unless it's some sort of animation
b1mind
b1mind2y ago
Because its relative parent is the bar you should be able to just have a hard value and it will move with the bar.
Avinash
Avinash2y ago
i already tried with "right: 50 rem " but its moving only a few cm and not reaching the end of the orange bar yeah this one has animation in it @ʙᴏᴏʙ 2.0
glutonium
glutonium2y ago
u need the text to move with the orange block? does the user has any control over the block? or anything that user will do, will tht have any effect on the animation asking cause if not then u can just give the same animation keyframes to both of the text and blobk else u might need to use js
Avinash
Avinash2y ago
yes the text has to move with the orange bar. it should point out the scaled values, which i did in js. i can change the orange bar width in js but the text is not following. i did something yesterday in a standalone project , it was working file but when i implemented it in this project i ran into this issue
b1mind
b1mind2y ago
50rem? more like it just needs -4rem? or you could calc the size of half the tooltip
Avinash
Avinash2y ago
yeah i dont know whats wrong, my brain is mushy thinking about it
glutonium
glutonium2y ago
well I'd just tell you to get the coordinate of the right end of the orange block and code it so the texts coordinate is always same as the right end of the orange block so the text will always move along with the orange block gd thing it will work regardless of anything but I'm more concerned if that's even nessessary
b1mind
b1mind2y ago
b1mind
b1mind2y ago
Also animating width's can be taxing/bad practice just fyi. Some times you can't avoid it for what you want. In this case though I would probably use a proper <progress> element Though that would probably break the relative pos 🤔 so yea maybe not (cause the bar inside progress I don't think you could put a relative on)
Avinash
Avinash2y ago
now its working, when i gave right around 40px it didnt even move 😵‍💫 i gave something like this for animation animation: progress 0.5s ease-in-out forwards; @b1mind its not starting from 0, just moving for existing position
b1mind
b1mind2y ago
Yea I'm just saying in general animating width/height is bad You typically want to use scale/transform, so yea 😄 start/end do not matter.
Want results from more Discord servers?
Add your server