@h_classen @jonathan together with a talented developer colleague – a bit familiar with Hype – we have solved it I think, hope… (like 97% now); things look and behave as intended. Seems to be stable, robust, tested in popular browsers. No persistent symbol with iFrame or injected code. Another way…
Must say; really, really like how you quickly give hints and help here at this forum!
Will try to help more myself.
Will take a look at the Hype document you posted @h_classen… element.getBoundingClientRect @jonathan…
Can’t post a copy of this client project.
A hint… below is a snippet from the main html file with the code for the main Hype documents, there are two now. One for the ‘guide’ in our case and one for the ‘demo containers’, a scene with an iFrame for each demo to load. (And a bunch of demos, each one a Hype document.)
Sometimes the Hype ‘guide’ document spans 3 scenes, the ‘demoContainers’ stays steady with its iFrame content and that Hype document in a certain state – when a scene change occurs in the Hype ‘guide’ document. In guide mode, a message is sent to the document in the current iFrame… timelines continued… scene changes… etc.
For each demo there is different number of guide steps and different messages needed to be sent to the current demo. Going backwards through the sequence doesn’t work perfectly now…
…so we will take another look at @MaxZieb HypeGlobalBehavior. If time left for this first version, we will use it. Otherwise for next version!
Will restructure this before delivery, anyway… here you get an idea:
(position: absolute, z-indexes - two Hype docs on top of each other. Both of them, a lot of flexible layout settings, layers, layers, timelines. Top one with transparent background.)
<body>
<div class="appMaxSize">
<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:absolute;width:100%;height:100%;overflow:hidden;z-index:2;pointer-events:none;">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?6203"></script>
</div>
<div id="democontainers_hype_container" class="HYPE_document" style="margin:auto;position:absolute;width:100%;height:100%;overflow:hidden;z-index:1;">
<script type="text/javascript" charset="utf-8" src="demoContainers.hyperesources/democontainers_hype_generated_script.js?456"></script>
</div>
</div>
</body>
<script type="text/javascript">
function demoContainerShowNone() {
// Default scene at start for 'demoContainers'.
HYPE.documents['demoContainers'].showSceneNamed('none', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
function demoContainerShowMsituDemo() {
if (HYPE.documents['demoContainers'].currentSceneName() !== 'msitu') {
HYPE.documents['demoContainers'].showSceneNamed('msitu', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
}
function doSignInMsituDemo() {
if (HYPE.documents['demoContainers'].currentSceneName() !== 'msitu') {
HYPE.documents['demoContainers'].showSceneNamed('msitu', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
var msituIframe = HYPE.documents['demoContainers'].getElementById('msitu_iFrame').querySelector('iframe');
msituIframe.contentWindow.HYPE.documents['msitu'].continueTimelineNamed('Main Timeline', msituIframe.contentWindow.HYPE.documents['msitu'].kDirectionForward, false);
}
function msituShowPatientDevices() {
if (HYPE.documents['demoContainers'].currentSceneName() !== 'msitu') {
HYPE.documents['demoContainers'].showSceneNamed('msitu', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
var msituIframe = HYPE.documents['demoContainers'].getElementById('msitu_iFrame').querySelector('iframe');
msituIframe.contentWindow.HYPE.documents['msitu'].showSceneNamed('patientDevices_usr_1', msituIframe.contentWindow.HYPE.documents['msitu'].kSceneTransitionInstant);
}
function demoContainerShowFuonKeyAccountsDemo() {
if (HYPE.documents['demoContainers'].currentSceneName() !== 'fuonKeyAccounts') {
HYPE.documents['demoContainers'].showSceneNamed('fuonKeyAccounts', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
}
function doSignInFuonKeyAccounts() {
if (HYPE.documents['demoContainers'].currentSceneName() !== 'fuonKeyAccounts') {
HYPE.documents['demoContainers'].showSceneNamed('fuonKeyAccounts', HYPE.documents['demoContainers'].kSceneTransitionInstant);
}
var fuonKeyAccountsIframe = HYPE.documents['demoContainers'].getElementById('fuonKeyAccounts_iFrame').querySelector('iframe');
fuonKeyAccountsIframe.contentWindow.HYPE.documents['index'].continueTimelineNamed('Main Timeline', fuonKeyAccountsIframe.contentWindow.HYPE.documents['index'].kDirectionForward, false);
}
</script>
.