Home › Forums › JavaScript › Can’t make circle to move
- This topic is empty.
-
AuthorPosts
-
May 9, 2013 at 6:48 am #44649KuzyoParticipant
Hi guys.
I now learning about getting current style of element and based on that want to make circle move, but can’t. Console don’t showing any errors and i can’t detect where is problem. Here is my script http://codepen.io/Kuzyo/pen/lFeya
Thanks for the help.May 9, 2013 at 7:27 am #134527CrocoDillonParticipant‘window = addEventListener(“load”, moveCircle, false);’ should be either `window.addEventListener(“load”, moveCircle, false);` or `addEventListener(“load”, moveCircle, false);` (doesn’t matter, still works)
You overcomplicate things, `currentMarginLeft = circle.style.marginLeft;` is a lot easier.
Anyway the problem is you should set `marginLeft` to a string that ends with a unit, like ‘px’. Try `currentMarginLeft += step;` and `circle.style.marginLeft = currentMarginLeft + ‘px’;`
May 9, 2013 at 7:53 am #134529KuzyoParticipantHi, CrocoDillon.
Why I made so with currentMarginLeft, because read this>The properties on the style object are only the styles applied directly to the element (e.g., via a style attribute or in code). So `.style.marginTop` will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).
To get the current calculated style of the object, you use either the currentStyle property (Microsoft) or the getComputedStyle function (pretty much everyone else).Made how you said but still don’t work http://codepen.io/Kuzyo/pen/lFeya
Sorry for bothering you ((
May 9, 2013 at 7:55 am #134530CrocoDillonParticipantMy bad, computedStyle gives back the margin as string including ‘px’.
var currentMarginLeft = parseInt(computedStyle.marginLeft);
May 9, 2013 at 7:58 am #134531CrocoDillonParticipant> The properties on the style object are only the styles applied directly to the element.
You’re right :)
May 9, 2013 at 8:22 am #134534KuzyoParticipantEverything works fine) Thanks again. Can you explain why it doesn’t work in this way
circle.style.marginLeft = currentMarginLeft + step + "px";
May 9, 2013 at 8:29 am #134535CrocoDillonParticipantYou arent updating currentMarginLeft so it always stays at 0, you are setting marginLeft to ‘2px’ the whole time.
You can always use `console.log(…)` to quickly debug things. Like `console.log(currentMarginLeft);` would tell you it stays 0.
May 9, 2013 at 8:41 am #134537KuzyoParticipantThanks a lot. But maybe I will come with this circle again )
May 12, 2013 at 7:47 am #134835KuzyoParticipantHi guys, I don’t want to start new discussion and decided to continuing in the same. After circle started to move( with your greate help) and now i want it to stop. This is snippet of my function
var circle = document.getElementById("circle"),
computedStyle = window.getComputedStyle(circle, ""),
bodyWidth = document.body.clientWidth,
speed = 10,
step = 2,
timerLeft;
function moveCircleLeft() {
var currentMarginLeft = parseInt(computedStyle.marginLeft);
if (currentMarginLeft < bodyWidth) {
timerLeft = setInterval(moveLeft, speed);
} else {
clearInterval(timerLeft);
};
function moveLeft() {
currentMarginLeft += step;
circle.style.marginLeft = currentMarginLeft + "px";
}
}
window.addEventListener("click", moveCircleLeft, false);
I think the problem in condition **(currentMarginLeft < bodyWidth)** Thanks for the help and I really red with shame
May 12, 2013 at 8:27 am #134838KuzyoParticipantHi @Mottie!
Thanks, but why this condition doesn’t work
if (currentMarginLeft < bodyWidth) {
timerLeft = setInterval(moveLeft, speed);
} else {
clearInterval(timerLeft);
};‘ for me it seems: if currentMarginLeft < bodyWidth start Interval if not stop Interval
May 12, 2013 at 9:46 am #134841 -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.