Can't get simple example to work

Question

Can't get simple example to work

johnsonjo4531 opened this issue 8 years ago · 1 comments

I imported the file in the dist folder on a jsbin and I get the following error in it:

in-view.min.js:6 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

This is my JS:

function loaded () {
  inView('.foo')
    .on('enter', el => {
      console.log("it's here")
    })
    .on('exit', el => {
        console.log("here")
    });
}

and this is my HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://rawgit.com/camwiegert/in-view/master/dist/in-view.min.js"></script>
  <title>JS Bin</title>
</head>
<body onload="loaded();">
  <div></div>
  <p class="foo">foo</p>
</body>
</html>

Any suggestions? Did I do something wrong?

Answer 1 · 2016-10-21T14:55:41.000Z

@johnsonjo4531 You're getting that because in-view tries to register a MutationObserver on document.body, which doesn't exist yet when in-view is loaded in the head. You can fix that by loading in-view at the bottom of the page, like so:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onload="loaded();">
  <div></div>
  <p class="foo">foo</p>
  <script src="https://rawgit.com/camwiegert/in-view/master/dist/in-view.min.js"></script>
</body>
</html>

Thanks for bringing this to my attention!