Hi guys!
I wrote this code:
https://pastebin.com/cHfwEZB8
when I click "Movement" button, the element would have to start from the position in which it is now, and he have to go on right.
But when I click the button, the element teleports to another point before starting to move. Can you tell me why?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (5)
So, first we should start off by looking at why that
img
element appears where it appears in the first place:You position the element relatively, like you said, and tell it to go down 50px and left 450px from where its natural position on the DOM is.
Next, we look at what happens when you click the button:
When you click the interval, you capture the value of
Date.now()
, and then set an interval that calculates the time that has passed every 20ms and updates the style attribute in your HTML to make theright
attribute equal to whatever amount of pixels equals to the time that has passed.Note that inline HTML styling has a much higher specificity than the ID Selector you initially used in your CSS to set the
img
element's position. So, when the interval callback runs for the first time and sets theright
property in the inline style attribute to whatever number of pixels represent the time passed so far, it overrides the ID selector in your CSS.Suddenly, the
right: 450px;
you put in the CSS doesn't matter anymore. The only thing that matters is whatever amount of pixels is being indicated in your inline style attribute. When this happens, the element pops back over to near where its natural DOM position would be, because those 450px have been reduced to...whatever amount of time has passed, right after the button is clicked. It then increases every 20ms when the interval is run again, pulling it back toward where it originated.EDIT:
Note that if we change our original styling of
#element
to be:The element doesn't teleport at all - it just starts moving to the left. This is because the element is starting from the default value of
right: 0;
, and so when that value begins ticking up when the button is clicked, there's no jarring teleportation when that450px
is overridden.but I want that it start from the point that I set, not from 0.
Difficult for me to test because I'm away from home, but if you're looking to check what the CSS value is, you could use
getComputedStyle
.Or, alternatively, instead of declaring the
right
attribute in your CSS, just declare it in your HTML inline if that'll be the result anyways.You can then just reference that value with
element.style.right
to do the same addition.Smarter might be to use a keyframes animation that'd be exclusively in CSS. I'd check out this page: developer.mozilla.org/en-US/docs/W...
You can then toggle the
element-slide
class on theimg
element as needed.Please review the sidebar and restructure your question/title. The #help tag will be removed in 24 hours if not done.
I'm curious whether the original post has been edited since you placed this comment? If not I think you need to be a little more specific about how it doesn't meet the criteria. From what I see the OP has provided more than enough info for an answer to be provided (in fact someone has done so already) and surely that is the intent of the channel?
One piece of feedback regarding your feedback: since I accessed the post from the main channel I do not see the sidebar content you speak of. That might be the case for the OP also. And 24 hours is not a reasonable amount of notice IMO.
It's also worth noting that the channel posting guidelines are not necessarily obvious when writing a new post: e.g. from the main channel you have to explicitly click the "view rules" button to see them (it might be better to automatically show them if the #help tag is applied).