I gave a small preview of the Three.js talk that I will be giving tomorrow night at the BmoreJS Meetup. As usual, there is no substitution for running the demo before live people. I ran through it a dozen times this weekend without technical problems. Tonight, I lost internet and the demo died.
I was able to switch over to tether without too much of a delay, but I want to avoid that tomorrow, if at all possible. I already have the offline version working except for one teeny, tiny bug. Neither the editor or the preview layer show in the ICE Code Editor demo:
I think that this has something to do with the HTML, but what and why I do not know. What I do know is that it works on a very limited HTML page:
<head> <script src="packages/browser/dart.js"></script> <script src="full.dart" type="application/dart"></script> </head>But it does not work on page that is barely more complicated:
<!DOCTYPE html>
<html manifest="editor.appcache">
<head>
<title>code editor</title>
<meta charset="utf-8">
<script src="appcache.js"></script>
<script src="packages/browser/dart.js"></script>
<script src="main.dart" type="application/dart"></script>
</head>
<body>
</body>
</html>The good news that there is not much that I need to remove before I find the cause. And indeed, if I remove the HTML5 doctype declaration on the first line, then everything works just fine. Eventually, I find that I am able to solve this by setting both the HTML and body height's to 100%:html, body {
height: 100%
}If I apply that style to only one of those two, then my ICE container div is again 0 pixels in height. Since just about everything in this app is relatively or absolutely positioned, I can sort of understand the body element being 0 pixels in height. If there is nothing with intrinsic height contained within it, then nothing gives it height. Then again, how the body does not immediately consume the entire viewport is a mystery to me.Also a mystery to me is why setting the
<body> to 100% height does not actually make it 100% of the viewport. It makes very little sense to me to be styling the <html> tag in the first place since it does not represent a physical thing on the screen.But, such is the life of an HTML5 hipster. It works this way, so it must be right.
Anyhow, back in Dart-land, I need to apply these styles only in the Full-screen IDE lite, not in all of the ICE use cases. I could create a full.css stylesheet, but I already have an
_applyStyles() method in the the Full class, which is called by the constructor. I might as well make use of that. I never thought to set anything on the
<html> element before, so it takes a bit of digging to discover that I have to do this with the document.documentElement property:_applyStyles() {
var editor_el = el.query('.ice-code-editor-editor');
document.documentElement.style.height = '100%';
document.body.style.height = '100%';
editor_el.style
..top = '0'
..bottom = '0'
..left = '0'
..right = '0'
..backgroundColor = 'rgba(255,255,255,0.0)';
el.style
..height = '100%'
..width = '100%';
}
}
With that, I have both the <html> and <body> elements styled to 100% height (because they must be) and the editor is working just fine—even in HTML5 documents:
That seems a good stopping point. I may follow up tomorrow with an attempt to test this, but for now I think I will run through my presentation one last time and get some sleep.
Day #779
> Also a mystery to my is why setting the <body> to 100% height does not actually make it 100% of the viewport.
ReplyDeleteMaybe it makes it 100% of the html tag? Or some other crazy sh**. Anyway, running into the same (or very similar) problem, I discovered that CSS3 has two exciting new units: vw and vh, and the meaning is percent of viewport width/height. In my case, I just set the width and height of one particular div to something like 97 vw and 97 vh and called it done. But that was a Chrome-only demo, not sure about other and/or mobile browsers.
Cool! That's new to me as well. Looks like support is pretty limited: http://caniuse.com/viewport-units. Still, that makes all kinds of sense, so it's good to know that it's on the horizon.
Delete