Insertion scene webpage

Saola Animate Support Questions
1

I created a scene and when I insert it into a page I have the following result. What’s wrong ?

Capture
Capture860×519 20.3 KB

On the stage the buttons are at the bottom and on the web page they are at the top, and the scene is displayed on the text
Capture1
Capture1993×738 76.9 KB

2

Hi,

I guess that you copied the output HTML and pasted into your web page but missing some styles.
If so please make sure that the container of the HTML5 output must have position and size set, for example:

<div id="container_id" style="position: relative; width: 100%; height: 50%;"></div>
<script type = "text/javascript">
  (function(Saola) {
    var li = {"color":"#2090e6","density":93,"diameter":60,"range":1,"shape":"oval","speed":22};
    Saola.openDoc('HTML5_data_file.js', 'container_id', {paused:true, preloaderOptions: li, center: 'both', autofit: true});
  })(AtomiSaola);
</script>

You can also use iframe to embed the HTML5 output into your web page. It’s more simple than inserting directly like this.

Regards

3

I had glued the elements as you indicated in the screenshots. On the other hand I tried the iframe tag but the height in flexible mode is complex

4

Hi,

I’m sorry but I can’t help if you don’t show the code of your page or give me access to it.
Regardless of what you use as the container: div tag or iframe tag, you must set its height.
If the content width/height ratio is fixed, you can use padding-bottom CSS for the container to maintain its ratio.
If the relation between content width and height is more complicated, you can use script to update container height.

Regards

5

I tested the following code and it works. I continue to test Saola Animate.
Thank you.

iframe{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 0; } #preserveRatio{ position: relative; width: 100%; height: 0; padding-bottom: 75%; }

and in the body :