Iframe embed self contained, questions for several html files

designer · November 7, 2019, 4:21pm

Hi Tumult Hype team,

I built about 7 individual hype docs. Each with 8-12 scenes. The 7 html pages are linked to each other using: get url + open new window off. Once I was ready to move the complete projet (index.html) to an iframe webflow I am facing targeting issues. It keeps trying to load pages outside the iframe.

Questions:

How to self contain Hype doc in iframe ? or, should I convert all to 2) one Hype doc to generate one html file ? If so, how do I do that?

Thanks in advance for your help.

Best,

Silvio

JimScott · November 7, 2019, 7:13pm

Hi Silvio!

The following has worked quite well for me in the past and I believe it is the sort of thing You are looking for… and please reference Fig. 1 near bottom for a visual.

<div id="documentaryHolder">
<img id="indicator" src="BHgraphics/indicator.png" width="9" height="9" alt=""/>
<div id="bh_MenuHolder">
  <ul id="mainMenu">
  <li id="prologue" class="liStyle"><a href="BH_01_Prologue/BH_01_Prologue.html" target="iframe_a">Prologue</a></li>
  <li id="evidence" class="liStyle"><a href="BH_02_Evidence/BH_02_Evidence.html" target="iframe_a">Evidence</a></li>
  <li id="anatomy" class="liStyle"><a href="BH_03_Anatomy/BH_03_Anatomy.html" target="iframe_a">Anatomy</a></li>
  <li id="lineages" class="liStyle"><a href="BH_04_Lineages/BH_04_Lineages.html" target="iframe_a">Lineages</a></li>
  <li id="culture" class="liStyleEnd"><a href="BH_05_Culture/BH_05_Culture.html" target="iframe_a">Culture</a></li>
  </ul>
 </div> 
  <iframe src="BH_01_Prologue/BH_01_Prologue.html" name="iframe_a" width="610" height="520" style="border:none;"></iframe>
</div>

The <div id="documentaryHolder"> is the container for everything. img id=“indicator”… in the second line is a small graphic that moves to the selected menu item indicating the menu selection.

Note that “prologue”, “evidence”, “anatomy”, etc, are list items (<li>) in the unordered list (<ul>) that creates the menu bar. The container that the various pages load into is “iFrame_a” (which is the entire content area just below the menu bar) and is the “target”.

So the page “BH_01_Prologue/BH_01_Prologue.html” loads into “iFrame_a” when the menu selection “Prologue” is clicked:

<li id="prologue" class="liStyle"><a href="BH_01_Prologue/BH_01_Prologue.html" target="iframe_a">Prologue</a></li>

Ditto for the rest of the menu items.

Fig.1

designer · November 7, 2019, 9:11pm

Hi Jim,

l try to explore your suggestion, though I am a bit unclear where to add the div id (“documentaryHolder” that in my case would be “container-holder”) I wouldn’t mind some guidance as per the diagram. Many thanks.-
S.

JimScott · November 7, 2019, 10:51pm

Hi Silvio!

This will take me a bit to do and I do not have the time today - but I will get back to You either tomorrow or Saturday.

BTW: The “main container” I outlined above was done in Dreamweaver. The various HTML pages that were loaded into the iFrame were Hype documents.

So the task is to show You how the “main container” set-up would work in Hype - and for that I will need to create a demo Hype Project… it is just a matter of setting up a Hype document and then placing HTML widgets or using innerHTML on a rectangle element inside this Hype document. These elements would load your separate HTML pages into your main Hype document just as my Dreamweaver example above.

designer · November 8, 2019, 12:26am

Hi Jim,
I appreciate your effort in helping me out. I wait, thanks again.
All the best,
Silvio

JimScott · November 11, 2019, 8:38pm

Hi Silvio!

Here is an example translated in full to a Hype based set-up instead of the example on my initial post that featured a Dreamweaver “master” page with Hype documents loaded into an iFrame.

Overview - The User Experience

The code in the innerHTML of the “iFrame Container” rectangle (iFrame) element automatically loads the desired page into itself when the master page opens.

Clicking on a menu item (button) loads the specified URL in the button’s innerHTML into the “iFrame Container”.

Hype Project File : iFrame_Demo Project_JHSv1.zip (352.5 KB)

========================
Intro

The model for this Demo is a “master” (or index) file that acts as the container into which other HTML pages (Hype projects) load into an iFrame on this master page. A Hype project HTML page could have of course many scenes it. Only one scene per HTML Hype project is shown in this Demo .

In the enclosed archive (“iFrame_Demo Project_JHSv1.zip”) there are four Hype Documents & a folder.

Three of the four Hype documents are the sample (dummy) Hype files for uploading remotely (e.g. “iFrame_Demo_Doc1.hype”).

The fourth Hype file is - as its names implies (“iFrame_Demo_Master.hype”) - the master document where all the work is done.

The folder (“iFrame_Demo_Files”) contains the exported example HTML files of the sample dummy files plus the corresponding “.hyperesources” folders.

I have already uploaded these dummy files and “.hyperesources” folders to my server.

They are included here for You to examine. You do not need to do anything with them.

=========================

The “Master” Hype document

When You open the file “iFrame_Demo_Master.hype” You will see a bare bones set-up:

A menubar with (3) links and a rectangle element (“iFrame Container”) that will act as an iFrame (no HTML Widgets used in this demo).

The rectangle has the following code in its innerHTML:

<iframe src="http://wddtrialdemos.businesscatalyst.com/iFrame_Demo_Files/iFrame_Demo_Doc1.html" name="iframe_a" width="500" height="450"></iframe>

Note this code contains the absolute pathway to my server - substitute your own URL here.

This code loads “iFrame_Demo_Doc1.html” as the default when the page opens, which will use your specified URL instead.

The code in the innerHTML of the “iFrame Container” rectangle (iFrame) element automatically loads the desired page into itself when the page opens.

Clicking on a menu item (button) loads the specified URL in the button’s innerHTML into the “iFrame Container”.

The menubar’s three selections (buttons) have a variation of the following code in their innerHTML:

<a href="http://wddtrialdemos.businesscatalyst.com/iFrame_Demo_Files/iFrame_Demo_Doc2.html" target="iframe_a">Doc 2</a>

The text “title” of each button is set up as an anchor (anchor tag).