Additional 'Sidebar' along window bottom in Sugarcube 2.0?

Authoring Twine
,
1

So, I’m trying to add an additional ‘sidebar’ along the bottom of the window that will be able to be consistently seen in every passage in Sugarcube. I don’t quite know how to do it without interrupting the text appearing in each passage, and intend for this bar along the bottom of the screen to contain several buttons that will link to new passages and scenes, rather than linking to new passages via the text appearing in previous passages. (Think like arrow buttons that would lead you from room to room)
I don’t want it to be collapsible, mind you, but figuring this out would be a great help, allowing me the knowledge to add a similar sidebar to the top that could link to menu options like save-data, in-depth stats and the like.

I’ve done some pretty thorough looking and haven’t seen anyone trying to quite do what I am, from what I’ve seen, so some help would be very much appreciated…

Twine Version: 2.3.7
Story Format: Sugarcube 2.31.1

2

You could take a look at my “Bottom and Top Bars” sample code. It sounds like it should do what you want. (Click “Jump to Start” in the UI bar there to see other sample code.)

Hope that helps! :slight_smile:

3

So, this works like a charm, thank you!
Sorry for the late reply.
That brings up another subject though, would there be a way to prevent these bottom and top bars from being affected from the fade in/out of transitions, similar to how the main sidebar functions?

4

The reason those bars are included in the Passage Transition’s visual effect is because their contents are pre-pended/appended to the contents of the current Passage, where as the parent HTML element of the left sidebar exists outside the parent element of the main passage area.
eg.

<div id="ui-bar">...HTML elements that make up the left sidebar...</div>
<div id="story" role="main">
	<div id="passages">
		<div id="passage-start" data-passage="Start" class="passage">
			<div id="topbar">... Top bar content...</div>
			/* ...contents of Start passage... */
			<div id="bottombar">... Bottom bar content...</div>
		</div>
	</div>
</div>

You could use a technique like the one used within this Right Sidebar example to add the parent HTML elements that contain your dynamic top and bottom bars outside the main passage area, that way they won’t be affected by the Passage Transition visual effect.

5

If the bottom bar is always visible, then instead of using PassageFooter, like I did in the sample code, just make a BottomBar passage with:

<div id="bbblock"><div id="bbtext">Put your bottom bar content here.</div></div>

and use this JavaScript code instead:

$("#story").append('<div id="bottombar"></div>');
$(document).on(":passagedisplay", function (event) {
	$("#bottombar").empty().wiki('<<include "BottomBar">>');
});

That will put it at the bottom and then update it whenever you go to a new passage.

Enjoy! :smiley:

6

Thank you again, that works perfectly!
You’re the best man, I really appreciate all of this