Remove Sidebar for certain tagged passages

Jajajewels · June 2017

So I've been wondering if it's possible to remove the sidebar for the few first passages, and then automatically make it appear as the player moves on. Something like, during the first few passages (choosing character and such) the sidebar isn't there, and then once the story itself begins, the sidebar is there with all the information I want.

Is this a thing? Can it happen?
keep in mind I'm really new at this, please... thanks

Oh, an I'm using twine 2 with Sugarcube 2.18

greyelf · June 2017

It depend on what you mean by "remove the sidebar":

1. Stow the side-bar.

You can use the UIBar.stow() function found in the UIBar API to stow/hide the side-bar when your story starts, this is done by placing code like the following within your story's Story Javascript area.

UIBar.stow();

... you can later use code like the following within a passage to unstow the side-bar.

<<script>>UIBar.unstow()<</script>>

or

<<run UIBar.unstow()>>

2. Totally hide the side-bar including the stow-bar.

This is a little harder because you need to:

a. Have some way to indicate when to hide the side bar, which you can do by marking each passage you want it hidden for with the same Passage Tag. The tag name you use is not important, this example will use no-side-bar

b. hide the side-bar and then move the story area over slightly to the left, both of which can be done using CSS withing your story's Story Stylesheet area.

The following CSS uses selectors based on the no-side-bar passage tag, if you use a different passage tag name then you will need to modify the selectors likewise.

body[data-tags~="no-side-bar"] #ui-bar {
	display: none;
	left: -15.5em;
}

body[data-tags~="no-side-bar"] #ui-bar~#story {
    margin-left: 4.5em;
}

idling · June 2017

If you just want it to appear at a specific point in your story and then stay there till the end, you don't need to tag passages. Just enter into the stylesheet:

#ui-bar {
visibility: hidden;
}

And into the passage you want the Sidebar to appear you enter:

<<set document.getElementById("ui-bar").style.visibility = "visible";>>

If you want to also move the story area, you can do the same by manipulating margin-left of #story.

greyelf · June 2017

@idling: there are two issues with your solution:

1. It does not allow for the extra width added to the story left margin into which the side-bar is shown.

2. It is generally not a good idea to get beginners to use Javascript without actually supplying them with the background understanding of what exactly that Javascript is doing. The is an old saying about giving a person a fish vs teaching them how to fish.

Jajajewels · June 2017

@greyelf and @idling . I tried both your examples, and they work perfectly for what I needed. I'm starting to decode what the Javascript did, it might take me a while but I'm getting there! Thanks for you help, really

idling · June 2017

@greyelf I'm not sure I understand issue number 1.

<<set document.getElementById("story").style.marginLeft = "20em";>>

Seems to work without any problem on my end.

greyelf · June 2017

@idling Yes that code does change the margin, but your original solution only changed the visibility of the side-bar.

idling wrote: »

<<set document.getElementById("ui-bar").style.visibility = "visible";>>

idling · June 2017

@greyelf And after that I said they could manipulate the left-margin the same way:

idling wrote: »

If you want to also move the story area, you can do the same by manipulating margin-left of #story.

Which like I said seems to work fine for me, unless I am overlooking something.

greyelf · June 2017

idling wrote: »

Which like I said seems to work fine for me, unless I am overlooking something.

Yes, but you (originally) gave no example on how that would be achieved.

Jajajewels wrote: »

... keep in mind I'm really new at this, please... thanks

You assumed that the OP (and equally importantly everyone else reading this thread) had the knowledge/ability about Javascript to workout how to implement a margin left change, without supplying any references on where to get that information if they didn't nor an example. I am also partly guilty of something similar because I gave no references to information of the CSS I supplied them.

note: I am not trying to put down the excellent solutions you supply, I am just trying to make those solutions more complete so that all the people who read a thread looking for a similar solution will be able to understand it.

TheMadExile · June 2017

I'm a bit late to the party, however….

greyelf wrote: »
2. Totally hide the side-bar including the stow-bar.

[…]

b. hide the side-bar and then move the story area over slightly to the left, both of which can be done using CSS withing your story's Story Stylesheet area.

The following CSS uses selectors based on the no-side-bar passage tag, if you use a different passage tag name then you will need to modify the selectors likewise.
body[data-tags~="no-side-bar"] #ui-bar {
	display: none;
	left: -15.5em;
}

body[data-tags~="no-side-bar"] #ui-bar~#story {
    margin-left: 4.5em;
}

A few notes.

For the first rule. If you're setting the UI bar to not display at all, then you don't need to alter its left property at all since it will be removed from the layout completely.

For the second. You shouldn't need to use the general sibling selector in this case. Also, the default left margin for the story element is 2.5em—a stowed UI bar alters that to 4.5em to reserve space for itself, which you don't need it you're hiding/removing it.

Altogether, the changes would look like:

body[data-tags~="no-side-bar"] #ui-bar {
	display: none;
}

body[data-tags~="no-side-bar"] #story {
	margin-left: 2.5em;
}

idling · June 2017

@greyelf You don't need to worry about me feeling put down or anything like that - It just seems that all of this is so well documented online that supplying this level of detail oftentimes feels superfluous.

Howdy, Stranger!

Categories

Remove Sidebar for certain tagged passages

Comments