# Objects / Button across Scenes

**URL:** <https://talk.atomisystems.com/t/objects-button-across-scenes/2145>\
**Category:** Support Questions\
**Created:** [July 9, 2019, 4:09am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145 "2019-07-09T04:09:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [July 9, 2019, 4:09am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/1 "2019-07-09T04:09:43Z")

</div>

Is there a way to add a button or text (e.g. Menu, Sound player, Content title) that is present across multiple scenes and therefore does not “load” every time there is a transition from one to another?

Thanks!

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [July 9, 2019, 7:26am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/2 "2019-07-09T07:26:11Z")

</div>

Hi Shawn,

You can convert your element to a symbol, and make that symbol show across multiple scenes.  
To show a symbol across multiple scenes, please add the following code to the main document Ready event:

```javascript
function onDocReady(doc, e) {
  // show symbol across scenes:
  // 1. Create dom element for embedding symbol
  var div = document.createElement('div');
  // 2. Set position & size for this dom element
  var divStyle = div.style;
  divStyle.position = 'absolute';  
  divStyle.left = '50px';
  divStyle.bottom = '50px';
  divStyle.width = '200px';
  divStyle.height = '100px';
  // 3. Set z-index so that this dom element is above any scene
  divStyle.zIndex = 1;
  // 4. Append to doc
  doc.dom.appendChild(div);
  // 5. Embed symbol doc to this dom element
  // replace 1 in doc.getResource(1) by the symbol id
  // symbol id can be found by hovering over symbol resource in Resources pane
  var symbolDoc = Saola.openDoc(doc.getResource(1), div, {parentElement: doc, paused: false});
  Saola.topDocs.push(symbolDoc);
}

```

Attached sample: [element\_across\_scenes.saolapack](https://talk.atomisystems.com/uploads/short-url/rtis9JEcD9qYQeHNKvpiDNH9OOS.saolapack) (3.9 KB)

Regards

---

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [July 10, 2019, 12:46am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/3 "2019-07-10T00:46:10Z")

</div>

Thanks – I will give it a shot!

---

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [July 16, 2019, 2:33am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/4 "2019-07-16T02:33:28Z")

</div>

I tried to create my own symbol, a blue box by drawing it on the canvas (and would prefer not having to put the position in the JS code if I don’t have to). I changed the doc.getResource(1) to doc.getResource(3) for my symbol. However, something not right as it remains only on Scene 1 …?

[element\_across\_scenes1.saolapack](https://talk.atomisystems.com/uploads/short-url/4S349PibYuPts77vSrx85FD497S.saolapack) (5.3 KB)

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [July 16, 2019, 2:59am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/5 "2019-07-16T02:59:46Z")

</div>

Hi Shawn,

The symbol element you inserted into Canvas on Scene 1 will only shown in Scene 1, please delete it.  
The symbol element you inserted by using JavaScript will show across multiple scenes.  
You just need to update its position and size in the script so that it can be displayed properly.  
In your sample, you can set its position at 0, its size to 100%:

```javascript
divStyle.left = '0';
divStyle.top = '0';
divStyle.width = '100%';
divStyle.height = '100%';

```

Regards

---

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [July 16, 2019, 4:04am UTC](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/6 "2019-07-16T04:04:31Z")

</div>

Got it – thank you!