Hello all – I’m trying to implement a flexible design for a story in Twine.
To make it work, I need to dynamically resize a div so that it scales properly, and maintains its aspect ratio. Outside of Twine, this is trivial (see my code). But I don’t know how to call this script within the Twine environment. Any help would be much appreciated!
<body onload="setHeight()" onresize="setHeight()">
<script type="text/javascript">
function setHeight (){
let divWidth = document.getElementById('titlebox').offsetWidth;
let divHeight = divWidth * 0.666 + 'px';
document.getElementById('titlebox').style.height = divHeight;
}
</script>
You didn’t mention which version of Snowman you are using, so I’m going to assume Snowman 1.4.
You can use jQuery in Snowman to act on different events like you have in your code. Using jQuery, the function on() is used to listen for events.
In Snowman 1.4, the event start.sm.story is fired when the story has finished loading and is about to show. Since body can’t be watched, this is the best, Snowman-specific event to listen for using code.
Adding the following code to the Story JavaScript section using the Twine 2 editor should get you closer to what you want.
// Define a global function, setHeight()
function setHeight(){
let divWidth = document.getElementById('titlebox').offsetWidth;
let divHeight = divWidth * 0.666 + 'px';
document.getElementById('titlebox').style.height = divHeight;
}
// call setHeight() on story start
$(window).on('start.sm.story', function() {
setHeight();
});
// call setHeight() if the window resizes
$(window).on("resize", function() {
setHeight();
});
I gave myself a crash course in jQuery, and was manipulating body, meta, and script elements without success – I learned the hard way that body isn’t watched, so this is exactly what I needed.
Is there a similar method for Harlowe? I realize it’s not the preferred choice (for exactly these reasons), but I’m wondering if I can solve the problem without converting previous work to Snowman.
@DCE You still haven’t stated which version of Snowman you are using, and knowing that is important because answers can vary based on that information.
I notice the latest version (of Snowman) is available with Twine online, but not in the app…
Currently the release of new versions of the main Story Formats (excluding SugarCube) is coupled with the release of each new version of the Twine 2.x application, so generally you would need to update your local copy of the Twine 2.x application to access newer versions of the included story formats.
Possible to install it from the git repository?
None of the main story formats (excluding Chapbook) are ‘officially’ hosted online so there are no ‘official’ remote URLs you can use to install a newer version of these story formats within an older version of the Twine 2.x application. And currently SugarCube is the only story format that is available in a format (a ZIP file) that can downloaded and installed in a local copy of the application.
I simply followed Dan’s install instructions, with the additional step of uploading the format.js file to a server I’ve access to. I simply pointed the Twine app to it, and all (seems) to be working well. 2.0.0 shows up in the format list, with Dan as the author.
Edit: went ahead and updated Twine, and saw that Snowman updated along with it to 2.02. As you pointed out, it looks like I didn’t need the intermediary step of installing it separately.
As I’ll be learning the ins and outs of Snowman, I figured I should use the latest version.
If you ever absolutely need a previous version of Snowman, I’ve been archiving them.
Each link on this page points to the latest of the version, 1.3, 1.4 or 2.0 (2.0.2).
I’m very slowly adding to the Snowman documentation with the 2.X branch. The 1.X branch will stay at 1.4 unless a major bug happens with 2.X the one going forward for the story format.