When creating a scene in Famous Engine (2015), how can I set the selector? What are the rules?

Question

When creating a scene in Famous Engine (2015), how can I set the selector? What are the rules?

97 Views Asked by louis w At 19 April 2025 at 09:07

So far, I can only attach it to body by default, or if I specify div, the famous-dom-renderer is attached to the first div it finds. How can I set the selector according to class, or id?

var scene = FamousEngine.createScene('the div I am targeting');

Original Q&A

There are 2 best solutions below

louis w On 19 July 2015 at 03:17

Well the next thing I tried worked, so here's the answer: set an id for the div you are targeting create the scene like this:

<div id="scene-target"></div>

var scene = FamousEngine.createScene('#scene-target');

**talves** · Accepted Answer

Any DOM selector (string) value can be passed to the FamousEngine.createScene method.

var scene = FamousEngine.createScene('body');

If no argument is passed to the FamousEngine.createScene method, then it will default to the body DOM element (same as above).

var scene = FamousEngine.createScene();

Using the following HTML, any of the following would be valid.

var scene = FamousEngine.createScene('#top');

var scene = FamousEngine.createScene('.top');

var scene = FamousEngine.createScene('#bottom');

var scene = FamousEngine.createScene('.bottom');

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;

            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: black;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }
          .top {
            color: white;
            height: 50%;
          }
          .bottom {
            color: white;
            height: 50%;
          }
        </style>
    </head>
    <body>
      <div id="top" class="top">This is the top DOM element</div>
      <div id="bottom" class="bottom">This is the bottom DOM element</div>
    </body>
</html>

Use the snippet below to test the above code.

// Famous dependencies
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var clock = FamousEngine.getClock();

// Initialize with a scene; then, add a 'node' to the scene root
var scene = FamousEngine.createScene('#bottom');
var node = scene.addChild();

node.addUIEvent('load');
var myComponent = {
  onReceive: function(event, payload) {
    console.log(
      'Received ' + event + ' event!',
      payload
    );
    if (event === 'load') {
      payload.node.requestUpdate(spinner);
    }
  }
};
node.addComponent(myComponent);

// Create an [image] DOM element providing the logo 'node' with the 'src' path
var el = new DOMElement(node, {
    tagName: 'img'
  })
  .setAttribute('src', 'http://staging.famous.org/examples/images/famous-logo.svg');

// Chainable API
node
// Set size mode to 'absolute' to use absolute pixel values: (width 250px, height 250px)
  .setSizeMode('absolute', 'absolute', 'absolute')
  .setAbsoluteSize(50, 50)
  // Center the 'node' to the parent (the screen, in this instance)
  .setAlign(0.5, 0.5)
  // Set the translational origin to the center of the 'node'
  .setMountPoint(0.5, 0.5, 0.5)
  // Set the rotational origin to the center of the 'node'
  .setOrigin(0.5, 0.5);

// Add a spinner component to the logo 'node' that is called, every frame
var spinner = node.addComponent({
  onUpdate: function(time) {
    node.setRotation(0, time / 500, 0);
    node.requestUpdateOnNextTick(spinner);
  }
});

// Let the magic begin...
node.requestUpdate(spinner);
FamousEngine.init();

// To set perspective
var camera = new Camera(scene);
camera.setDepth(1000);

html,
            body {
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
            }
            body {
              position: absolute;
              -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
              -webkit-font-smoothing: antialiased;
              -webkit-tap-highlight-color: transparent;
              background-color: black;
              -webkit-perspective: 0;
              perspective: none;
              overflow: hidden;
            }
            .top {
              color: white;
              height: 50%;
            }
            .bottom {
              color: white;
              height: 50%;
            }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</head>

<body>
  <div id="top" class="top">This is the top DOM element</div>
  <div id="bottom" class="bottom">This is the bottom DOM element</div>
</body>

</html>

When creating a scene in Famous Engine (2015), how can I set the selector? What are the rules?

There are 2 best solutions below

Use the snippet below to test the above code.

Related Questions in FAMOUS-ENGINE

Trending Questions

Popular # Hahtags

Popular Questions