Moving ui buttons

Authoring Twine
, ,
1

Hi. Trying to move buttons from under ui menu to the top of page. I have special passage who display header. I hidding original buttons via css and copy nav menu to header

<nav id="menu" role="navigation">
	<ul id="menu-core">
		<li id="menu-item-saves">
			<a tabindex="0">Saves</a>
		</li>
		<li id="menu-item-settings">
			<a tabindex="0">Settings</a>
		</li>
		<li id="menu-item-restart">
			<a tabindex="0">Restart</a>
		</li>
		<li id="menu-item-share">
			<a tabindex="0">Share</a>
		</li>
	</ul>
</nav>

but new buttons doesn’t works. They just ignoring any click. How i can reanimate them?

1 Like
2

The buttons on the UI bar have event handlers attached to them, so merely copying them won’t work.

Also, IDs on a page should be unique, so you probably should put “UIBar.destroy();” in your JavaScript section to get rid of the UI bar if you’re going to keep the IDs the same in your bar.

The simple fix is to do this:

<nav id="menu" role="navigation">
	<ul id="menu-core">
		<li id="menu-item-saves">
			<a onclick="SugarCube.UI.saves();" tabindex="0">Saves</a>
		</li>
		<li id="menu-item-settings">
			<a onclick="SugarCube.UI.settings();" tabindex="0">Settings</a>
		</li>
		<li id="menu-item-restart">
			<a onclick="SugarCube.UI.restart();" tabindex="0">Restart</a>
		</li>
		<li id="menu-item-share">
			<a onclick="SugarCube.UI.share();" tabindex="0">Share</a>
		</li>
	</ul>
</nav>

and since some people freak out if you directly refer to the SugarCube object, you could do it using the more complicated method, something like this:

<nav id="menu" role="navigation">
	<ul id="menu-core">
		<li id="menu-item-saves">
			<a tabindex="0">Saves</a>
		</li>
		<li id="menu-item-settings">
			<a tabindex="0">Settings</a>
		</li>
		<li id="menu-item-restart">
			<a tabindex="0">Restart</a>
		</li>
		<li id="menu-item-share">
			<a tabindex="0">Share</a>
		</li>
	</ul>
</nav>
<<script>>
$(document).on(':passagerender', function (ev) {
	$(ev.content).find("#menu-item-saves a").on("click", function () { UI.saves(); });
	$(ev.content).find("#menu-item-settings a").on("click", function () { UI.settings(); });
	$(ev.content).find("#menu-item-restart a").on("click", function () { UI.restart(); });
	$(ev.content).find("#menu-item-share a").on("click", function () { UI.share(); });
});
<</script>>

For that version, you may have to modify it if you’re displaying the passage in some way other than normal.

Hope that helps! :slight_smile:

4 Likes
3

If that “special passage” is a something like a PassageHeader or even just a reposition standard Passage, then you can use a combination of a <<link>> macro and a <<run>> macro to call the required UI API functions.

<nav id="menu" role="navigation">
	<ul id="menu-core">
		<li id="menu-item-saves">
			<<link "Saves">><<run UI.saves()>><</link>>
		</li>
		<li id="menu-item-settings">
			<<link "Settings">><<run UI.settings()>><</link>>
		</li>
		<li id="menu-item-restart">
			<<link "Restart">><<run UI.restart()>><</link>>
		</li>
		<li id="menu-item-share">
			<<link "Share">><<run UI.share()>><</link>>
		</li>
	</ul>
</nav>

note: The Share option will only work correctly if your project contains a StoryShare special passage.

2 Likes
6

second variant works! Thank you HiEv
Greyelf variant works too, thanks! :smiling_face_with_three_hearts:

Can I also ask what functions (kind of UI.saves) are responsible for moving the history back and forth? Engine.forward and backward move to the beginning of the story and to the end. How do I move to the previous page? I could only find the function responsible for #history-jumpto

7

The Engine.forward() and Engine.backward() methods should only move you forward or backwards one step in the history (assuming there is such a step in the history).

You can check your position within in the history using State.length and State.size. If State.length === 1, then you’re as far back in the history as you can go. If State.length === State.size, then you’re as far forward in the history as you can go.

If you’re seeing something different than that, then we may have to see your code to figure out what’s going on.

1 Like
8

I made a decision not to move them, I will do without it. But I wanted to follow your example, which you threw off earlier

<<script>>
	$(document).on(':passagerender', function (ev2) {
		$(ev2.content).find("#history-backward").on("click", function () { Engine.backward(); });
		$(ev2.content).find("#history-jumpto").on("click", function () { UI.jumpto(); });
		$(ev2.content).find("#history-forward").on("click", function () { Engine.forward(); });
	});
<</script>>
9

If you’re not using the game history, then you should set Config.history.maxStates to 1 so that it doesn’t waste space storing information which you don’t need.

2 Likes
10

thanks for replying, will try to do something with that :slightly_smiling_face:

11

Where would any of this ‘menu-navigation’ code go? Header Passage or the Story Interface? I tried to follow the most helpful guidance of these sample pages, given elsewhere. [Sample Code (drv.tw)] - very helpful, thank you! But can not tell how to use the codes above to get a working menu in the header area at the top for a story and need more help pls.