Clever Geek Handbook

Nesting famo.us into an existing DOM

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

I want to create a famo.us context and the resulting .famous-container (?) And add it to an existing element.

+3


source to share


1 answer


Quite right. Many people ask about this. As shown in this video by Mike O'Brien on Famo.us , it's pretty easy to do.

Sample jsBin code.

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);

In this case, the DOM has an element with id='famous-app'

. It can be any element in your DOM.

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


To add 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>
+5


source






More articles:


All Articles