CodePen

HTML

            
              <div id="circle"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #circle {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* http://css-tricks.com/forums/discussion/24750/can039t-make-circle-to-move */
var circle = document.getElementById("circle"),
        computedStyle = window.getComputedStyle(circle, ""),
        bodyWidth = document.body.clientWidth,
        speed = 10,
        step = 2,
        circleStop = bodyWidth - circle.clientWidth;

    function moveCircleLeft() {
        var currentMarginLeft = parseInt(computedStyle.marginLeft);
        timerLeft = setInterval(moveLeft, speed);

        function moveLeft() {
            currentMarginLeft += step;
            if (currentMarginLeft < circleStop) {
              circle.style.marginLeft = currentMarginLeft + "px";
            } else {
              clearInterval(timerLeft);
            }
        }
    }

    window.addEventListener("click", moveCircleLeft, false);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................