Sugarcube2/Javascript scroll element to top & resize/hide elements

Authoring Twine
, ,
6

OK, then you can shorten your CSS to this:

.box {
    border: 0.25em #DFF0D8 solid;
  	padding-top: 7px;
  	padding-right: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
  	overflow: auto;
  	background-image: linear-gradient(to bottom right, #201C54, #161249, #000000);
  	position: fixed; 
 	top: 0em; 
	bottom: 0em;
  	left: 0em;
 	right: 0em;
 	z-index: 1;
  	line-height: 1em;
}
#battlebox {
 	top: 100%; 
	bottom: 100%;
  	left: 100%;
 	right: 100%;
}
#buttonbox {
  	top: 66.6%;
  	left: 20%;
  	z-index: 2;
}
#statsbox {
 	right: 80%;
}
#textbox {
	bottom: 33.3%;
  	left: 20%;
}

Since any properties in the “box” class will be used on all boxes, that means that for each box ID you only need to have any properties which are different from the default in the “box” class.

If you want all of the boxes to scroll to the top with every passage transition, then you can put this in your JavaScript section:

$(document).on(":passagerender", function(ev) {
	$(".box").scrollTop(0);
});

That uses the jQuery .scrollTop() method to scroll everything with the “box” class to the top every time a :passagerender event is triggered.

Hope that helps! :slight_smile:

2 Likes