Harlowe + jQuery: Elements and Navigation
Twine 2.0 and Harlowe add a number of extra HTML elements: //tw-link//, //tw-expression//, //tw-sidebar//, //tw-passage//, //tw-passagedata//, and //tw-story//.
These are important to note because, when using jQuery, these can be accessed, edited, and their attributes retrieved.
[[Navigating links]]Through searching for an element attribute matching the name of a link, we can //click()// it using jQuery to navigate through a story.
Press any button to progress!
[[Move to the next passage!]]
<script>
$( "html" ).keypress(function() {
$("[passage-name = 'Move to the next passage!']").click();
});
</script>Without knowing the name of a //tw-link//, it can also be //click()//'d through looking for it and using the same previous method.
<script>
$( "html" ).keypress(function() {
$("tw-link").click();
});
</script>
(Be careful with this example, as it will //click()// ALL the //tw-link// elements found.)
[[Moving along!]]Much like the previous example, jQuery can access the elements holding the story and its own attributes. Through using jQuery selectors, the elements holding the story and its content can be changed. (However, keep in mind that existing Harlowe functionality should be used to do this normally.)
<script>
$("tw-passage").css({backgroundColor: "#fff", color: "#000"});
$("tw-sidebar").css({backgroundColor: "#fff"});
</script>
(link: "Getting fancy")[(goto: "Fancy")](This example completely defeats the purpose of using Harlowe. However, it also shows how to retrieve content from named passages.)
(Press left or right arrow keys.)
<div id="content"></div>
<script>
$( "html" ).keydown(function(event) {
switch (event.which) {
case 37:
$("#content").text( $("[name = 'Left']").html() );
break;
case 39:
$("#content").text( $("[name = 'Right']").html() );
break;
}
});
</script>This is left content.This is right content.