Inserting Saola DIV inside Another DIV Issue

Problem:
When I put the saola div/js inside another div… the canvas doesn’t show up.

CODE THAT DOESN’T WORK

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
		<link href="css/bootstrap.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
   	
<!-- STYLESHEETS -->
<link href="css/fluidlayout.css" rel="stylesheet" type="text/css">
<link href="css/format.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">


<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/open-sans-condensed:n3:default;lekton:n4:default.js" type="text/javascript"></script>
		
<!-- SEO ENTRIES -->
<title>Blender 3D Beginner's Guide | Blender 3D Models, .blend Format, www.blender.org</title>
<meta name="description" content="Beginners Guide to Blender 3D, links and 3d models">

<style>
		html {
			height: 100%;
		}
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>

<script type="text/javascript" src="slplayer.js"></script>


</head> 
<body>

<div id="container-fluid" class="clearfix"></div>

<div id="contentWrapper">
	<div id="content">
      <div id="CjjSmUKC" style="position: relative; height: 100%;"></div>
	<script type = "text/javascript">
	(function(Saola) {
	var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
	Saola.openDoc('MobileTest.js', 'CjjSmUKC', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
	</script>

    </div>
   </div>

</div>

<!-- BOOTSTRAP -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script><!-- BOOTSTRAP -->
  </body>
</html>

If I REMOVE STYLES FROM DIV’S - STILL DON’T WORK

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
		<link href="css/bootstrap.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
   	
<!-- STYLESHEETS -->
<link href="css/fluidlayout.css" rel="stylesheet" type="text/css">
<link href="css/format.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">


<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/open-sans-condensed:n3:default;lekton:n4:default.js" type="text/javascript"></script>
		
<!-- SEO ENTRIES -->
<title>Blender 3D Beginner's Guide | Blender 3D Models, .blend Format, www.blender.org</title>
<meta name="description" content="Beginners Guide to Blender 3D, links and 3d models">

<style>
		html {
			height: 100%;
		}
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>

<script type="text/javascript" src="slplayer.js"></script>


</head> 
<body>
<div>
<div>
	<div>
      <div id="CjjSmUKC" style="position: relative; height: 100%;"></div>
	<script type = "text/javascript">
	(function(Saola) {
	var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
	Saola.openDoc('MobileTest.js', 'CjjSmUKC', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
	</script>

    </div>
   </div>

</div>

<!-- BOOTSTRAP -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script><!-- BOOTSTRAP -->
  </body>
</html>

ONLY When I completely remove my DIV;'s will it work

Seems, you can’t put the saola DIV inside another DIV

Saola Animate version:
2.6

OS:
Win10
Notes:

Okay… decided to put it in an iframe… that works.

However, I still get the auto fit… see other post I made concerning this issue.

https://talk.atomisystems.com/t/responsive-just-the-width/2119/5

Okay… solved my own issue.
Bootstrap has some code that helps with responsive VIDEO & IFRAMES.

HERE IS MY GOOD CODE

INDEX.HTML

<div class="video-container">
    <iframe src="MobileTest.html" scrolling="no" frameborder="0" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"></iframe>
</div>

CSS

* =============== VIDEO - IFRAME ================= */
/* for responsive iFRAMES - See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.hSQnfUZe.dpuf */
.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;

	background-color: #DD1518;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Still… I would like to know why I can’t do the canvas width:100%; and Height:auto; and still have the"autofit" type of effect except the height can go out of the view-port and a scroll bar displays

See my other thread

Hi Frank,

The container div can’t expand to show Saola Animate content. You must set size, and position other than static (e.g relative, absolute) for the container.
For more details, please see this thread: Using Saola Animate with a website page builder

Regards

Okay… I finally got it working okay now. I used the suggested code to the other thread.

So, now, How can I put this in my own DIV without using the iFRAME??

I wonder if Bootstrp is cancelling the canvas out.

Trying to embed the canvas in my own DIV’s without using iFRAME

The below code does show the scrollbar based on canvas W&H, but the canvas takes on the body’s background color and is not showing my canvas’ BG color or star element in the middle of page.

WHY?

<div id="container-fluid" class="clearfix">

	<div id="contentWrapper">
	<div id="EiyrMXdW" style="position:relative;width:100%;padding-top:149%;overflow:hidden;" ></div>
		<script type = "text/javascript">
		(function(Saola) {
		var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
		Saola.openDoc('socialmedia.js', 'EiyrMXdW', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
		</script>
</div>
</div>

Playing elimnation…

This code works just for AutoFit with no Bootstrap code

<body>
	<div id="EiyrMXdW" style="position: relative; height: 100%;"></div>
		<script type = "text/javascript">
		(function(Saola) {
		var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
		Saola.openDoc('socialmedia.js', 'EiyrMXdW', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
		</script>
 </body>
</html>

If I add my bootstrap… it breaks it and doesn’t work

<body>
	<div id="container-fluid" class="clearfix">
	<div id="EiyrMXdW" style="position: relative; height: 100%;"></div>
		<script type = "text/javascript">
		(function(Saola) {
		var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
		Saola.openDoc('socialmedia.js', 'EiyrMXdW', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
		</script>
</div>

  </body>
</html>

So, Bootstrap is one problem

Hi Frank,

Can you please share a live sample (with bootstrap) so that I can check?

Regards

Here is a test project with bootstrap

test.zip (265.2 KB)

Hi Frank,

Your container div ( #EiyrMXdW) has zero height so you don’t see anything.
You must set CSS for it and/or its parent div so that it has a non-zero size.
For example, you can set its padding-bottom as below:

<div id="container-fluid" class="clearfix">

  <div id="EiyrMXdW" style="position: relative; padding-bottom: 149%;"></div>

  <script type = "text/javascript">
  (function(Saola) {
  var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
  Saola.openDoc('testproject.js', 'EiyrMXdW', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);
  </script>

</div>

Regards

Okay… that works.

I did try the padding-top… but that didn’t work.
It only works with the iframe.

Thanks