[This is my last #TwineTuesday post for awhile. I am taking a break from writing about Twine on a weekly basis to spend time on other teaching methods and projects.]
Last year, back when Twine was in its 1.3.5 version, it was hard to make a no-click project. As I covered in March 2013, it required some advance knowledge of how events were triggered across DOM elements and the differences between IE’s attachEvent and other browser’s use of addEventListener. It was all very complicated and messy.
Many people had turned to using jQuery as a solution to bypass all the browser differences too. And, while it was a great way to get no-click working, it required editing a Twine file after it had been compiled. This was something I felt broke the spirit of Twine projects and generally did not support or recommend for others to try.
However, now that Twine 1.4 can include jQuery internally, it has become much easier to do this. In fact, it only requires a handful of lines of code.
From within Twine, go to Story -> Special Passages. Click on StorySettings to have that passage created for you (if it does not already exist).
Change, if it hasn’t been already, the word “off” to “on” after the colon for jQuery. This will enable the use of jQuery code and syntax in the Twine project.
| // First, create a reference to the Wikifier.createInternalLink function. | |
| // (Internally, this is what Twine uses to connect passages together. | |
| // It is the last step in parsing double-bracked content into links.) | |
| var oldCreateInternalLink = Wikifier.createInternalLink; | |
| // Then, create a new function that mimics its functionality. | |
| Wikifier.createInternalLink = function(place, title) { | |
| // By calling the old function, it returns | |
| // the DOM element (the link) it was about to | |
| // add to a passage. | |
| link = oldCreateInternalLink(place, title); | |
| // Using jQuery, add a listener for a 'mouseover' event. | |
| // When it happens, call the anonymous function to | |
| // 'Click' the link itself. | |
| $(link).on('mouseover', function() { | |
| this.click(); | |
| }); | |
| // Finally, return the link so that it can be added to a passage | |
| return link; | |
| } |
Create a script passage and copy the above code into it.
There you have it. Now, if a link that connects to another passage (an internal link) is created, it will be triggered by a ‘mouseover’ event. Just by moving the cursor over the link, it will be ‘clicked’ and tell Twine to load its associated passage next.
Digital Ephemera 