How to translate text to relative position with DOJO?

Question

Let's say we have a h1 text, and we want to move it with DOJO to a new position, with a translation animation. We want the new h1 to have the same y coordinate (height from the top), but moved 200 pixels to the right.

fx.slideTo should do the job:

var greetingNode = dom.byId("greeting");
var obj = domGeom.position(greetingNode, true);
fx.slideTo({
    node: greeting,
    top: obj.y, //pseudocode; obj[1]? obj.Y?
    left: obj.x + X //pseudocode; obj[0]? obj.X?
}).play();

I can't manage to access obj correctly. Also, if I print the text coordinates, it appears they are x:8 and y:21.43 periodic. Could you please enlighten me about this?

ps: html.coords would work perfectly, but it is deprecated, and DOJO documentation suggest using dojo.position instead.

Complete code here:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>

<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>            

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greeting.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/

        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);

        fx.slideTo({
            node: greeting,
            top: ? //works with coords.y
            left: ? //works with coords.x + 200
        }).play();
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div>
</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:01

I don't see any problem with what you are doing. The result you get x: 8 and y :21.43 are the default margin set by the browser. Try to reset it to 0px and that clear you issues.

HTML default body margin

Also if you dont want the height to change then dont update the top value in the fx.slideTo.

Below is the updated sample:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
  <style>
    body, h1{
      margin:0px
    }
  </style>
<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

<!-- load Dojo 
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>       -->     

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greetingNode.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/
        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);
      
        fx.slideTo({
            node: greetingNode,
            //top: obj.y, //works with coords.y
            left: obj.x + 200 //works with coords.x + 200
        }).play();
      
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div> 
</body>
</html>

Indeed, it works with body and h1 margin at zero. But what if I want to translate an element that doesn't have margin: 0? Without margin 0, try to add a "alert(JSON.stringify(obj));" immediately after the "var obj" declaration. You will notice that the h1 text is initially in one position, and then it JUMPS to another position before starting the translation effect. Why is that? Let's say I want to translate an element which has top margin: 50px and I can't set it to zero. Thank you for your help. — noobsharp, Jan 23 '17 at 17:15
As I mentioned, If you are not setting any margin, it would have default margin defined by browsers. It would be good, if you are in control of that. Secondly, the `position` will be changed from `relative` to `absolute`, which will cause it to jump. so make sure you are setting it to `absolute` before and you have it to be where you want it. — T Kambi, Jan 23 '17 at 17:26
It appears to me that slideTo method should be named *slideBy*, because technically, "slide to" suggest that we have to specify a new point with coordinates x,y, that is why I set top: obj.y. However, doing that will translate the item vertically as well. Anyway, as you said, **setting** `margin: 0` **works**, but I found that just giving `position: relative` to `h1` do the job as well, **without interfering with the position of the other html dom elements**. Thanks! — noobsharp, Jan 24 '17 at 08:42

How to translate text to relative position with DOJO?

1 Answers1