Menu API buttons fixing

Authoring Twine
, ,
1

I’m trying to create a menu of buttons for a game, a constant div throughout the game with buttons in fixed positions.

This adds the base of the menu to the body of the game.
Javascript/jQuery

(function() {
    const actbar = jQuery(document.createElement('div'))
        .attr("id", "action_menu");
	
	jQuery("#story").append(actbar);

	$(document).on(':passagedisplay', function() {
		setPageElement('action_menu', 'ActionMenu');
	});
})();

CSS

div #action_menu {
	overflow: hidden;
	font-size: 1.2em;
	background-color: rgba(0, 0, 0, 1);
	padding-left: 20px;
	position: fixed;
	left: 14.5em;
	bottom: 0em;
	height: 8em;
 	width: 85%;
}

#action_menu .link-internal {
	width: 10em;
  	border: 3px solid #7fc7e3;
	color: #7fc7e3;
	background-color: transparent;
  	text-align: center;
	border-radius: 10px;
	display: inline-block;
	font-family: 'cursive';
	text-decoration: none;
  	margin-top: 15px;
  	margin-left: 12px;
  	padding: 0.25em 0.75em;
}

And then the ActionMenu passage containing the links, but this adds a row of links that change their positions drastically according to the resizing of the screen.

At the normal screen (100%)

unknown1
unknown11387×158 46.3 KB

But if the screensize changes…

unknown2
unknown21387×120 33.6 KB

I would like the links to remain fixed in their positions.

Twine Version: Twine 2
Story Format: Sugarcube 2

2

And what do you want to have happen if the screen size gets smaller?

For your example, I’d just put them inside of a <span> or <div> (assuming that they aren’t already inside one) and set the max-width on it so that it won’t get wide enough to show seven buttons across.

Hope that helps! :grinning:

3

The buttons must not change the position, so they must remain fixed on the screen, yes.

4

Then just make the <span> or <div> a fixed width and that should solve it.

1 Like