Embedding famo.us in existing DOM

Question

Is there a way to create a famo.us container in an existing DOM structure?

What I mean is to create a famo.us context, and the resulting .famous-container (?), and append it to an existing element.

talves · Accepted Answer · 2014-12-08T23:24:32.080

Absolutely. This gets asked a lot. As shown in this video by Mike O'Brien at Famo.us it is pretty easy to do.

Example code on jsBin.

var el = document.getElementById('famous-app');

var mainContext = Engine.createContext(el);

var surface = new Surface({
    size: [200, 200],
    content: "Hello World, I'm Famo.us",
    classes: ["red-bg"],
    properties: {
        lineHeight: "200px",
        textAlign: "center",
      backgroundColor: 'rgba(0,0,0,0.5)'
    }
});

mainContext.add(surface);

The DOM has an element with id='famous-app' in this case. It can be any element in your DOM.

  <body>
    <div>Not Famous here</div>
    <div id="famous-app"></div>
  </body>

To append it to the DOM.

Example 2 code on jsBin.

var el = document.createElement('div');
el.id = 'test';
document.body.appendChild(el);

var mainContext = Engine.createContext(el);

var surface = new Surface({
    size: [200, 200],
    content: "Hello World,<br/> Famo.us-ly added",
    classes: ["red-bg"],
    properties: {
        lineHeight: "40px",
        textAlign: "center",
      backgroundColor: 'rgba(255,0,0,0.5)'
    }
});

mainContext.add(surface);

  <body>
    <div>Not Famous here</div>
  </body>

Embedding famo.us in existing DOM

1 Answers1

To append it to the DOM.