Home/ Questions/Q 8560357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T16:15:29+00:00

I’m using DOJO to create some animations. I’m trying to animate an h1 inside

  • 0

I’m using DOJO to create some animations. I’m trying to animate an h1 inside a section when the mouse is hovering the section.

This does work:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="section">
            <div id="title">Something</div>
        </div>
    </body>

</html>

JavaScript:

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) {
    var section = dom.byId("section"),
        title = dom.byId("title");

    on(section, mouse.enter, function(evt){
        fx.slideTo({
            node: title, 
            top: "0"
        }).play();
    });

    on(section, mouse.leave, function(evt){
        fx.slideTo({
            node: title, 
            top: "200"
        }).play();
    });
});

What I’d like to get working (It doesn’t):

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <section>
            <h1>Something</h1>
        </section>
    </body>

</html>

JavaScript:

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) {
    var section = query("section");

    on(section, mouse.enter, function(evt){
        fx.slideTo({
            node: query("h1",this), 
            top: "0"
        }).play();
    });

    on(section, mouse.leave, function(evt){
        fx.slideTo({
            node: query("h1",this), 
            top: "200"
        }).play();
    });
});

I’m trying to get the h1 element, using query("h1",this), to slide it. All I get is an error in my development tools. I have tried searching for a solution, but I’m unable to find one. How can I resolve this issue?

 Uncaught TypeError: Object [object HTMLHeadingElement] has no method 'getBoundingClientRect'
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that query doesn’t return a node, it returns a NodeList. You can see this in the error, which refers to Object [object HTMLHeadingElement] — this is really an Array-like object (Object [...]) containing a single item, an HTMLHeadingElement.

    You need the DomNode, so the easiest solution is to change this:

    node: query("h1", this)

    to this:

    node: query("h1", this)[0]

    Note this will only work as long as the query returns a valid node. Otherwise, you’ll get an out of bounds error.

    You can see more in the API documentation for dojo/query.

    • 0