[Solved] Using JavaScript to display more content

brutalexcess

I have the following JavaScript in a script passage called "Centre Mall Script":

//requires jquery

$(document).ready(function() {
$('#mall-ground').click(function(e) {
e.preventDefault();
$('#floor-info').html('<img src="mall_ground.png" style="margin:5px auto;">');
});
});

I then have the following HTML code with content on another passage called "Centre Mall":

!City Centre Mall

<div id="exploration">
<ul id="menu-bar"><li><a id="mall-ground" href="#">Ground Floor</a></li><li><a id="mall-first" href="#">First Floor</a></li></ul>

<div id="floor-info"></div>
</div>

So, ideally, what's happening is that when either one of those links are clicked, the JavaScript code should add the HTML to the 'floor-info' DIV container accordingly. But for some reason, it is not adding the picture I am requesting. The picture is in the same folder as the HTML document, so I am wondering if there is an inherent bug with Twine. I have asked around on other forums, and I have tested the code using different URLs in separate HTML files and they work. For some reason it does not seem to be working with Twine. Any reason for this?

TheMadExile

First off, which story format are you are using?

Secondly, you're firing your JavaScript when the browser signals the readiness of the document (that's generally once at startup).  Since your "Centre Mall" passage probably isn't active at that point, the click handler never gets attached because the #mall-ground element doesn't exist within the DOM yet.  What you'll probably have to do is either make it a delegated handler or use something like the postrender task object to register a function which will attach the non-delegated handler when "Centre Mall" becomes active.

You can get yourself into trouble with delegated handlers unless you understand the ramifications, so I'd recommend trying the non-delegated handler.  However, here's an example of each.

Non-delegated handler example:


postrender["attachMallHandler"] = function (context) {
if (passage() === "Centre Mall") { // check if the currently rendering passage is the "Centre Mall" passage
// The passage is not yet in the DOM, however, we do have a reference to the output buffer which can be passed to jQuery as a context.
$('#mall-ground', context).click(function(e) {
e.preventDefault();
$('#floor-info').html('<img src="mall_ground.png" style="margin:5px auto;">');
});
}
};


Delegated handler example: (you should not need the ready() wrapper with Twine, as its main function is called on ready, so this should be sufficient)


$(document.body).on("click", "#mall-ground", function(e) {
e.preventDefault();
$('#floor-info').html('<img src="mall_ground.png" style="margin:5px auto;">');
});


[EDIT] Updated the delegated handler example, because I'm a boob.

brutalexcess

Thank you very much! The first solution worked just as I expected, although will probably tweak the HTML

Don't know what story format I am using... default, I suppose, whatever that is!

greyelf

brutalexcess wrote:

Don't know what story format I am using... default, I suppose, whatever that is!

To determine your current format select the Story > Story Format menu item and see which format has the tick mark against it.

This is a good thing to know and to mention when posting a new Help Topic as it can influence the suggested solution.