Links fixed to bottom of viewport

Authoring Twine
1

SUGARCUBE 2.28.2

I’m trying to implement a bar which is fixed to the bottom of the viewport on tagged passages. I’ve currently implemented the bar using the following css:

#bottom {
  position: fixed;
  height: 5.5em;
  bottom: 0em;

  max-width: 864px;
}

body.options #story {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 55px;
  overflow: auto;
  border-bottom: 1px solid #333;
}

which is then utilised through the use of spans with the “bottom” id.

However, I am having issues with some minor formatting details, and am unsure whether my current implementation is a good solution.

I would like the border that is currently tied to the width of the webpage body, to instead be tied to the width of the passage. Replacing body.options #story with body.options #passages achieves this but causes the passage to have a nested scrollbar (EDIT: NOT TRUE, BOTH HAVE NESTED SCROLLBARS SEE LATER POST) . Is there any way of solving this, or implementing a more robust link bar?

2

Are you using overflow:auto on purpose? That means to include a scroll bar if the content gets too big for the box that you’re trying to put it in, even by one pixel. And since borders and margins and padding are added to the element’s size, it’s easy for that to happen.

So I’d try overflow: hidden or overflow: visible.

Otherwise you usually have to do annoying work-arounds like having an outer box with no borders/padding/margin to set the size, and then another box inside that with the borders/padding/margin that you want, and it’s a pain. But it depends on the details of the layout.

Dunno if that helps: maybe someone who knows SugarCube better will have a better answer.

3

I’m using the overflow:auto in order to stop passage text overflowing into the link bar at the bottom. I made a mistake in my original post. A nested scrollbar is included whether #story or #passages is used. I would like the lower border achieved using:

#bottom {
  position: fixed;
  height: 5.5em;
  bottom: 0em;

  max-width: 864px;
}

body.options #passages {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 55px;
  overflow: auto;
  border-bottom: 1px solid #333;
}

but without the scrollbar being nested within the passage div.

4

Ah, I see. The problem is that when you put overflow:auto on #story or #passages you are explicitly saying “put a scrollbar in that div if the content is too big.” So this approach won’t work.

The usual thing is to just fix the footer to the bottom and leave the main content alone. So give your link bar a non-transparent background to hide the main content that flows behind it. And put the border on the top of the link bar rather than the bottom of the content:

#bottom {
    position: fixed;
    height: 5.5em;
    bottom: 0em;
    width: 100%;
    background: black;
    border-top: 1px solid #333;
}

(with no position:fixed or overflow on the #passages or #story div)

This has the disadvantage that if you scroll by a “page” it will scroll too far (because it will scroll past the part that’s covered up by the link bar). But most major websites screw this up, so I don’t think there’s an easy way around it. HTML doesn’t have any way that I know of to hook up the main scroll bar so that it scrolls just one part of the page.

Sorry. Maybe someone else knows more than I do…

–Josh

5

Thanks Josh,

It looks like your implementation makes the scroll bar work, but sadly it also causes the text to be located in a strange place, and the border to be larger than I want it to be. The scrolling by a page issue isn’t a huge problem for me though :slight_smile:

I’ve done some work on styling using your advice, and I’ve got something which is very close to what I’m looking for, but it doesn’t yet respond to window resizing like the rest of the passage:

#bottom-container {
    position: fixed;
  	height: 6.5em;
  	bottom: 0em;
	left: 0;
  	right: 0;
  	z-index: 20;
  	background-color: #ddd;
}
#bottom-wrapper {
  margin-right: 2em;
  margin-left: 19.5em;
}
#bottom {
  max-width: 864px;
  margin: 0 auto;
  
  border-top: 1px solid #333;
  padding-top: 1em;
  padding-left: .5em;
  padding-right: .5em;
}

With the following formatting applied to passages, so that any text hidden by the bar can be seen when you scroll all the way to the bottom:

body.options #passages {

  margin-bottom: 5.5em
}

The reason for all of the wrappers is so the bar works like the rest of the passage. The padding causes the bar to be a little bigger than the text which gives a nice effect. I saw that TheMadExile formatted a bar with similar resizing functionality here: https://twinery.org/forum/discussion/2328/how-to-push-text-to-the-bottom-of-the-page and I’m going to attempt to copy the fancy formatting that they used.

If I were more adept at formatting I would also try to make it so the height of the bar is dependent on the height of the text contained within it. I think it would be difficult to make the margin-bottom for the whole passage react to the height of the content of the bar though.

EDIT:

Thanks to TheMadExile’s code, and some use of the chrome “inspect” tool, I’ve managed to achieve the desired results, barring the variable height.
I’ve added the formatting for window resizing:

@media screen and (max-width: 1136px) {
	#bottom-wrapper {
		margin-left: 18.5em;
		margin-right: 1em;
	}
}
@media screen and (max-width: 768px) {
	#bottom-wrapper {
		margin-left: 3em;
	}
}

With the formatting for the stowed bar:

#ui-bar.stowed~#story #bottom-wrapper{
    margin-left: 3em;
}

I also have changed added a transition which makes the size adjustments smooth, matching the story passage formatting:

#bottom-wrapper {
  margin-right: 2em;
  margin-left: 19.5em;
  transition: margin-left .2s ease-in;
}
6

You might want to try this. First, create a passage named PassageFooter with this code inside of it:

<<if tags().includes("bbar")>>

<div id="bottombar"><div id="bbblock"><div id="bbtext">Put your text here.</div></div></div><</if>>

Just put your text, links, or whatever you want where it says, “Put your text here.” It will automatically make the bar the correct height to contain the content. (In most cases you’ll want to make sure you include the blank line to give a bit of space at the bottom of your passages as well.)

Then, put this in your “Stylesheet” section:

/* BottomBar styling - Start */
#bottombar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #333;
	border-top: 1px solid #444;
	box-shadow: 0 0 10px 0 #333;
}
#bbblock {
	margin-left: 20em;
	margin-right: 2.5em;
	-o-transition: margin .2s ease-in;
    transition: margin .2s ease-in;
}
#bbtext {
	text-align: center;
    max-width: 54em;
    margin: 0 auto;
}
#ui-bar.stowed~#story #bbblock {
	margin-left: 4.5em;
}
@media screen and (max-width: 1136px) {
	#bbblock {
		margin-left: 19em;
		margin-right: 1.5em;
	}
	#ui-bar.stowed~#story #bbblock {
		margin-left: 3.5em;
	}
}
@media screen and (max-width: 768px) {
	#bbblock {
		margin-left: 3.5em;
	}
}
/* BottomBar styling - End */

Now, in any passage that has a “bbar” tag, you’ll see that bar at the bottom of the passage with your text in it.

You can see the bottom bar sample code in action at that link, as a part of my Twine/SugarCube sample code collection.

Hope that helps! :slight_smile:

1 Like
7

Oh that looks so nice. Is there an easy way to change the text that is displayed within from a separate passage? Thanks regardless though! I’m glad that my CSS looks somewhat similar to yours, at least I was on the right track!

8

Yeah, just change the “Put your text here.” bit to “<<include "Passage Name">>”, using the <<include>> macro to include the contents of whatever passage you name there.

9

I’m not sure that quite achieves what I meant.

I want to edit the contents of the Bottom Bar, but I want to do this from a separate passage. For example on one passage i might want the Bottom Bar to read: “Hello World”; while on another I’d want it to read: “Bye Bye Planet”. The degree to which this text would change is high enough that using if functions would be impractical.

Fast Edit: Sorted this with the use of a in the bottom bar passage.

10

Ah, sorry, I misunderstood what you wanted. I thought you were saying that you wanted text displayed from a separate passage within the bottom bar, hence the <<include>> suggestion.

For what you actually want, you’d just change the “ Put your text here. ” bit to “ $txt ”, and then do <<set $txt = "Whatever text you want for this passage.">> in each passage, where you put whatever text you want there, and it would show that text.

I’m guessing you’ve figured that out already, but your “Fast Edit” appears to be missing some text, so I wanted to make sure.

Enjoy! :slight_smile:

11

Haha, yes that’s what i’ve done, albeit with temporary variables instead. I fumbled around with spans first though which wasn’t working due to the order that the passages are rendered.