-1

I am trying to use this a anime.js file as a background to a website banner. Here

<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <!-- Animation Script -->
    <!--
      <script>
        document.getElementById("banner").innerHTML = '<object type="text/html" data="animation/index.html"></object>';
      </script>
    -->
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>

I am loading the script like this but the problem is it replaces and loads the inner div completely. How should I make it load on the entire section? I also want the inner div intact.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Rawshn
  • 37
  • 13

1 Answers1

1

The issue is because you're completely overwriting the HTML of the #banner element, and completely wiping out its existing contents.

To fix this create the object element separately, then use appendChild() to add it to the #banner element:

var obj = document.createElement('object');
obj.type = 'text/html';
obj.data = 'animation/index.html';
document.getElementById('banner').appendChild(obj);
<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Hi, thank you for your answer but it only solves half of my problem. Appending this html adds the file below the inner div, I want to load the inner div on top of the html file. The animation loads below the div not behind it. – Rawshn Aug 11 '18 at 00:42
  • Simply put I want to overlap these divs. – Rawshn Aug 11 '18 at 00:48
  • In that case this is the HTML and JS you need to use, you just need to use CSS to set `#banner` to `position: relative` and both of the contained elements to `position: absolute; top: 0` – Rory McCrossan Aug 11 '18 at 07:39