Twine Version: Harlowe 3.3.5
I placed the tw-storydata tag in a HTML page along with the Twine engine code and CSS file. Before the Twine scenario, there is other content in the HTML page. However, an interesting behavior is that when the HTML page loads, the focus will go to the Twine scenario (I am suspecting it is going to tw-link tag), which is causing the page to scroll automatically to where the Twine scenario locates.
I am wondering if anyone else has experienced this behavior before and what would be the best solution. Would it be something in the Harlowe version along? Maybe the other Twine engine version would not have that behavior. Currently, I am placing an auto scroll back to top code to combat that on page load.
Just to confirm. Are you embedding a Harlowe story into a web page of your own design? Are you able to edit the parent web page that contains the Harlowe story? …or do you need the solution to come from the Harlowe story itself?
I have not done anything like what you are describing, but I am familiar with web technologies. I wonder, have you tried embedding your story within an <iframe> that links directly to your compiled Harlowe HTML file? …or are you copying and pasting all the Harlowe story code into another HTML file directly?
Just a little more information is needed.
Just to make mention, itch.io embeds Harlowe games. See how it’s done there. They use iframes. However, the games are at the top of the page.
The Story HTLM file generated by the Twine 2.x application, and by any TWEE Notation based compiler (like TweeGo), is a self-contained single-page web-application.
The JavaScript based engine and default CSS included in the Story Format’s template assumes that the file will have specific HTML elements & structures within it, and the <tw-storydata> element that includes the project’s Passage meta-data is only one of those structures.
As stated by HAL9000, generally an <iframe> element is used when needing to embed the contents of a Story HTML file within another web-page.
Hi HAL9000, thank you for your response! To clarify:
I believe I am embedding a Harlowe story into a HTML page. The structure would be something like:
<div class="container">
<h1>Heading 1</h1>
<p>Some text</p>
...
<tw-story><noscript><tw-noscript>JavaScript needs to be enabled to play XXX.</tw-noscript></noscript></tw-story>
<tw-storydata>...</tw-storydata>
</div>
The CSS file is placed in the <head> element and the JS file at the bottom.
I have thought about embedding the story within an <iframe>, but how would you handle the responsiveness if the story is embedded in an <iframe>?
By making the <iframe> responsive in size and allowing the story to react to that boundary (which it already does by default).
Personally, if I felt the need to keep the parent site at arms reach from the story, I’d launch the game in an <iframe> that sticks to the middle of the visible area (on top of everything) with a semi-transparent backdrop with a thin enough margin/padding so that the story gets almost full use of the screen. The iframe can scroll and has a small X in the upper right outside the iframe. The backdrop would cancel all events from passing through so focus can remain on the story while it’s displayed. That would be pretty straightforward to setup and something to consider.
I don’t know exactly the end result you want to achieve or why you feel the need to have the story embedded in another web page, instead of linking to a new window or tab, but it’s definitely a focus thing that’s occuring.
Event listeners will allow you to expose which element is getting the attention that you don’t want happening. Log the elements to the console to find the culprit, then cancel the event before it happens with deliberate code. Perhaps the browser inspector can already achieve this monitoring on it’s own? Also, onfocus will trigger, onblur happens before that though. Might be helpful, might not be. I think this is the angle worth pursuing first.
Are you familiar enough with JS to play with event listeners and cancel events from happening?
Another thing worth mentioning. What you want to achieve is not a Twine thing at all. It’s a browser thing and Stack Exchange is amazing for that sort of help.