Please have a look at the following:
https://jsfiddle.net/g7ytvevp/1/
<script>
var $hubbe = {};
$hubbe.printelement = function() {
//skapar en varibale $hubbe.div som ett div element
$hubbe.div = document.createElement("DIV");
// sätter ett id newdiv på $hubbe.div
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("style", "background-color:red;")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
//skriver ut $hubbe.div till body
document.body.appendChild($hubbe.div);
$hubbe.move();
}
$hubbe.movex = 0;
$hubbe.newdiv = document.getElementById("newdiv");
$hubbe.move = function() {
$hubbe.movex++
$hubbe.div.style.left = $hubbe.movex + 'px';
setTimeout($hubbe.move, 2000);
}
</script>`
You "move" function wasn't being called because the "onload" event wasn't being fired for that div. The reason for that is mentioned in this post:
How to add onload event to a div element?
UPDATE:
The final version of the animation with descriptive comments.
https://jsfiddle.net/g7ytvevp/9/
var $hubbe = {};
$hubbe.printelement = function() {
$hubbe.div = document.createElement("DIV");
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("style", "background-color:red;")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
document.body.appendChild($hubbe.div);
$hubbe.move();
}
$hubbe.movex = 0;
$hubbe.newdiv = document.getElementById("newdiv");
$hubbe.translateX = 1;
$hubbe.translateY = 0;
$hubbe.move = function() {
var element = $hubbe.div;
var translateX = $hubbe.translateX;
var translateY = $hubbe.translateY;
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
// This method basically gives us the position of all four sides of the "element" on which it is call. It gives us the size as well.
// In the current case we only require the 'current position'
// of our div so we call it over our div and the resultant
// variable 'pos' would contain the respective position of
// each side left / right / top / bottom in it e.g pos.left etc.
// This is needed because we need to keep track of where our div
// currently is, since the translation is based on certain
// conditions e.g if the div reaches the right edge off the
// screen, it should start moving left etc.
var pos = element.getBoundingClientRect();
// We're using the same method to find the dimesions of our
// parent container i.e "body" element, since we need to keep
// track of the condition when our div reaches the edge of the
// screen and that we can only know if we know the co-ordinates
// of the edge.
var domRect = document.body.getBoundingClientRect();
if(pos.right >= domRect.right)
$hubbe.translateX = -1;
if(pos.left <= domRect.left)
$hubbe.translateX = 1;
// This is the line that basically makes the translation along
// X - axis happen. pos.left variable contains the position
// (in pixels) of the left edge of the div object. We add the
// translation factor "translateX" (1 in this case) to it and
// update the position of the div, causing it to move to the left
// or the right. In case of a positive (+1, +2 ... ) it will move
// to the right, for negative, it will go left and for 0, it will
// not move along X - axis. The higher the translation factor,
// the faster the object would translate.
$hubbe.div.style.left = pos.left + translateX + 'px';
// This can be used for vertical translation / movement along the
// Y - axis. It was just for demonstration purposes. For now
// it isn't event being used.
$hubbe.div.style.top = pos.top + translateY + 'px';
setTimeout($hubbe.move, 10);
}
</script>
